Edit this page

BNC Onboard Guide: Login with Unstoppable

Web3-onboard

This guide and the @uauth/bnc-onboard package uses bnc-onboard, a deprecated version of the Blocknative Onboard library. For integrating with web3-onboard (onboard v2.0.0 and later), see the Web3 Onboard Guide.

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

BNC Onboard with Unstoppable Domains

BNC Onboard with Unstoppable Domains

BNC Onboard with Unstoppable Domains

BNC Onboard with Unstoppable Domains
info

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

Step 1: Install the Libraries

Install with yarn or npm.

yarnnpm
Copy
Copied
yarn add bnc-onboard @uauth/bnc-onboard @uauth/js @walletconnect/web3-provider
Copy
Copied
npm install --save bnc-onboard @uauth/bnc-onboard @uauth/js @walletconnect/web3-provider

Step 2: Configure the @uauth/bnc-onboard Library

Next, configure the @uauth/bnc-onboard library:

Copy
Copied
import UAuthBncOnboard from '@uauth/bnc-onboard'

const uauthOnboard = new UAuthBncOnboard({
  clientID: process.env.REACT_APP_CLIENT_ID!,
  redirectUri: process.env.REACT_APP_REDIRECT_URI!,
  postLogoutRedirectUri: process.env.REACT_APP_POST_LOGOUT_REDIRECT_URI!,\
  // Scope must include openid and wallet
  scope: 'openid wallet',
})

You can also construct a UAuth instance before hand and use that to create the library.

Copy
Copied
import UAuth from '@uauth/js'

const uauthOnboard = new UAuthBncOnboard({
  uauth: new UAuth({
    clientID: process.env.REACT_APP_CLIENT_ID!,
    redirectUri: process.env.REACT_APP_REDIRECT_URI!,
    postLogoutRedirectUri: process.env.REACT_APP_POST_LOGOUT_REDIRECT_URI!,
    scope: 'openid wallet',
  }),
})
info

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

Step 3: Configure the bnc-onboard Library

Next, the bnc-onboard library needs to be configured.

Copy
Copied
import initOnboard from 'bnc-onboard'

const onboard = initOnboard({
  dappId: process.env.REACT_APP_ONBOARD_KEY!,
  networkId: 1,
  walletSelect: {
    wallets: [
      {
        walletName: 'metamask',
        preferred: true,
      },
      {
        walletName: 'walletConnect',
        preferred: true,
        infuraKey: process.env.REACT_APP_INFURA_ID!,
      },
      // This creates a custom wallet module. See here: https://docs.blocknative.com/onboard#creating-custom-modules
      uauthOnboard.module({
        // Mark true if you want Unstoppable to be
        preferred: true,
        // Onboard uses a store system that makes it impossible to read the
        // state of other wallets. This means that we have to supply a seperate
        // configuration to the @walletconnect/web3-provider instance.
        // See here: https://docs.walletconnect.com/1.0/quick-start/dapps/web3-provider
        walletconnect: {
          infuraId: process.env.REACT_APP_INFURA_ID!,
        },
      }),
    ],
  },
})

Step 4: Login with Unstoppable

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

warning

Login with Unstoppable can be integrated with any EVM-compatible DApp (as well as Solana DApps). However, domains minted on testnets (e.g. Mumbai or Goerli) are not supported.

Copy
Copied
import onboard from './onboard'

const handleLogin = async () => {
  await onboard.walletSelect()
  await onboard.walletCheck()
}

const handeLogout = () => {
  uauthOnboard.getUAuth().then(uauth => uauth.logout())
  onboard.walletReset()
}