Skip to content

Quick Start: WalletConnect Apps

Estimated time to read: 2 minutes

Web3 apps using 'WalletConnect' can easily onboard users via social login by integrating with the Arcana Auth Wagmi SDK!

Prerequisites

1. Register & Configure

2. Install SDKs

For 'WalletConnect' app, install the following packages:

npm install --save @arcana/auth-wagmi @arcana/auth
yarn add @arcana/auth-wagmi @arcana/auth

Use latest SDKs

Use the latest Arcana Auth SDK release: v1.0.11. Migrate from Arcana Auth SDK v1.0.10 -> v1.0.11.

Versions older than Arcana Auth SDK v1.0.10 may encounter potential breaking changes that require app reconfiguration, integration code updates, and redeployment. Refer to the Migration Guides and Release Notes.

Use the latest Arcana Auth Wagmi SDK release: v3.0.0

3. Integrate

Use the unique Client ID obtained after registering the app and creating a new AuthProvider instance.

src/ArcanaConnector.ts
// Set up Arcana Auth 

import { AuthProvider } from "@arcana/auth";

let auth: AuthProvider | null;

const getAuthProvider = () => {
  if (!auth) {
    auth = new AuthProvider(
      "xar_test_b2dde12aad64eb35d72b2c80926338e178b1fa3f"
    );
  }
  return auth;
};

export { getAuthProvider };
AuthProvider Optional Parameters

Besides Client ID input parameter, you can optionally customize these settings in the AuthProvider constructor:


position: wallet position within the app context - left|right

theme: wallet theme - light|dark

connectOptions: built-in login UI compact mode - true|false


See AuthProvider constructor parameters for details.

Use the auth-wagmi package, specify the AuthProvider instance and create a new ArcanaConnector.

src/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
  }
}

Onboard Users

Set up Wagmi configuration and onboard users via the built-in plug-and-play login UI (default).

src/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>,
)
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 for onboarding users in a 'WalletConnect' app for details.

Arcana JWT Token

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can access this token via getUser() method and refer to the loginToken field of the UserInfo object.

Developers can use this token to verify the user and subsequently generate another token for app use if required.

In the future, the Arcana JWT Token will be deprecated. Use userDIDToken to verify user.

Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the Arcana DID Token. App developers can access this token via getUser() method and refer to the userDIDToken field of the UserInfo object.

Developers can use this token to verify the user and subsequently generate another token for app use.

Sign Transactions

Use the standard JSON RPC Web3 wallet operations supported by the AuthProvider. See Web3 Wallet Operations for details.

Wallet Customization

Besides theme and branding, developers can manage the user experience for signing blockchain transactions by choosing the default, built-in Arcana wallet UI and tinkering with the wallet visibility or selecting a custom wallet UI.

4. Deploy

That's all!

Your 'WalletConnect' app is now powered by Arcana Auth SDK and Arcana Auth Wagmi SDK to onboard users and allow authenticated users to sign blockchain transactions using Arcana wallet.

See Also

Arcana Auth SDK Quick Links


Last update: June 26, 2024 by shaloo