Login UI Configuration Guide

Step 1: Access User Information

Authorizations are stored inside localStorage, so any identically configured UAuth instance has access to the same users.

• If you integrate with the @uauth/web3-react or any other solution that uses @uauth/js under the hood ( @uauth/bnc-onboard , @uauth/web3modal , @uauth/moralis ), then you can access the user information by instantiating a new UAuth object with the same client options and calling the user() method.
• There are also methods on @uauth/web3-react , @uauth/web3modal , @uauth/bnc-onboard , & @uauth/moralis for getting a UAuth instance on the front-end.

You can use the access methods below to obtain the user information. This information will enable you to display the domain instead of the wallet address and serves as another confirmation for the user that they have logged in successfully.

import UAuth from '@uauth/js'

const uauth = new UAuth({
  // ... options
})

uauth.user()
  .then((user) => {
    // user exists
    console.log("User information:", user)
  })
  .catch(() => {
    // user does not exist
  })

const uauthBNCOnboard = new UAuthBNCOnboard()

uauthBNCOnboard.uauth.user().then().catch()

const uauthConnector = new UAuthConnector()

uauthConnector.uauth.user().then().catch()

import UAuth from '@uauth/js'

const uauthOptions = {
  clientID: "",
  redirectUri: ""
}

const web3ModalOptions = {
  'custom-uauth': {
    ...uauthOptions}
}

const web3Modal = new Web3Modal(web3ModalOptions)

new UAuth(uauthOptions).user().then().catch()

const uauthMoralisConnector = new UAuthMoralisConnector()

uauthMoralisConnector.uauth.user().then().catch()

Once a user has successfully authenticated, the application should display the user’s domain name in the application’s UI to confirm the authorization was successful. In other words, the UI must show the user’s domain instead of the address.

Step 2: Verify the Login Flow and Scopes

Before launching your application, you should verify the login flow that users will experience and ensure that proper scopes are showing or enabled for users. In the last modal screen shown below, only the minimum scopes are being requested by the application: openID, wallet, and email.

The modals are further described below:

• Modal 1. User clicks on Login with Unstoppable Button.
• Modal 2. A modal is displayed which allows the user to begin the authorization process by entering their Unstoppable domain address.
• Modal 3. During login, the user will see the resolved address and the information being requested by the application (i.e. the scopes). User must sign the transaction using their wallet address in order to share their information with the dApp.

Step 3: Download UD Buttons (Node JS Only)

For Node.js integrations, the UI or modals being built will require official UD buttons. The table below provides Login with Unstoppable button status and states, which can be downloaded for use in custom Node.js integrations.

Status	Small	Large
Default
Hover
Pressed