5 Minute Guide: Login with Unstoppable 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.

Tutorial: Integrating Login With Popup

info

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:

yarnnpm

Copy

Copied

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

Copy

Copied

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

info

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

Copy

Copied

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

Copy

Copied

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:

Copy

Copied

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:

Copy

Copied

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

Step 6: Login with Unstoppable

warning

Login with Unstoppable can be integrated with any EVM-compatible dApp. 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.

Copy

Copied

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

Next to Login UI Configuration