Edit this page

Getting Started with Login

Login with Unstoppable is a versatile feature with several integration pathways available for developers. This guide will step you through your first login integration with one of several supported libraries.

warning

Login with Unstoppable can be integrated with any EVM-compatible DApp (as well as Solana DApps). However, domains minted on testnets (e.g. Mumbai or Goerli) are not supported.

Step 1: Get Your Client Credentials

  • Go to the Client Management Dashboard .
  • Click the Connect Wallet and sign the transaction.
  • Click the Create Client button to add a new client.

The dashboard will generate a unique client ID and open the configuration page for your new client. The Client Metadata is automatically populated with the clientID and default values for the redirectURI and scope. See Login Client Configuration for more details about the settings on this page.

Connect a wallet and create a new client

Once you've created your client, you will need the Client Metadata to configure your UAuth application. This can be copied directly from the Login page of your Client Configuration.

Copy
Copied
{
    clientID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    redirectUri: "http://localhost",
    scope: "openid wallet",
}
Example client metadata
info

The scope property of your client metadata will default to "openid wallet", which is the minimum scope required for login. You can request additional information from users by adding additional scopes to this string. For information on the other scopes Login supports, see Scopes for Login.

Step 2: Choose Your Integration Path

There are several ways to integrate with Login with Unstoppable, which are listed in the table below.

Because pop-ups are a more integration friendly approach, every integration path except for Login without Pop-up and Node.js Server uses them by default. You can use redirects instead with the login() method of @uauth/js or the shouldLoginWithRedirect configuration option for other @uauth/* libraries.

For DApps built with web3 libraries like web3-react, web3-modal, web3-onboard, and moralis, UAuth provides packages that help you wrap a new UAuth instance in an interface that each library supports. After configuring these packages, you can continue using the web3 library normally.

Integration Guide Example Project Web3 Provider Package Front-end UI
Login with Pop-up spa @uauth/js JavaScript
Login without Pop-up - @uauth/js React
Web3 React web3-react @uauth/web3-react web3-react
Web3 Modal web3modal @uauth/web3modal web3-modal
Web3 Onboard web3-onboard @uauth/web3-onboard web3-onboard
Moralis moralis @uauth/moralis moralis
Node.js Server server @uauth/node None
Auth0 UAuth + Auth0 auth0 auth0
info

See the UAuth Example App for a live demo of the login flow.

Step 3: Display the User's Domain

Once a user has successfully authenticated, the application should display the user’s domain (and not their wallet address) in the application’s UI to confirm the authorization was successful.

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

Authorizations are stored inside localStorage, so any identically configured UAuth instance has access to the same users. Any integration using @uauth/js or a dependent middleware package can access the authorized user information by instantiating a new UAuth object with the same client options and calling the user() method.

@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 a UserInfo object containing the information requested by your client scopes. The following key-value pairs would be returned by a login session with the minimum "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 . . . ",
}

Step 4: Promote Your Application

Once your login integration is live, you can promote your application by submitting it to the official UD app integrations database.

Asking For Help

If you are experiencing difficulties using our services, please know that we are here to help. You can join our Discord Community for real-time support from UD and the community, where you can receive assistance with integrating your app