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.

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.

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.

{
    clientID: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    redirectUri: "http://localhost",
    scope: "openid wallet",
}

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.

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.

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.

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 wallets$ = onboard.state.select('wallets').pipe(share())

wallets$.subscribe(wallet => {
  const unstoppableUser = wallet.find(
    provider => provider.label === 'Unstoppable'
  )
  
  if (unstoppableUser) console.log(unstoppableUser.instance.user)
})

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 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:

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