Unstoppable Login with Popup

In this integration guide, we will show how to add Unstoppable Login 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.

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

Step 2: Create an HTML File

Build out the index.html file as follows:

<html>
  <head>
    <title>Unstoppable Login</title>
  </head>
  <body>
    <button onclick="login()">Unstoppable Login</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: Unstoppable Login

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