Andrew Mushel

Unstoppable Login: Web3-Onboard

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.

Web3 Onboard with Unstoppable Domains
Web3 Onboard with Unstoppable Domains

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: Login With Unstoppable

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)

Congratulations! You have implemented Login with Unstoppable with Blocknative Web3-Onboard.

Next to Display the User's Domain