Edit this page

Web3 Onboard Guide: Login with Unstoppable

BNC-onboard

This guide and the @uauth/web3-onboard package uses web3-onboard, the latest version of the Blocknative Onboard library. For integrations using bnc-onboard, see the BNC Onboard Guide.

This is the basic installation guide for the web3-onboard library and is best used for single page applications (SPAs). For more information about this library, please see the associated github repo.

info

For a completed example of a Web3 Onboard application, you can download this example project.

Step 1: Install the Libraries

Install with yarn or npm.

yarnnpm
Copy
Copied
yarn add @uauth/web3-onboard @uauth/js @web3-onboard/core
Copy
Copied
npm install --save @uauth/web3-onboard @uauth/js @web3-onboard/core

Step 2: Configure the web3-onboard Library

Copy
Copied
// onboard.ts

import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import UAuth from '@uauth/js'
import uauthBNCModule from '@uauth/web3-onboard'

const uauthOptions = {
  clientID: process.env.REACT_APP_CLIENT_ID!,
  redirectUri: process.env.REACT_APP_REDIRECT_URI!,
  fallbackIssuer: process.env.REACT_APP_FALLBACK_ISSUER!,
  scope: 'openid wallet',
}

const uauth = new UAuth(uauthOptions)

const uauthBNCOptions = {
  uauth: uauth,
  walletconnect: {
    infuraId: process.env.REACT_APP_INFURA_ID!,
  },
}

const uauthModule = uauthBNCModule(uauthBNCOptions)

export const onboard = Onboard({
    wallets: [injected, uauthModule],
    ...
  },
})
info

Because pop-ups are a more integration friendly approach, the @uauth/web3-onboard library now uses them by default. If you want the "old" redirect functionality, you need to set shouldLoginWithRedirect: true in your uauthBNCOptions and create a callback page.

Step 3: Test the Usage

Once configured, the web3-onboard library can be used normally.

Copy
Copied
import onboard from './onboard'

// On login button click...
const connectedWallets = await onboard.connectWallet()

Step 4: Configure the Login UI

Login with Unstoppable has UI requirements that must be configured to properly display the authenticated user's domain name after a successful login. Please follow the instructions in the Login UI Configuration Guide to complete this final step in the integration process.

Congratulations!

You just implemented Login with Unstoppable.