NPM
npm i @web3-onboard/core @web3-onboard/uauth
Yarn
yarn add @web3-onboard/core @web3-onboard/uauth
Follow the Login Client Congifuration Docs on the Unstoppable Domains website to get setup with your clientID and redirectUri.
Note: The Redirection URI value(s) in the client configuration MUST exactly match the redirect_uri parameter value used in UauthInitOptions
. More specifics can be found in the Rules for Redirect URIs Docs.
type UauthInitOptions = {
clientID: string // required and will throw an error if not included: links dapp to Unstoppable Domains for customization
redirectUri: string // required and will throw an error if not included: used for pop-up and callback redirection
scope?: string // default = 'openid wallet'
shouldLoginWithRedirect?: boolean // if true, redirects to your callback page
bridge?: string // default = 'https://bridge.walletconnect.org'
qrcodeModalOptions?: {
mobileLinks: string[] // set the order and list of mobile linking wallets
}
connectFirstChainId?: boolean // if true, connects to the first network chain provided
}
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
})
// can also initialize with basic options...
// const uauth = uauthModule({
// clientID: "YOUR_CLIENT_ID",
// redirectUri: "YOUR_REDIRECT_URI"
// })
const onboard = Onboard({
// ... other Onboard options
wallets: [
uauth
//... other wallets
]
})
const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
When Unstoppable Domains is connected the UAuth user instance is exposed.
This can be used to get information related to the user scopes requested through the UauthInitOptions
.
const wallets$ = onboard.state.select('wallets').pipe(share())
wallets$.subscribe(wallet => {
const unstoppableUser = wallet.find(
provider => provider.label === 'Unstoppable'
)
if (unstoppableUser) console.log(unstoppableUser.instance.user)
})