How to secure SPAs 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 you with 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 see how we can use the Asgardeo Auth SPA SDK to secure your SPA. If you are using React or Angular, you can use Asgardeo’s React or Angular SDK, which would further simplify your development.

To begin with, 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 will land on a page where you can choose an application template. Since we are trying to integrate with a SPA, let’s select “Single-Page Application”. This will pop up a modal. Enter a name for your application. Next, we need to provide a redirect URL. This is the URL to which Asgardeo will redirect the user after a successful authentication. Since our SPA will not include any routing, we will enter the root URL of our app. I am going to use “http://localhost:5000” as there is where I am going to run my app locally.

Once you click on Register, you will be taken to the Quick Start page. Choose JavaScript as the technology. The “Integrate your application” section gives you the necessary instructions. Let’s use these instructions to quickly integrate Asgardeo with our SPA.

Now that we are done with setting up Asgardeo, let’s build a simple SPA. The app will show a login button if the user is not authenticated and a greeting if the user is authenticated. The login button will initiate the authentication process when clicked.

Here is the HTML code of the index page.

The first thing we need to do is to import the SDK into the application. Since this is a vanilla JavaScript application, we can import the SDK using the CDN link. Add the following script tag inside the head section of the HTML page.

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

Once this is done, we can integrate the SDK with our app. The integration involves two easy steps. First, we need to initialize the SDK with the configurations. Then, we need to call the sign-in method.

So, let’s initialize the SDK. In order to do this, let’s copy the code snippet from the second instruction in the Quick Start page, which has been automatically generated for you.

This snippet assumes that you want to initialize the SDK within a script tag. However, we will write our JavaScript code in a separate file in this example. So, you can ignore the script tag in this code snippet. In the code shown below, I have masked my client id and tenant name for obvious reasons.

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

As we want the SDK to be initialized on page load, let’s call the initialize method inside the onload callback method of the document object.

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

However, calling the sign-in method within the login function alone isn’t enough. This is because when the sign-in method is called for the first time, the user is taken to the login page of Asgardeo. After the user authenticates successfully, Asgardeo redirects them back to the application. Remember the redirect URL we specified earlier? Here is where it is used.

We need to call the sign-in method once again after the user arrives following a redirection. So, we can call the sign-in method inside the onload function just after the initialize method. But won’t calling the sign-in method on page load trigger the sign-in flow automatically? Yes, it will. So, how can we make sure that the sign-in method is called only when the user is redirected? It is simple! All that we need to do is to pass an object with the attribute “calllOnlyOnRedirect” set to true as an argument into the sign-in method.

We are almost done. Now, we need to hide the login button after the user is authenticated and show a greeting. We can use the on method provided by the SDK to do this. The on method fires a callback function after certain events such as sign-in and sign-out. We can specify the event type as the first argument and the callback function as the second argument of the on method. Since we need the callback to fire after sign-in, we can pass “sign-in” as the first argument. In the callback function, let’s hide the login button and show the greeting by setting its display property to block. And we can call this on method within the onload method once again.

We are done. Let’s click on the login button on the app and see if everything works fine. After clicking the button, you should be taken to Asgardeo’s login page. Enter the credentials of a customer user account and sign in. You should be taken back to the app and 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.