How to Secure Single-Page Applications with Asgardeo

More often than not, securing access to your Single-Page Application (SPA) inevitably becomes an integral part of development. Asgardeo simplifies this by providing an Identity and Access Management (IAM) solution coupled with a suite of SDKs to easily integrate Asgardeo with various applications.

In this article, we will explore how to use Asgardeo Auth SPA SDK to secure your SPA. If using React or Angular, Asgardeo’s React or Angular SDK can be used, further simplifying development.

To begin, let’s create an application using Asgardeo’s console app. Log in to the console app by providing your username and password and switch to the develop tab. Then, click on applications from the side panel and click on new application. 

You'll be taken to a screen where you can select a template for your application. Let's go with "Single-Page Application" because we're aiming to integrate with a SPA. A modal will appear as a result. Give your application a name. After that, we must provide a redirect URL. After successful authentication, Asgardeo will redirect the user to this URL. We'll enter the root URL of our app since our SPA won't have any routing. I'll use "https://localhost:5000" because that's where I'll be running my app locally.

You will be taken to the Quick Start page after clicking on register. Select JavaScript as your technology. The section "integrate your application" provides you with the necessary instructions. Let's use these instructions to quickly integrate Asgardeo with our SPA.

Now that we've finished configuring Asgardeo, let's create a simple SPA. If the user is not authenticated, the app will display a login button, and if the user is authenticated, the app will display a greeting. When you click the login button, the authentication process begins.

Here is the HTML code of the index page.

SPA-sample-index.html (github.com)

The first step is to incorporate the SDK into the application. Because this is a vanilla JavaScript application, we can use the CDN link to import the SDK. Insert the following script tag into the HTML page's head section.

<script src="https://unpkg.com/@asgardeo/auth-spa@latest/dist/asgardeo-spa.production.min.js"></script>

After that, we can integrate the SDK into our app. There are only two simple steps to the integration. First, we must initialize the configurations into the SDK. Then we must activate the sign-in method.

So, let's get the SDK up and running. To accomplish this, copy the code snippet from the second instruction on the Quick Start page, which was generated automatically for you.

This snippet assumes you want to initialise the SDK within a script tag. In this example, however, we will write our JavaScript code in a separate file. As a result, you can disregard the script tag in this code snippet. For obvious reasons, I have masked my client id and tenant name in the code below.

SPA-sample initiate.js (github.com)

For those who are curious, the first line creates an instance of the AsgardeoSPAClient class, and then we call the initialize method and pass the necessary configuration details.

Because we want the SDK to be initialized on page load, we'll call the initialize method from the document object's onload callback method.

SPA-sample-onlaod.js (github.com)

We are done with the first step. Now, let’s create a function called login and call the sign-in method within it. 

SPA-sample-login.js (github.com)

However, simply calling the sign-in method from within the login function is insufficient. This is due to the fact that when the sign-in method is called for the first time, the user is directed to the Asgardeo login page. Asgardeo returns the user to the application after successful authentication. Remember that redirect URL we specified earlier? Here's how it's put to use.

After the user arrives following a redirection, we must call the sign-in method once more. As a result, we can call the sign-in method just after the initialize method within the onload function. But won't calling the sign-in method on page load automatically initiate the sign-in flow? It will, indeed. So, how can we ensure that the sign-in method is only called when the user is redirected? It's simple! All we need to do is pass an object as an argument to the sign-in method with the attribute "callOnlyOnRedirect" set to true.

SPA-sample-login-redirect.js (github.com)

We're almost finished. After the user has been authenticated, we must hide the login button and display a greeting. To accomplish this, we can use the SDK's on method. After certain events, such as sign-in and sign-out, the on method fires a callback function. The event type can be specified as the first argument and the callback function as the second argument to the on method. We can pass "sign-in" as the first argument because we need the callback to fire after sign-in. Let's hide the login button and show the greeting in the callback function by setting its display property to block. And we can call this on method again within the onload method.

SPA-sample-login-on.js (github.com)

We've finished. Let's try the app's login button and see if everything works properly. You should be taken to Asgardeo's login page after clicking the button. Sign in with the credentials of a customer user account. You should be returned to the app, where the greeting should now appear.

Just like that, we have secured our simple SPA with Asgardeo. You can find the source code of this sample app here.