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 newUAuth
object with the same client options and calling theuser()
method. -
There are also methods on
@uauth/web3-react
,@uauth/web3modal
,@uauth/bnc-onboard
, &@uauth/moralis
for getting aUAuth
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.
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.
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 | ![]() |
![]() |
Hover | ![]() |
![]() |
Pressed | ![]() |
![]() |
Congratulations!
You just configured the Login with Unstoppable UI.