Andrew Mushel

Unstoppable Login with Popup

In this integration guide, we will show how to add Login with Unstoppable with the pop-up feature to an empty HTML page. There will be no complicated install requirements – to complete this integration, you just need to be a JavaScript developer with a few minutes of time.

If you’d like to skip ahead or follow along you can download the full example (1 KB zipped) beforehand.

Step 1: Project Setup

Before we get started, you’ll need to install Node and Yarn or npm and create a directory for your project. Then, install the following packages into your app using one of the following scripts:

mkdir project && cd project
yarn init --yes
yarn add --dev parcel
yarn add @uauth/js

mkdir project && cd project
npm init --yes
npm install --save-dev parcel
npm install --save @uauth/js

@uauth/js is the library used for implementing Login with Unstoppable on the frontend.

Step 2: Create an HTML File

Build out the index.html file as follows:

<html>
  <head>
    <title>Login with Unstoppable</title>
  </head>
  <body>
    <button onclick="login()">Login with Unstoppable</button>
    <button onclick="logout()">Logout</button>
    <script type="module" src="app.js"></script>
  </body>
</html>

Step 3: Instantiate the Library

Now, configure the app.js as follows:

import UAuth from '@uauth/js'

const uauth = new UAuth({
  clientID: 'uauth_example_spa_id',
  redirectUri: 'http://localhost:5000/callback',
})

Step 4: Implement the Login Handler

Add a login function to app.js as follows:

window.login = async () => {
  try {
    const authorization = await uauth.loginWithPopup()
 
    console.log(authorization)
  } catch (error) {
    console.error(error)
  }
}

Step 5: Implement the Logout Handler Add a logout function to app.js as follows:

window.logout = async () => {
  await uauth.logout()
  console.log('Logged out with Unstoppable')
}

Step 6: Login with Unstoppable

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.

The following command will run the app. Keep in mind that the credentials will only work if you are on the correct port.

yarn parcel --open --port 5000 index.html

Next to Display the User's Domain