Wagmi App: Plug-and-Play Auth
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 onboard users in Web3 apps that use Wagmi wallet connectors. It shows how the developers can integrate apps with the Arcana Auth SDKs and then use the built-in plug-and-play login UI out of the box to onboard users easily.
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
- Twitch
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
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 to use the plug-and-play login UI for onboarding users.
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.
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.
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>
</>
);
}
Here is an example of how you can layout the wagmiClient
with the Arcana wallet configured as the wallet option on the app page. Note that in this example, the setLogin
function is used after creating the wallet connector when the user chooses the configured provider:
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
- Arcana Auth SDK Errors
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide
auth-wagmi
README