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/jsweb3-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
import UAuth from '@uauth/js;

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

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

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:

Copy
Copied
{
  "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.

Showing an authenticated user's domain
Showing an authenticated user's domain

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.

StateColorButton
Default#0D67FELarge login button: default
Hover#0546B7Large login button: hover
Pressed#478BFELarge login button: pressed
Loading#0D67FELarge login button: loading

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

Congratulations!

You just configured the Login with Unstoppable UI.