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.

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>
    <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 more code to the app.js file as follows:

Copy

Copied

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

Step 5: Login with Unstoppable

info

You need a domain in order to use the Login with Unstoppable feature. If you don’t have a domain, you can mint a test domain with the self-serve faucet. Or, you can purchase a domain for $5 and mint it to Polygon for free.

warning

Important: For Login with Unstoppable integrations, users must use Polygon Mainnet or Ethereum Mainnet as the network for the domain. Domains minted on Goerli Testnet will not work with the Login feature.

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

Step 6: Configure the Login UI

Login with Unstoppable has UI requirements that must be configured to properly display the authenticated user's domain name after a successful login. Please follow the instructions in the Login UI Configuration Guide to complete this final step in the integration process.

Congratulations!

You just implemented Login with Unstoppable.