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.
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
.
yarn add bnc-onboard @uauth/bnc-onboard @uauth/js @walletconnect/web3-provider
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:
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.
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.
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.
import onboard from './onboard'
const handleLogin = async () => {
await onboard.walletSelect()
await onboard.walletCheck()
}
const handeLogout = () => {
uauthOnboard.getUAuth().then(uauth => uauth.logout())
onboard.walletReset()
}