Javascript

This tutorial demonstrates how to add user login to a Javascript application using BlitzWare.

PreviousAngular NextReact

Last updated 8 months ago

Was this helpful?

Javascript

This tutorial demonstrates how to add user login to a Javascript application using BlitzWare.

This tutorial is based on the .

Configure BlitzWare

Get Your Application Keys

You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.

You need the Client ID.

Configure Redirect URIs

A redirect URI is a URL in your application where BlitzWare redirects the user after they have authenticated. The redirect URI for your app must be added to the Redirect URIs list in your Application Settings under the Security tab. If this is not set, users will be unable to log in to the application and will get an error.

Integrate BlitzWare in your application

Reference the CDN:

<script src="https://cdn.blitzware.xyz/js/blitzware-js-sdk/blitzware-js-sdk.js"></script>

Setting up the application

Create a basic HTML page

Create a folder on your machine to house the application, then add an index.html file to the root of the project. This HTML page will display a welcome message and have a "gated" section which requires the user to be authenticated before accessing. You can copy/paste the following content into the file. You will be adding more lines as you progress with this article.

Add the following content to the index.html file you just created:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlitzWare JS Example 01</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>BlitzWare JS Example 01</h1>
    <button id="login">Login</button>
    <button id="logout">Logout</button>
    <div id="profile"></div>
  </body>
</html>

Finally, create a new file in the root of your application called app.js. This will house the application-specific logic that you will create over the next few sections.

The folder structure so far should look like the following:

.
├── index.html
├── style.css
├── app.js

Reference the SDK

index.html

<body>
  
  <!-- other HTML -->
  
  <!-- add the lines below existing code -->
  <script src="https://cdn.blitzware.xyz/js/blitzware-js-sdk/blitzware-js-sdk.js"></script>
  <script src="app.js"></script>
</body>

Initialize and use the SDK

The BlitzWare Javascript SDK must be properly initialized with the information of the BlitzWare application created above. This must be initialized using your app's Client ID and Redirect URI.

The SDK gives you tools to quickly implement user authentication in your Javascript application, such as creating a login button using the login() method from the BlitzWareAuth class. Executing login() redirects your users to the BlitzWare Universal Login Page, where BlitzWare can authenticate them. Upon successful authentication, BlitzWare will redirect your users back to your application.

The SDK helps you retrieve the profile information associated with logged-in users quickly, such as their name or profile picture, to personalize the user interface. The profile information is available through getUser function exposed by the BlitzWareAuth class.

You also need a way to log out. You can create a logout button using the logout() method from the BlitzWareAuth class. Executing logout() clears the session and makes sure that the user can not access protected resources.

Take this app.js file component as an example of how to use it:

app.js

BlitzWareAuth.createBlitzWareClient({
  clientId: "your-client-id",
  redirectUri: "your-redirect-uri",
}).then(async (blitzWareClient) => {
  document.getElementById("login").addEventListener("click", (e) => {
    e.preventDefault();
    blitzWareClient.login();
  });

  document.getElementById("logout").addEventListener("click", (e) => {
    e.preventDefault();
    blitzWareClient.logout();
  });

  if (
    location.search.includes("state=") &&
    location.search.includes("access_token=")
  ) {
    await blitzWareClient.handleRedirect();
  }

  const isAuthenticated = await blitzWareClient.isAuthenticated();
  const user = await blitzWareClient.getUser();
  const isLoading = await blitzWareClient.isLoading();

  const loginButtonElement = document.getElementById("login");
  const logoutButtonElement = document.getElementById("logout");
  const profileElement = document.getElementById("profile");

  if (isLoading) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `<p>Loading...</p>`;
  } else {
    if (isAuthenticated) {
      loginButtonElement.style.display = "none";
      logoutButtonElement.style.display = "block";
      profileElement.style.display = "block";
      profileElement.innerHTML = `<p>Welcome to the protected dashboard, ${user.username}!</p>`;
    } else {
      profileElement.style.display = "none";
      logoutButtonElement.style.display = "none";
      loginButtonElement.style.display = "block";
    }
  }
});

That's it!

PreviousAngular NextReact

Last updated 8 months ago

Was this helpful?

This tutorial is based on the .

Configure BlitzWare

Get Your Application Keys

You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.

You need the Client ID.

Configure Redirect URIs

Integrate BlitzWare in your application

Reference the CDN:

<script src="https://cdn.blitzware.xyz/js/blitzware-js-sdk/blitzware-js-sdk.js"></script>

Setting up the application

Create a basic HTML page

Add the following content to the index.html file you just created:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlitzWare JS Example 01</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>BlitzWare JS Example 01</h1>
    <button id="login">Login</button>
    <button id="logout">Logout</button>
    <div id="profile"></div>
  </body>
</html>

Finally, create a new file in the root of your application called app.js. This will house the application-specific logic that you will create over the next few sections.

The folder structure so far should look like the following:

.
├── index.html
├── style.css
├── app.js

Reference the SDK

This article is based on the new SPA SDK available . You can reference the package from the CDN in the index.html file by placing the script tags at the very bottom of the body tag:

index.html

<body>
  
  <!-- other HTML -->
  
  <!-- add the lines below existing code -->
  <script src="https://cdn.blitzware.xyz/js/blitzware-js-sdk/blitzware-js-sdk.js"></script>
  <script src="app.js"></script>
</body>

Initialize and use the SDK

Take this app.js file component as an example of how to use it:

app.js

BlitzWareAuth.createBlitzWareClient({
  clientId: "your-client-id",
  redirectUri: "your-redirect-uri",
}).then(async (blitzWareClient) => {
  document.getElementById("login").addEventListener("click", (e) => {
    e.preventDefault();
    blitzWareClient.login();
  });

  document.getElementById("logout").addEventListener("click", (e) => {
    e.preventDefault();
    blitzWareClient.logout();
  });

  if (
    location.search.includes("state=") &&
    location.search.includes("access_token=")
  ) {
    await blitzWareClient.handleRedirect();
  }

  const isAuthenticated = await blitzWareClient.isAuthenticated();
  const user = await blitzWareClient.getUser();
  const isLoading = await blitzWareClient.isLoading();

  const loginButtonElement = document.getElementById("login");
  const logoutButtonElement = document.getElementById("logout");
  const profileElement = document.getElementById("profile");

  if (isLoading) {
    profileElement.style.display = "block";
    profileElement.innerHTML = `<p>Loading...</p>`;
  } else {
    if (isAuthenticated) {
      loginButtonElement.style.display = "none";
      logoutButtonElement.style.display = "block";
      profileElement.style.display = "block";
      profileElement.innerHTML = `<p>Welcome to the protected dashboard, ${user.username}!</p>`;
    } else {
      profileElement.style.display = "none";
      logoutButtonElement.style.display = "none";
      loginButtonElement.style.display = "block";
    }
  }
});

That's it!