Web3Auth React Quick Start
Integrate secure and seamless Web3 authentication into your React app using Web3Auth.
Clone the React Quick Start Application
npx degit Web3Auth/web3auth-examples/quick-starts/react-quick-start w3a-quick-start
If you face any problem anytime, you can always find help in the Web3Auth Community.
Install Web3Auth
Install the Web3Auth package in your project.
Additionally, for blockchain calls, we're using
wagmiand its dependency,@tanstack/react-queryfor this example.
- npm
- Yarn
- pnpm
npm install --save @web3auth/modal wagmi @tanstack/react-query
yarn add @web3auth/modal wagmi @tanstack/react-query
pnpm add @web3auth/modal wagmi @tanstack/react-query
Fixing Bundler Issues
While using any web3 library in React, you may run into issues building. This issue occurs because
some core packages like eccrypto have certain dependencies which are not present within the
browser build environment.
To solve this, please have a look at our troubleshooting pages about Vite Issues
Get your Client ID from the Web3Auth Dashboard
Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.
Go to the Developer DashboardConfigure Web3Auth
Create a basic config for Web3Auth and pass the clientId & web3AuthNetwork from your Web3Auth
Dashboard Project Settings.
This is where you can also configure any major settings of your integration as well. Visit our configuration section of the sdk reference to learn more about the different options available.
Setup Web3Auth Provider
To enable the hooks across your application, you need to wrap your application with the
Web3AuthProvider component. This involves using the configuration created in the previous step.
Setup Wagmi Provider
Since we're using wagmi for this example, we need to setup the WagmiProvider component. Please
use the WagmiProvider component from @web3auth/modal/react/wagmi to wrap your application.
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
Apart from that, the standard wagmi setup is being used. You do not need to create any wagmi config, since the Web3Auth config is being used directly. Refer to the wagmi docs for more information.
Logging in your User
Use the useWeb3AuthConnect hook to get access to the login functionality. The modal will prompt
the user to login with their wallet and handle the authentication for you.
Making Blockchain Calls
Since Wagmi is configured in this application, you can directly use the wagmi hooks to make
blockchain calls. We have demonstrated some commonly used hooks like useBalance, useAccount,
useSignMessage, useSendTransaction and useSwitchChain.
You can refer to the wagmi docs for more information on the hooks.
Web3Auth supports all blockchains. Have a look at our Connect Blockchain section of the documentation and choose your blockchain to get started.
Log the user out
Use the useWeb3AuthDisconnect hook to log the user out. This will also delete the session
information from the local storage of the browser.
There are multiple other hooks available in the Web3Auth React SDK. Visit our hooks section of the sdk reference to learn more about the different hooks available.
- web3authContext.tsx
- main.tsx
- App.tsx
- package.json
- index.html
- getBalance.tsx
- sendTransaction.tsx
- switchNetwork.tsx
import { WEB3AUTH_NETWORK } from "@web3auth/modal";
import { type Web3AuthContextConfig } from "@web3auth/modal/react";
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
}
};
export default web3AuthContextConfig;