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.
If you’d like to skip ahead or follow along you can download the full example (1 KB zipped) beforehand.
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@uauth/js is the library used for implementing Unstoppable Login on the frontend.
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>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",
});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);
}
};Add a logout function to app.js as follows:
window.logout = async () => {
await uauth.logout();
console.log("Logged out with Unstoppable");
};Unstoppable Login can be integrated with any EVM-compatible DApp (as well as Solana DApps). However, domains minted on testnets (e.g. Amoy or Sepolia) 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