Install the Web3Auth package in your project.

npm install --save @web3auth/modal @web3auth/base @web3auth/ethereum-provider

yarn add @web3auth/modal @web3auth/base @web3auth/ethereum-provider

pnpm add @web3auth/modal @web3auth/base @web3auth/ethereum-provider

While using Web3Auth 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.

Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

Web3Auth is blockchain and library agnostic. This example is focused towards EVM Blockchains, however using methods, you can configure the app for your chain and library of choice.

While initializing Web3Auth, you will need to set up a basic chain config for the chain of your choice. A simple integration for some of the popular blockchains will look like this:

import { CHAIN_NAMESPACES } from "@web3auth/base";

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  // Avoid using public rpcTarget in production.
  // Use services like Infura, Quicknode etc
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
};

import { CHAIN_NAMESPACES } from "@web3auth/base";

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0x89", // hex of 137, polygon mainnet
  rpcTarget: "https://rpc.ankr.com/polygon",
  // Avoid using public rpcTarget in production.
  // Use services like Infura, Quicknode etc
  displayName: "Polygon Mainnet",
  blockExplorerUrl: "https://polygonscan.com",
  ticker: "POL",
  tickerName: "Polygon Ecosystem Token",
  logo: "https://cryptologos.cc/logos/polygon-matic-logo.png",
};

import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const chainConfig: {
  chainNamespace: CHAIN_NAMESPACES.SOLANA;
  chainId: "0x1"; // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
  rpcTarget: "https://rpc.ankr.com/solana";
  displayName: "Solana Mainnet";
  blockExplorerUrl: "https://explorer.solana.com";
  ticker: "SOL";
  tickerName: "Solana";
  logo: "https://images.toruswallet.io/solana.svg";
};

const privateKeyProvider = new SolanaPrivateKeyProvider({
  config: { chainConfig },
});
const authAdapter = new AuthAdapter({ privateKeyProvider: privateKeyProvider });
web3auth.configureAdapter(authAdapter);

import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.OTHER,
  chainId: "0x4e454152",
  rpcTarget: "https://mainnet.aurora.dev",
  // Avoid using public rpcTarget in production.
  displayName: "Near",
  blockExplorerUrl: "https://aurorascan.dev",
  ticker: "NEAR",
  tickerName: "NEAR",
};

const privateKeyProvider = new CommonPrivateKeyProvider({
  config: { chainConfig },
});
const authAdapter = new AuthAdapter({ privateKeyProvider: privateKeyProvider });
web3auth.configureAdapter(authAdapter);

For using Web3Auth state within your application, you need to make an instance, which is further provided to the hooks/ composables SDK. The SDK further manages the Web3Auth state and exposes ready to use functions to call from anywhere in your application.

For instantiating Web3Auth PnP Modal SDK, you need to provide your Client ID, the Web3Auth Network of your project and the configuration of the chain you're looking to connect to. Additionally, you can configure extenal wallet adapters within the application as well.

To configure external wallets in your application, you can use the getDefaultExternalAdapters function provided by @web3auth/default-evm-adapter package. This function automatically:

• Discovers and returns all compatible wallets present in the user's browser through wallet discovery
• Includes WalletConnect compatible wallets in the list of available options

This makes it simple to enable multiple wallet connection options without having to manually configure each wallet adapter.

To enable the useWeb3Auth hook across your application, you need to configure and initialize the Web3AuthProvider at the root level. This involves using the configuration created in the previous step.

This setup must be done at the application's root level to maintain consistent state management throughout your application. This ensures that all components have access to the same Web3Auth instance and state.

Use the connect function in the Web3Auth Instance to display the modal. The modal will prompt the user to login with their wallet and handle the authentication for you.

After a successful user login, the connect function returns a provider that can be used to interact with the blockchain and sign transactions.

Once logged in, Web3Auth state exposes some information about your logged in user. This is fetched directly from the JWT token and Web3Auth doesn't store this info anywhere.

This information can help you identify your users and provide a more personalized experience.

Web3Auth is chain agnostic. This means that you can use it with any blockchain with the provider exposed by Web3Auth. For EVM and Solana Blockchains Web3Auth exposes special providers for native integrations.

This example demonstrates the connection for an EVM Chain with Web3Auth. You can choose the library of your choice and configure it according the steps given in the respective RPC Files.

Use the logout function of the Web3Auth Instance to log the user out. This will also delete the session information from the local storage of the browser.