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-pnp-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
wagmi
and its dependency,@tanstack/react-query
for 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