Developer Integration
This page reviews the Login with Unstoppable feature and integration, which allows applications to authenticate users and collect user information. This feature works for Polygon and Ethereum domains.
The UAuth Demo Application is deployed for developer use along with a single page sample application to model the flow.
Integrating Login with Unstoppable is a four step process. Applications can use Unstoppable Domain’s UAuth Library to simplify the integration.

Step 1: Register Your Application

  • Go to the Unstoppable Domains Application Submission page.
  • Complete all fields: App Name, Description (at least 50 characters), App Logo, Website link, and any applicable checkboxes (e.g., use cases, platforms, extensions).
  • Submit the application for review.
Application Submission Page

Step 2: Configure the Application

  • Visit the App Dashboard once your application has been created. (To see the status of the application, check your email or refresh the Application Dashboard.)
You can begin App development right away while waiting on application approval. The application approval only relates to your application appearing on the UD global application screen and is not a blocker to integration.
  • Click the Edit button next to the application you would like to configure for Login with Unstoppable.
View Application Status and Edit an Application
  • Scroll down and click the Get New Client Credentials button.
Get New Client Credentials button located at bottom of Application Page (once approved)
  • Enter the redirect URIs on the Client Credentials Screen. Save the client id and secret key for later reference (Step 4 below).
Enter each additional redirect URI on a separate line, if applicable. You will be able to edit the redirect URIs on this screen but not the client id and secret key.
Client Credentials Configuration Page
The redirect URls entered on this page must be an exact match to the redirect URIs used in the UAuth Library modification below (See Step 4).
  • Save the changes by clicking the Get New Client Credentials button again.

Step 3: Add the Login with Unstoppable Button to Your Application's UI

Login with Unstoppable button status and states can be found in the table below:
Status
Small
Large
Default
Hover
Pressed

Example: User View of Login with Unstoppable Feature

User View of Login with Unstoppable for Connecting a Wallet

Example: User Enters Unstoppable Domain Address to Login to Application

When a user clicks the Login with Unstoppable button, a modal is displayed which will allow that user to begin the authorization process.
User Enters Unstoppable Domain Address to Login to dApp

Step 4: Configure the Application to Receive the Authorization Tokens and MetaData

  • Modify the Uauth class as follows:
    • Add all the elements you will be requesting from the user.
    • Link the ​​url that the auth server will redirect back to after every authorization attempt.
    • Link the url that the auth server will redirect back to after logging out.
  • Modify the Login function that will be triggered from the “Login with Unstoppable” button from the application UI. This function will also handle any login errors.
  • Modify the Callback function to exchange the authorization code for access and id tokens and to handle any failures from exchanging the authorization code for the token.
  • Modify the Logout function to handle logging out and redirection to the application home page.
Uauth class
Login
Callback
Logout
1
const uauth = new UAuth({
2
// These can be copied from the bottom of your app's configuration page on unstoppabledomains.com.
3
clientID: process.env.REACT_APP_CLIENT_ID,
4
clientSecret: process.env.REACT_APP_CLIENT_SECRET,
5
6
// These are the scopes your app is requesting from the ud server.
7
scope: 'openid email wallet example',
8
9
// This is the url that the auth server will redirect back to after every authorization attempt.
10
redirectUri: 'http://localhost:5000/callback',
11
12
// This is the url that the auth server will redirect back to after logging out.
13
postLogoutRedirectUri: 'http://localhost:5000',
14
})
Copied!
1
const Login: React.FC<RouteProps> = props => {
2
const [errorMessage, setErrorMessage] = useState<string | null>(
3
new URLSearchParams(props.location?.search || '').get('error'),
4
)
5
6
const handleLoginButtonClick: React.MouseEventHandler<HTMLButtonElement> =
7
e => {
8
setErrorMessage(null)
9
uauth.login().catch(error => {
10
console.error('login error:', error)
11
setErrorMessage('User failed to login.')
12
})
13
}
14
15
return (
16
<>
17
{errorMessage && <div>{errorMessage}</div>}
18
<button onClick={handleLoginButtonClick}>Login with Unstoppable</button>
19
</>
20
)
21
}
Copied!
1
const Callback: React.FC<RouteProps> = props => {
2
const [redirectTo, setRedirectTo] = useState<string>()
3
4
useEffect(() => {
5
// Try to exchange authorization code for access and id tokens.
6
uauth
7
.loginCallback()
8
// Successfully logged and cached user in `window.localStorage`
9
.then(response => {
10
console.log('loginCallback ->', response)
11
setRedirectTo('/profile')
12
})
13
// Failed to exchange authorization code for token.
14
.catch(error => {
15
console.error('callback error:', error)
16
setRedirectTo('/login?error=' + error.message)
17
})
18
}, [])
19
20
if (redirectTo) {
21
return <Redirect to={redirectTo} />
22
}
23
24
return <>Loading...</>
25
}
26
27
const Profile: React.FC<RouteProps> = () => {
28
const [user, setUser] = useState<any>()
29
const [loading, setLoading] = useState(false)
30
const [redirectTo, setRedirectTo] = useState<string>()
31
32
useEffect(() => {
33
uauth
34
.user()
35
.then(setUser)
36
.catch(error => {
37
console.error('profile error:', error)
38
setRedirectTo('/login?error=' + error.message)
39
})
40
}, [])
Copied!
1
const handleLogoutButtonClick: React.MouseEventHandler<HTMLButtonElement> =
2
e => {
3
console.log('logging out!')
4
setLoading(true)
5
uauth
6
.logout({
7
beforeRedirect(options: any, url: string) {
8
// alert(url)
9
},
10
})
11
.catch(error => {
12
console.error('profile error:', error)
13
setLoading(false)
14
})
15
}
16
17
if (redirectTo) {
18
return <Redirect to={redirectTo} />
19
}
20
21
if (!user || loading) {
22
return <>Loading...</>
23
}
24
25
return (
26
<>
27
<pre>{JSON.stringify(user, null, 2)}</pre>
28
<button onClick={handleLogoutButtonClick}>Logout</button>
29
</>
30
)
31
}
Copied!
During login, the user will see the resolved address and the information being requested by the application.
Consent screen for Login with Unstoppable

UI Requirements

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.

Example 1

UI Example for displaying authenticated user

Example 2

Second UI Example for displaying authenticated user

Resources

For assistance with this feature, please join our Discord channel for real-time support from UD and the community.
Last modified 4d ago