Web3-Onboard Guide: Unstoppable Login

This is the basic integration guide for the Blocknative Web3-Onboard UAuth module and is best used for single page applications (SPAs). For more information about this module, please see the source code on github.

Tutorial

Step 1: Install the Blocknative Packages

yarn add @web3-onboard/core @web3-onboard/uauth

npm i @web3-onboard/core @web3-onboard/uauth

Step 2: Configure UAuth

Configure the Blocknative UAuth module using the clientID and redirectUri from your Login Client Configuration. The remaining fields of uauthInitOptions will be set to default values if left undefined.

See Scopes for Login for more on the information you can request from users using the scope field.

import Onboard from '@web3-onboard/core'
import uauthModule from '@web3-onboard/uauth'

// initialize the module with options
const uauth = uauthModule({
  clientID: 'YOUR_CLIENT_ID',
  redirectUri: 'YOUR_REDIRECT_URI',
  scope?: 'YOUR_SCOPES',
  shouldLoginWithRedirect?: false
  bridge?: 'YOUR_CUSTOM_BRIDGE_SERVER',
  qrcodeModalOptions?: {
    mobileLinks: ['rainbow', 'metamask', 'argent', 'trust', 'imtoken', 'pillar']
  },
  connectFirstChainId?: true
})

Step 3: Unstoppable Login

Once configured, the UAuth module will function like any other wallet module in Web3-Onboard.

const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    uauth,
    //... other wallets
  ],
});

const connectedWallets = await onboard.connectWallet();
console.log(connectedWallets);