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
  })

import UAuth from '@uauth/js;

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

new UAuth(uauthOptions).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()

The user() method will return an object containing the information requested by your client scopes. The following key-value pairs would be returned by a login session with the "openid wallet" scopes defined:

{
  "sub" : "domain.tld", // The domain used to login
  "wallet_address" : "0x . . . ", // The Ethereum wallet that owns the domain
  "wallet_type_hint" : "web3",
  "eip4361_message" : "identity.unstoppable domains wants you sign in with your Ethereum account: . . . ",
  "eip4361_signature" : "0x . . . ",
}

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 wallet 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.
• Modal 3. During login, the user will see the resolved address and the information being requested by the application (i.e. the scopes). The user must sign the transaction using their wallet address in order to share their information with the dApp.

Step 3: Create Login Buttons

Your integration will need Unstoppable Domains branded login buttons. See the table below for style guidelines.

State	Color	Button
Default	#0D67FE
Hover	#0546B7
Pressed	#478BFE
Loading	#0D67FE

Or you can download the full set of default Login With Unstoppable buttons.