Web3Auth Signer
In this guide, you will learn how to create a Web3Auth (opens in a new tab) signer that can be added as a Safe owner and used to initialize any of the kits from the Safe{Core} SDK.
Check out the Safe Signers demo app (opens in a new tab) on GitHub to follow along this guide with the completed code.
Prerequisites
- Node.js and npm (opens in a new tab).
- A Web3Auth account (opens in a new tab) and a Client ID.
Install dependencies
_10npm install @web3auth/modal @web3auth/base @web3auth/ethereum-provider
Steps
Imports
Here are the necessary imports for this guide.
_10import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from '@web3auth/base'_10import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'_10import { Web3Auth } from '@web3auth/modal'
In addition, you will need to import a web3 library of your choice to use in the "Get the provider and signer" section. In this guide, we are using viem.
Get the Client ID
Check Web3Auth documentation on how to create a new project in their dashboard (opens in a new tab) and get the client ID (opens in a new tab).
Once you have it, you need to initialize the WEB3AUTH_CLIENT_ID variable with it.
_10const WEB3AUTH_CLIENT_ID = // ...
Initialize Web3Auth
Web3Auth initialization is done by instantiating the Web3Auth class with a clientId, a privateKeyProvider and some other configuration parameters like web3AuthNetwork, depending on if you are using it in a development or production environment. The full list of parameters can be checked in the Instantiating Web3Auth guide (opens in a new tab) from Web3Auth.
To instantiate the privateKeyProvider you need to define the configuration of the selected chain for the signer with several properties like the ones listed below as an example for Sepolia testnet.
After initializing the web3auth instance, you need to call the initModal() method.
_22 const chainConfig = {_22 chainNamespace: CHAIN_NAMESPACES.EIP155,_22 chainId: '0xaa36a7',_22 rpcTarget: 'https://ethereum-sepolia-rpc.publicnode.com',_22 displayName: 'Ethereum Sepolia Testnet',_22 blockExplorerUrl: 'https://sepolia.etherscan.io',_22 ticker: 'ETH',_22 tickerName: 'Ethereum',_22 logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png'_22}_22_22const privateKeyProvider = new EthereumPrivateKeyProvider({_22 config: { chainConfig }_22})_22_22const web3auth = new Web3Auth({_22 clientId: WEB3AUTH_CLIENT_ID,_22 privateKeyProvider,_22 web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET_22})_22_22await web3auth.initModal()
Login
To login with an email address or social account you need to call the following method, that will open the popup and request the user to submit the login form.
_10const web3authProvider = await web3auth.connect()
Get the provider and signer
Once the user is logged in, you can get the provider and signerAddress, which is the externally-owned account of the user that was derived from its credentials.
You can instantiate the provider using viem and the following imports:
_10import { createWalletClient, custom } from 'viem'_10import { sepolia } from 'viem/chains'
_10const provider = createWalletClient({_10 chain: sepolia,_10 transport: custom(web3authProvider)_10})_10_10const signerAddress = await provider.getAddresses())[0]
With the provider and signerAddress you are ready to instantiate any of the kits from the Safe{Core} SDK and set up or use this signer as a Safe owner.
Logout
Finally, to logout the user, call the logout() method.
_10await web3auth.logout()
Recap and further reading
After following this guide, you are able to create a Safe signer using Web3Auth and get the provider and signerAddress required to initialize the kits from the Safe{Core} SDK.
Learn more about Web3Auth by checking the following resources: