Plug-and-Play Login UI

Estimated time to read: 2 minutes

Use the built-in, plug-and-play login UI modal to quickly onboard users in a 'WalletConnect' app integrated with the Arcana Auth Wagmi SDK.

Custom Login UI

You can onboard users through a custom login UI instead of the built-in plug-and-play one. See how to use custom login UI and onboard users in a 'WalletConnect' app.

Prerequisites

Register the Wagmi app and configure SDK usage settings for social login providers, manage app chains and wallet user experience.
Install the required SDK packages for 'WalletConnect'.
Integrate 'WalletConnect' app and create AuthProvider, ArcanaConnector.

Steps

1. Setup `WagmiConfig`

Use the ArcanaConnector created during app integration to set up Wagmi config.

main.ts

//Use "`auth-wagmi` version > v2.0.0"
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Buffer } from 'buffer'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import App from './App.tsx'
import { config } from './wagmi.ts'

import './index.css'

globalThis.Buffer = Buffer

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>,
)

2. Set up `WagmiProvider`

Next, use the WagmiProvider with this specified Wagmi config and initialize WagmiProvider in the app.

wagmi.ts

//This example uses Arcana Wallet connector and Coinbase Wallet

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { getAuthProvider } from './arcanaConnector';

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected(),
    coinbaseWallet({ appName: 'Create Wagmi' }),
    walletConnect({
      projectId: '3fcc6bba6f1de962d911bb5b5c3dba68', //WalletConnect ProjectID
    }),
    ArcanaConnector(
      {
        auth: getAuthProvider(),
      }
    )
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

What's Next?

Use AuthProvider, the EIP-1193 provider offered by the SDK, to call supported JSON/RPC functions and Web3 wallet operations in the authenticated user's context.

Plug-and-Play Login UI

Prerequisites

Steps

1. Setup WagmiConfig

2. Set up WagmiProvider

What's Next?

See also

1. Setup `WagmiConfig`

2. Set up `WagmiProvider`