Skip to content

Integrate Wagmi App

With Wagmi, Web3 developers can allow app users to easily switch between multiple wallets within a single application. The Arcana Auth SDK offers a custom Wagmi connector that enables the Arcana wallet in Web3 apps using Wagmi.

In this guide, you will learn how to integrate the Arcana Auth SDK with Web3 apps that use Wagmi wallet connectors.

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.

    • Discord
    • GitHub
    • Google
    • Twitch
    • Twitter

    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 Wagmi 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: Create AuthProvider and ArcanaConnector

Import auth package and create AuthProvider. Then import auth-wagmi package and create an ArcanaConnector.

To instantiate the AuthProvider, specify the unique Client ID value assigned to the app after registering and configuring through the Arcana Developer Dashboard. Specify the AuthProvider while instantiating the ArcanaConnector as shown in the sample code below.

auth-wagmi-example/utils/wagmi_client.ts
import { AuthProvider } from "@arcana/auth";
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { polygon, polygonMumbai } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";

const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
  return new ArcanaConnector({
    chains,
    options: {
      auth: auth,
    },
  });
};
...

Step 3: Set up WagmiConfig

Next, provide the newly instantiated and configured ArcanaConnector to the createClient Wagmi function.

auth-wagmi-example/utils/wagmi_client.ts
import { ArcanaConnector } from "@arcana/auth-wagmi";
import { AuthProvider } from "@arcana/auth";
import { polygon, polygonMumbai } from "wagmi/chains";
import { configureChains, createClient, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";

const auth = new AuthProvider(`${arcana_client_id}`) // Singleton
export const connector = (chains: Chain[]) => {
  return new ArcanaConnector({
    chains,
    options: {
    auth
    },
  });
};

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

export const wagmiClient = createClient({
  autoConnect: true,
  connectors: [connector(chains)],
  provider,
});

Wagmi createClient

For more details on the createClient function of the Wagmi package, see Wagmi Getting Started Guide.

Now specify the wagmiClient in WagmiConfig component in the _app.js file.

auth-wagmi-example/pages/_app.js
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { wagmiClient } from "../utils/wagmi_client";
import { WagmiConfig } from "wagmi";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <WagmiConfig client={wagmiClient}>
        <Component {...pageProps} />
      </WagmiConfig>
    </>
  );
}

That is all!

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

Example: Sample Wagmi App

See sample Wagmi app for details.

What's Next?

After integrating with a Web3 Wagmi app with the Arcana Auth SDK, the developers can add code to onboard users. 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.

See for details.

Arcana wallet can also be used in applications that integrate with Rainbow Kit. See how to enable Arcana wallet using Rainbow Kit.

See also


Last update: May 25, 2023 by shaloo, shalz