Quick Start: RainbowKit Apps
Estimated time to read: 3 minutes
Web3 apps using 'RainbowKit' can easily onboard users via social login by integrating with the Arcana Auth Wagmi SDK!
Prerequisites
- RainbowKit v1.3.0 or higher
1. Register & Configure
-
App must be registered via the Arcana Developer Dashboard: https://dashboard.arcana.network
-
Optionally, configure social login providers and gasless transactions for the app via the dashboard.
2. Install SDKs
For 'RainbowKit' 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
Import AuthProvider
from the auth
package.
import { AuthProvider } from '@arcana/auth'
Create a new AuthProvider
instance. Specify the unique Client ID obtained during the app registration.
// 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;
};
You can optionally customize the following settings in the AuthProvider
constructor:
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.
Next, import the ArcanaConnector
from the auth-wagmi
package. Create a new ArcanaConnector
and specify the AuthProvider
instantiated earlier.
//
// For apps using Wagmi versions v2.a.b and auth-wagmi v3.x.y
//
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
}
}
...
//
// For apps using Wagmi versions v1.x.y and auth-wagmi v2.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(),
},
});
};
const { chains, publicClient } = configureChains(
[polygon, polygonAmoy],
[publicProvider()]
);
export const wagmiEntity = createConfig({
autoConnect: true,
connectors: [connector(chains)],
publicClient,
});
...
//
// For apps using Wagmi versions v0.x.y and auth-wagmi v1.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(),
},
}),
new InjectedConnector({
chains,
options: {
name: "Browser Wallet",
shimDisconnect: true,
},
}),
];
const wagmiEntity = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
...
createClient
vs. creatConfig
usage
See Wagmi Getting Started Guide and Wagmi 1.x.y Migration Guide.
Onboard Users
Use ArcanaConnector
to set up Wagmi and onboard users via the built-in plug-and-play login UI (default). Set up Wagmi connector configuration through createClient
or createConfig
depending upon whether you are using the Wagmi version before v2.0 or 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 };
// 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,
});
...
Use WagmiConfig
and RainbowKitProvider
components to bring up the built-in login UI and enable social login through the configured providers.
// 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>
);
}
// 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>
);
}
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 'RainbowKit' 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 'RainbowKit' 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.
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.
See Also
- 'RainbowKit' integration example:
sample-auth-rainbowkit`,`sample-auth-rainbow-viem
submodule in Auth Examples - Arcana Developer Dashboard User Guide
- Configuring Arcana wallet visibility
- Developer's Guide for Arcana wallet
- Handling Arcana Auth SDK error messages
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide
- Arcana Auth Wagmi SDK Reference Guide
- Arcana Auth Flutter SDK Reference Guide
- Enabling Gasless Operations in an App
- Arcana Gasless (Standalone) SDK Quick Start Guide
- Arcana Gasless (Standalone) SDK Usage Guide
- Gasless Error Messages
Arcana Auth SDK Quick Links
Arcana Auth Wagmi SDK Quick Links