How to Secure Single-Page Applications with Asgardeo
- Theviyanthan Krishnamohan
- Job Title - WSO2
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.
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.
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.
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.
We are done with the first step. Now, let’s create a function called login and call the sign-in method within it.
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.
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.
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.