Skip to content

Plug-and-Play Login UI

Estimated time to read: 4 minutes

With Wagmi wallet connectors, Web3 developers can allow app users to easily switch between multiple wallets within a single application. Wagmi apps can use the custom connector offered by the Arcana Auth SDK to enable the Arcana wallet.

In this guide, you will learn how to onboard users via the built-in plug-and-play login UI in Wagmi apps integrated with the Arcana Auth SDK.

Prerequisites

  • Register Web3 Application: Log into the Arcana Developer Dashboard https://dashboard.arcana.network to register and configure the app before they can use the Arcana Auth SDK and enable the Arcana wallet for authenticated app users.

  • Set up Authentication Providers: Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.

    Configure Authentication Providers

    You may be required to configure additional provider details for different authentication providers. In the case of Google, the developer must use Google Developer Console to set up the app and generate a Google assigned client ID for Google OAuth. This Google ClientID will be configured in the Arcana Developer Dashboard Social Auth settings before integrating the app.

    For details, see how to configure authentication providers.

  • Save the Client ID assigned to the app and displayed in the Arcana Developer Dashboard. It is required later during integrating with the Arcana Auth SDK.

Steps

Onboarding users in Web3 Wagmi apps via the plug-and-play auth feature of the Arcana Auth SDK is simple!

Follow these three steps:

Step 1: Install Arcana Auth SDK packages

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

Step 2: Create AuthProvider and ArcanaConnector

Import auth package and create AuthProvider. Then import auth-wagmi package for creating an ArcanaConnector later during WagmiConfig setup.

To instantiate the AuthProvider, specify the unique Client ID value assigned to the app after registering through the Arcana Developer Dashboard. Specify the AuthProvider while instantiating the ArcanaConnector as shown in the sample code below to use the plug-and-play login UI for onboarding users.

utils/newArcanaAuth.js
import { AuthProvider } from "@arcana/auth";

let auth: AuthProvider | null;

const newAuthProvider = () => {
  if (!auth) {
    auth = new AuthProvider(
      "xar_test_b2ddxxxxxxxxxxxxxxxxxxxxxxxx78b1fa3f"
    );
  }
  return auth;
};

export { newAuthProvider };
...

Compact Mode

While creating the AuthProvider, you can choose the compact mode (optional) for the plug-and-play login UI.

Step 3: Set up WagmiConfig

Next, provide the AuthProvider created earlier while creating an ArcanaConnector and set up Wagmi.

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

let auth: AuthProvider | null;

if (!auth) {
  auth = new AuthProvider(
    "xar_dev_c2fb7be163754e57d384e24257ea2c8d2a5dd31a"
  );
}

export const connector = () => {
  return new ArcanaConnector({auth,})
};

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    injected(),
    coinbaseWallet({ appName: 'Create Wagmi' }),
    walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
    connector(),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}
App.js
// Note:  
// This sample code is for 
// wagmi versions 1.x.y and auth-wagmi 2.a.b
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonAmoy } from "wagmi/chains";
import { newAuthProvider } from "./utils/newArcanaAuth";
import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
import "../styles/globals.css";

const { chains, provider, webSocketProvider } = configureChains(
  [mainnet, polygon, polygonAmoy],
  [publicProvider()],
  { targetQuorum: 1 }
);

export const connector = (chains: Chain[]) => {
  return new ArcanaConnector({
    chains,
    options: {
      auth: newAuthProvider(),
      login: {
        provider: "google",
      },
    },
  });
};

const { chains, publicClient } = configureChains(
  [polygon, polygonAmoy],
  [publicProvider()]
);

export const wagmiEntity = createConfig({
  autoConnect: true,
  connectors: [connector(chains)],
  publicClient,
});
...
App.js
// Note:  
// This sample code is for 
// wagmi versions 0.x.y and auth-wagmi 1.a.b

import { WagmiConfig, configureChains, createClient, Chain } from "wagmi";
import { goerli, mainnet, polygon, polygonAmoy } from "wagmi/chains";
import { InjectedConnector } from "wagmi/connectors/injected";
import { publicProvider } from "wagmi/providers/public";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { newAuthProvider } from "../utils/newArcanaAuth";

import "../styles/globals.css";
import type { AppProps } from "next/app";

const { chains, provider, webSocketProvider } = configureChains(
  [mainnet, goerli, polygon, polygonAmoy],
  [publicProvider()],
  { targetQuorum: 1 }
);

const connectors = [
  new ArcanaConnector({
    chains,
    options: {
      auth: newAuthProvider(),
      login: {
        provider: "google",
      },
    },
  }),
  new InjectedConnector({
    chains,
    options: {
      name: "Browser Wallet",
      shimDisconnect: true,
    },
  }),
];

const wagmiEntity = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});
...

WagmiProvider/WagmiConfig, createClient/configClient

createClient, configClient, WagmiConfig were part of older Wagmi libraries.

For details, see Wagmi Getting Started Guide and Wagmi 1.x.y Migration Guide.

Now use WagmiConfig component in the _app.js file.

auth-examples/sample-auth-wagmi-2/src/main.tsx
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
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>,
)
auth-examples/sample-auth-wagmi-viem/app.js
//
// For apps using Wagmi versions v1.a.b and auth-wagmi v2.x.y
//
function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig config={wagmiEntity}>
      <Component {...pageProps} />
    </WagmiConfig>
  );
}
auth-examples/sample-auth-wagmi/pages/_app.tsx
//
// For apps using Wagmi versions v0.a.b and auth-wagmi v1.x.y
//
function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiEntity}>
      <Component {...pageProps} />
    </WagmiConfig>
  );
}

Here is an example of how Arcana wallet can be enabled in a Wagmi app. Note that in this example, the setLogin function of AuthProvider is used after creating the wallet connector when the user chooses the configured provider:

auth-wagmi-example/pages/index.tsx
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { useEffect, useState } from "react";
import { useAccount, useConnect } from "wagmi";

export default function Home() {
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect();
  const { connector, address, isConnected, status } = useAccount();

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return <></>;
  }
  if (isConnected) {
    return (
      <div className="main">
        <div className="connected-msg">
          Connected to {connector?.name} with address {address}
        </div>
      </div>
    );
  } else {
    return (
      <div className="main">
        <div>
          {!isConnected &&
            connectors.map((connector) => (
              <>
                <button
                  className="connect-btn"
                  key={connector.id}
                  onClick={() => connect({ connector })}
                >
                  Connect to {connector.name}
                  {isLoading &&
                    pendingConnector?.id === connector.id &&
                    " (connecting)"}
                </button>
                <div>
                  <button
                    className="connect-btn"
                    key={connector.id}
                    onClick={() => {
                      if (connector.id == "arcana") {
                        (connector as ArcanaConnector).setLogin({
                          provider: "google",
                        });
                      }
                      connect({ connector });
                    }}
                  >
                    Connect to {connector.name} (google)
                    {isLoading &&
                      pendingConnector?.id === connector.id &&
                      " (connecting)"}
                  </button>
                </div>
              </>
            ))}
        </div>
        {error && <div className="error-box">{error.message}</div>}
      </div>
    );
  }
}

That is all!

The Web3 Wagmi app can now onboard users using the plug-and-play login UI built-in the Arcana Auth SDK. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.

Example: Sample Wagmi App

See sample Wagmi app for details.

What's Next?

After integrating and onboarding users in the Web3 app developers can add code programmatically and enable Web3 wallet operations in the authenticated user's context.

See also


Last update: May 27, 2024 by shaloo, shaloo