Web3-Onboard
Integrate social logins within Web3-Onboard through Particle Auth.
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:
-
Configure
particleModule
from@web3-onboard/particle-network
. After installing@web3-onboard/particle-network
and importingparticleModule
, you’ll need to define an instance using an object containing the following properties.projectId
,clientKey
, andappId
. 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 ifdisplayWalletEntry
istrue
.
- 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
.
- Alternatively, the above can be represented through
setAsDisplay
, a Boolean determining if the social login mechanism chosen withintype
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 ofparticleModule
may look like:
typescriptconst 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 }, })
-
Initialize Web3-Onboard through
Onboard
. With an instance ofparticleModule
prepared, you’re ready to configureOnboard
from@web3-onboard/core
.Onboard
takes the following parameters.wallets
, an array of initialized wallet modules. Your instance ofparticleModule
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.
typescriptconst 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' } ] })
-
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:typescriptconst 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.
Was this page helpful?