Wagmi Connector for Web3Auth
Web3Auth is where passwordless auth meets non-custodial key infrastructure for Web3 apps and wallets. By aggregating OAuth (Google, Twitter, Discord) logins, different wallets and innovative Multi Party Computation (MPC) - Web3Auth provides a seamless login experience to every user on your application.
@web3auth/web3auth-wagmi-connector
is a connector for the popular wagmi library and Web3Auth Web SDKs.
You can utilise this connector package alongside the Web3Auth Web SDKs to initialize a wagmi client that will seemlessly manage the interaction of your DApp with Web3Auth.
Checkout the official Web3Auth Documentation and SDK Reference to get started!
...and a lot more
For using Web3Auth in the web, you have two choices of SDKs to get started with.
Web3Auth Plug and Play Modal SDK @web3auth/modal
: A simple and easy to use SDK that will give you a simple modular way of implementing Web3Auth directly within your application. You can use the pre-configured Web3Auth Modal UI and whitelabel it according to your needs.
Web3Auth Plug and Play No Modal SDK @web3auth/no-modal
: The core module implemeting all the Web3Auth features you need and giving you the flexibilty of using your own UI with the Web3Auth SDK working in the client side.
npm install --save @web3auth/modal @web3auth/ethereum-provider @web3auth/web3auth-wagmi-connector
Hop on to the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.
Here is an example of a wagmi client using both the Web3AuthConnector
and the default InjectedConnector
respectively.
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base";
import { WagmiProvider, createConfig, http, } from "wagmi";
import { sepolia, mainnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// Configure chains & providers with the Alchemy provider.
// Popular providers are Alchemy (alchemy.com), Infura (infura.io), Quicknode (quicknode.com) etc.
const { chains, publicClient, webSocketPublicClient } = configureChains([mainnet, arbitrum, polygon], [publicProvider()]);
// Instantiating Web3Auth
const name = "My App Name";
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x" + mainnet.id.toString(16),
rpcTarget: mainnet.rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
displayName: mainnet.name,
tickerName: mainnet.nativeCurrency?.name,
ticker: mainnet.nativeCurrency?.symbol,
blockExplorerUrl: mainnet.blockExplorers?.default.url[0] as string,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const web3AuthInstance = new Web3Auth({
clientId: "YOUR_WEB3AUTH_CLIENT_ID",
chainConfig,
privateKeyProvider,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const queryClient = new QueryClient()
// Set up client
const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
connectors: [
{web3AuthInstance},
],
});
Checkout the examples for your preferred blockchain and platform in our examples repository
Checkout the Web3Auth Demo to see how Web3Auth can be used in your application.
Further checkout the demos folder within this repository, which contains other hosted demos for different usecases.