Edit this page

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.

info

The @uauth/js code snippet below can be used for Login with Popup and Login without Popup integrations.

@uauth/jsbnc-onboardweb3-reactweb3modalmoralis
Copy
Copied
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
  })
Copy
Copied
const uauthBNCOnboard = new UAuthBNCOnboard()

uauthBNCOnboard.uauth.user().then().catch()
Copy
Copied
const uauthConnector = new UAuthConnector()

uauthConnector.uauth.user().then().catch()
Copy
Copied
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()
Copy
Copied
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.

UI Example for displaying authenticated user

UI Example for displaying authenticated user

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.

info

You must change the configuration in the Login Client Dashboard to add or remove scopes, such as humanity_check.

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 Small login button: default Large login button: default
Hover Small login button: hover Large login button: hover
Pressed small login button: pressed Large login button: pressed
Congratulations!

You just configured the Login with Unstoppable UI.