Integrate Rainbow App

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 integrate Web3 RainbowKit apps 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

Integrating Web3 RainbowKit apps with the Arcana Auth SDK is simple!

Follow these three steps:

Step 1: Install Arcana Auth SDK packages

npm

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

yarn

yarn add @arcana/auth-wagmi @arcana/auth

Step 2: Configure RainbowKit Connector

Import auth package and create AuthProvider by specifying the unique Client ID value assigned to the app after registering and configuring it using the Arcana Developer Dashboard.

// Set up Arcana Auth 

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

let auth = null;

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

Then import auth-wagmi package and create a new 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.

//This example uses Arcana Rainbow connector and MetaMask

import { connectorsForWallets } from "@rainbow-me/rainbowkit";
import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
import { getAuthProvider } from "./getArcanaAuth";
import { ArcanaConnector } from "@arcana/auth-wagmi";

import { sequenceLogo } from "./logo";

export const ArcanaRainbowConnector = ({ chains }) => {
  return {
    id: "arcana-auth",
    name: "Login with Email/Social",
    iconUrl: sequenceLogo,
    iconBackground: "#101010",
    createConnector: () => {
      const connector = new ArcanaConnector({
        chains,
        options: {
          auth: getAuthProvider()
        }
      });
      return {
        connector
      };
    }
  };
};

const connectors = (chains) =>
  connectorsForWallets([
    {
      groupName: "Recommended",
      wallets: [ArcanaRainbowConnector({ chains }), metaMaskWallet({ chains })]
    }
  ]);

export { connectors };

Use the connectors configured with ArcanaRainbowConnector in the App.js file and set up WagmiConfig:

// 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,
});
...

// 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,
});
...

Step 3: RainbowKit Context Provider

Finally, use the WagmiConfig and RainbowKitProvider components in the app.

// 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>
  );
}

That is all!

The Web3 app using RainbowKit is successfully integrated with the Arcana Auth SDK. Refer to the Auth Examples for working integration examples.

What's Next?

After integrating with a Web3 RainbowKit app with the Arcana Auth SDK, the developers can add code to onboard users. In the example above, plug-and-play login UI is specified in the way AuthProvider is initialized. There are two ways to onboard users:

• Use built-in plug-and-play login UI with a single function call that displays all the configured authentication providers
• Use custom login UI to onboard users and wire it to the Arcana Auth SDK functions for calling the configured authentication providers.

Arcana wallet can also be used in applications that integrate with Wagmi. For details, see how to enable Arcana wallet in apps using Wagmi.

See also

• Sample RainbowKit app
• Arcana Auth SDK Errors
• Arcana Auth SDK Usage Guide
• Arcana Auth SDK Reference Guide