Skip to content

Plug-and-Play Login UI

RainbowKit works with Wagmi wallet connector that allows Web3 app users to easily switch between multiple wallets within a single application. RainbowKit apps can use the custom connector offered by the Arcana Auth SDK to enable the Arcana wallet in the app's context.

In this guide, you will learn how to onboard users via the built-in plug-and-play login UI in RainbowKit 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 RainbowKit 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

<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>
<script src="https://cdn.jsdelivr.net/npm/@arcana/auth-wagmi"></script>
<script src="https://unpkg.com/@arcana/auth-wagmi"></script>

Step 2: Configure RainbowKit Connector

Import auth package and create AuthProvider by specifying the unique Client ID value assigned to the app after registering it using the Arcana Developer Dashboard. Then import auth-wagmi package and create an ArcanaConnector.

Set up ArcanaRainbowConnector using the newly created ArcanaConnector. Initialize the connectorsForWallets in the RainbowKit with the ArcanaRainbowConnector and export the connectors to be used later in the _app.js file:

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.

Use the connectors configured with ArcanaRainbowConnector in the _app.js file for creating the Wagmi client using the createClient or createConfig function depending upon the version of Wagmi used in the app:

pages/App.js
// Note:  
// This sample code is for 
// wagmi versions <1.x.x and auth-wagmi <2.0.0

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import { configureChains, createClient, WagmiConfig } from "wagmi";
import { polygon, mainnet } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "../utils/wallet";

const { chains, provider } = configureChains(
  [mainnet, polygon],
  [publicProvider()]
);

const wagmiEntity = createClient({
  connectors: connectors(chains),
  autoConnect: true,
  provider,
});
...
pages/App.js
// Note:  
// This sample code is for 
// wagmi versions 1.x.x and auth-wagmi 2.0.0

import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { polygon, mainnet, optimism, arbitrum } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { connectors } from "./wallet";
import { useAccount, useConnect } from 'wagmi'
import { Connect } from "./Connect";

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [publicProvider()]
);

const wagmiEntity = createConfig({
  connectors: connectors(chains),
  autoConnect: true,
  publicClient,
});
...

Wagmi createClient and configClient

For more details on the createClient and configClient functions of the Wagmi package, see Wagmi Getting Started Guide and Wagmi 1.x.y Migration Guide. Also, refer to RainbowKit documentation.

Step 3: RainbowKit Context Provider

Finally, pass the wagmiClient created earlier as a parameter to the WagmiConfig component in the App.js file.

pages/App.js
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiEntity}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}
pages/App.js
// Pass wagmi client configured with ArcanaRainbowKitConnector to the RainbowKit Context Provider
export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig config={wagmiEntity}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

That is all!

The Web3 app using RainbowKit is successfully integrated with the Arcana Auth SDK.

Example: Sample RainbowKit App

See sample RainbowKit 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: April 11, 2024 by shaloo, shaloo