Particle Auth within Web3-Onboard

Built by Blocknative, Web3-Onboard is a widely used framework-agnostic connection kit providing rich account interfaces, transaction data, and diverse wallet support. Particle Auth is natively supported within Web3-Onboard through @web3-onboard/particle-network, allowing social logins to be seamlessly included within an instance of Web3-Onboard, as is shown in the embedded demo below.

Leveraging @web3-onboard/particle-network

Web3-Onboard's native Particle Auth integration allows a derivative of ParticleNetwork from @particle-network/auth to be configured and defined within Onboard from @web3-onboard/core.

Therefore, implementation of Particle Auth is straightforward, following the same configuration and initialization process as @particle-network/auth. The following steps facilitate this process:

1. Configure particleModule from @web3-onboard/particle-network. After installing @web3-onboard/particle-network and importing particleModule, you'll need to define an instance using an object containing the following properties.

   • projectId, clientKey, and appId. These are required values representing a project and application made through the Particle dashboard.
   • Optionally, wallet can be defined, which contains:
     • displayWalletEntry, a Boolean determining whether or not the embedded wallet modal is shown upon login (true by default).
     • defaultWalletEntryPosition, a string defining the position in which the embedded wallet modal will initially appear if displayWalletEntry is true.
   • Optionally, preferredAuthType can be defined to shortcut your instance of Particle Auth to a specific social login mechanism. This parameter contains:
     • type, the specific social login type you'd like to be used. This should be one of the following:
       • 'email'
       • 'phone'
       • 'facebook'
       • 'google'
       • 'apple'
       • 'twitter'
       • 'discord'
       • 'github'
       • 'twitch'
       • 'microsoft'
       • 'linkedin'
       • 'jwt'
         • Alternatively, the above can be represented through AuthType.google, AuthType.email, etc., which can be imported from @particle-network/auth-core.
     • setAsDisplay, a Boolean determining if the social login mechanism chosen within type will be represented within the Web3-Onboard interface (for example, changing the wallet option to "Google" rather than the default value of "Particle Network").
       Below is an example of what a configured instance of particleModule may look like:
   TypeScript

   const particle = particleModule({
       projectId: process.env.REACT_APP_PROJECT_ID!,
       clientKey: process.env.REACT_APP_CLIENT_KEY!,
       appId: process.env.REACT_APP_APP_ID!,
       preferredAuthType: { type: 'google', setAsDisplay: true },
   })
   

2. Initialize Web3-Onboard through Onboard. With an instance of particleModule prepared, you're ready to configure Onboard from @web3-onboard/core. Onboard takes the following parameters.

   • wallets, an array of initialized wallet modules. Your instance of particleModule should go here. For a complete list of compatible wallet modules, head over to the Web3-Onboard documentation.
   • chains, an array of chain objects representing the blockchains you intend to use within your application. Each of these objects should contain:
     • id, (chain ID).
     • token (ticker).
     • label (name).
     • rpcUrl
       Thus, initializing Web3-Onboard (Onboard) may look like the following snippet.
   TypeScript

   const onboard = Onboard({
       wallets: [particle],
       chains: [
         {
           id: '0x1',
           token: 'ETH',
           label: 'Ethereum Mainnet',
           rpcUrl: 'https://eth.llamarpc.com'
         },
         {
           id: '0x2105',
           token: 'ETH',
           label: 'Base',
           rpcUrl: 'https://mainnet.base.org'
         }
       ]
   })
   

3. Initiate wallet connection and EIP-1193 provider extraction. Opening the Web3-Onboard connection modal can be done by simply calling {your Onboard instance}.connectWallet(). This will return an object containing an associated EIP-1193 provider, which can then be used for configuration within a library such as Ethers, Web3.js, viem, etc. An example of this has been included below:

   TypeScript

   const wallet = await onboard.connectWallet()
   
   const customProvider = new ethers.providers.Web3Provider(wallet[0].provider, "any");
   

📘

Additional resources available

Web3-Onboard has native documentation available for @web3-onboard/particle-network, which includes additional code snippets and implementation details.