Authenticate React Applications with Asgardeo-Part 1
User authentication is a basic need and is very important in today’s software. But doing it by yourself can be a tedious task and can take away your focus on what your app can be. Have you ever spent so much time designing and developing user authentication in your shiny new application? I know I have! But now it’s a thing of the past because Asgardeo is here for the rescue!
Asgardeo is an Identity as a Service (IDaaS) platform offered by WSO2. Asgardeo helps developers to secure their applications with authentication flows using simple steps. It’s so simple even novice developers can easily authenticate their apps via Asgardeo SDKs. Asgardeo supports many other IAM features such as Multi-Factor Authentication (MFA), Adaptive Authentication and integrating social login such as Google, Facebook etc. Not only authentication, but Asgardeo also offers a wide range of user management capabilities so that you can view, manage or remove users through the intuitive Asgardeo Console. Asgardeo offers a wide range of SDKs (followed by many more in the future) to integrate with your favourite technology. You can learn more about supported SDKs here.
For this tutorial, we will be using the React SDK to integrate Asgardeo into a simple To-do application that I’ve made using React. You can follow this guide to integrate Asgardeo into your own React app or you can get the source code of the application that I’m using from here and try it for yourself. So let’s get started!
Right now I have this simple to-do app which also has a very basic login functionality where it allows me to log in given that my username and password matches the ones I have hard-coded into the application. Ideally, it should not be the case. You’ll have to securely store the credentials on a database and authenticate it against them and you have to maintain user sessions and so on… But I will not bother to add any of those functions since Asgardeo will do all that for me!
Step 1 — Register an Application in Asgardeo
As the first step, there are some configurations that need to be done from Asgardeo Console. Simply log into Asgardeo Console (or sign up if you haven’t already. It’s free!) and go to Develop > Applications section. You’ll be greeted with a view as follows. Click on New Application and you’ll be taken to an application creation wizard.
In the next step, since we are developing a Single Page Application (SPA) using React, let’s click on the Single-Page Application template.
Once you clicked on that, you can add a name for your application and your authorized redirect URL. This URL determines where Asgardeo should redirect the user once they are successfully authenticated. Usually, this URL is where your application is hosted on. Since I have hosted my to-do application locally, I will include HTTP://localhost:3000 as the authorized redirect URL (your URL may vary). Once you have included this information, go ahead and register your application in Asgardeo.
Once you have registered the application you will be taken to the configuration screen (as shown below) of the application where you can tweak the application according to your need. Since we don't have any special requirements, we will continue as it is.
Since we are building a React application, let's go to the React section and see what we find. Inside this section, you have 2 options. One — Integrate Asgardeo to your own application (as we do now) or two — Try out the sample application provided by WSO2 and take Asgardeo for a spin!
We will pick Integrate your application option as that’s what we want. Then it’s just a matter of following the steps listed in the Asgardeo console!
Step 2 — Integrate Asgardeo into the React Application
The first step is to install the Asgardeo SDK and react-router-dom, you can use the npm command npm install @asgardeo/auth-react react-router-dom --save for that. But for this demo, you won’t be needing that as I have already installed the SDK into the React project. You only need to run npm install and you’d be good!
Now that we have installed the dependencies needed, we have to use the AuthProvider component which allows us to integrate Asgardeo into our React application. To do that, simply wrap the application with the <AuthProvider/> component. In the To-do application, we can wrap the application as follows in the index.js file. It also comes with a configuration that you should find in the Asgardeo Console.
Once we have wrapped the application with the <AuthProvider/> component at the root level, we have access to the Asgardeo API throughout the application. Asgardeo API offers a React hook - useAuthContext() that can be used to access the session state which contains information such as whether the user is authenticated and current user details. It also offers methods that can be used to log in or log out of the application. We will be using this hook to implement the authentication of our application.
Since the login will be now handled by Asgardeo, I will change my login page as follows. I will no longer need to have a login form. Log In with Asgardeo button will call the signIn() method from the useAuthContext() hook provided by the Asgardeo API. This method will direct the user to a login provided by Asgardeo and upon successful authentication, the user will be redirected to my To-do App. This is where the Authorized Redirect URL comes into play.
useAuthContext() hook also offers the state object which includes the following data which is useful to check if a user is authenticated or not and if they are, their user data as well. We will be using both the signIn() function and the state object to successfully authenticate a user into our To-do application. You can inspect the state object using React Dev Tools in the browser and it should have a structure as follows.
Step 3—Create a Customer User in Asgardeo
Before anything else, we need to create a user in Asgardeo which will be a person who will use our To-do Application. Currently there 2 types of users in Asgardeo, Collaborator Users (Admins) and Customer Users (Consumers). Since we need a person who consumes our application, I will create a Customer User in Asgardeo. To do that, log in to Asgardeo Console and go to Manage> Users and in this section, click on New User and select Customer from the dropdown. You will be shown a user creation wizard as follows. Create a new customer user and then we should be able to log in to the To-do App as a customer user using Asgardeo.
Once you have registered a new customer user in Asgardeo, click on the Log In with Asgardeo button and you’ll be directed to the Asgardeo login page as follows. Enter the credentials of the newly created customer and click on Sign In and you’ll be taken to a page where need to allow Asgardeo to access user attributes (you can control these within the Asgardeo Console) and once we have given proper permissions, it will take you back to the To-do Application (based on the Authorized Redirect URL which we configured earlier)
Step 4 — Handle auth/routing from the application side
Now you must be wondering… nothing changed?!? We are at the same login page as before! Yes! But… no. If we inspect the state object in the useAuthContext() hook, now we can see a difference as follows.
Now we can see the currently logged in user’s data (based on what you have allowed on the Asgardeo console) and also the isAuthenticated property is now been set to true. By using this property, we can authenticate and redirect the user to the To-do app using the following approach. It doesn’t always have to be this way. You can think of many creative approaches to authenticate using the isAuthenticated property.
I have used React’s own useEffect() hook to listen to the changes on the state.isAuthenticated property. If they are authenticated, i.e; state.isAuthenticated == true , they will be redirected to the /home/todo path or if they are not authenticated, they will be retained on the login page. The result will be like this!
We can now sign in, but how do we sign out? Handling sign out is also very easy! Similar to signIn() function useAuthContext() hook also offers a signOut() function. I have simply bound this function into a button inside the To-do App once the user clicks on it, their session will be terminated and they will be taken back to the login page.
Step 5 …Profit???
Even though we are authenticating the users via Asgardeo, the solution is not yet complete. Users can still manually enter http://localhost:3000/home/todo and visit the inner pages as they are not protected. Also as seen on the above gif, there’s a slight delay between logging into Asgardeo and redirecting them into the To-do App. These issues can be solved using components such as <SecureRoute/> and state.isLoading attribute. We will address these issues in our next article of this series. The source code of the application I have created up to now can be found here.
References
For more information, you can use the following reference links.
We have barely scratched the surface of what Asgardeo can do to our application! But that’s it for today. I will be back with another article on how to have authenticated routes, retrieve authenticated users’ data, how to use access tokens to secure our application and many more... Cheers!
