React Application — User Authentication With Asgardeo
Asgardeo is the new cloud-based identity service(IDaaS) by WSO2. In this article, I will show How we can do user authentication with Asgardeo SDK in your React application.
For this tutorial, I am using a react sample application that contains only one page as the landing page (Figure 1). You can find the react sample application without the Asgardeo integration below. So you can follow the steps below with this non-Asgardeo sample application.
1) Create an Application In Asgardeo Console
Before going React application code, we need to create an application on the Asgardeo console.
- Go to Develop tab and click Applications.
- Create a new single-page application with a suitable name and enter “http://localhost:3000” as an authorized redirect URL.
- Click on the “Register” button.
Great! Now you have created a new single-page application on the Asgardeo console.
2) Setup the React Application
Hope you downloaded the React application version 1.0 from the above-mentioned link. Let’s run the below command to download the dependencies and run the application.
npm install && npm startThe application will be open on a browser or you can access http://localhost:3000 from your browser.
3) Integrating Asgardeo SDK
Integrating Asgardeo SDK into the existing react applications is really easy. You can find a good demonstration from the QuickStart tab on the SPA application you created. Also, you are looking for APIs supported by the Asgardeo SDK you can find more from the below GitHub repository.
As we discussed I am going to integrate the Asgardeo auth react SDK to the application we have already set up.
- Install library from the npm registry.
npm install --save @asgardeo/auth-react- Create the file src/config.json and add below to that with relevant data. You can find the <client_id> from the protocol tab in the application that was created on the Asgardeo console. Also, replace the<org_name> with your organization name on console.
{"clientID": "<client_id>",
"serverOrigin": "https://api.asgardeo.io/t/<org_name>",
"signInRedirectURL": "http://localhost:3000/home",
"signOutRedirectURL": "http://localhost:3000",
"scope": ["openid","profile"]}
In this configuration, I have set the value of signInRedirectURL to http://localhost:3000/home because we need to go to the home page after the sign-in process is complete.
As we need /home path to redirect after signin , we need to add http://localhost:3000/home url to Authorized Redirect URLs in application configurations on Asgardeo console. You can do it from the Protocols tab.
- As we need another secure page as our home page, we need to create some components, pages, and styles. Below are the new resources we need for our new page and for integrating Asgardeo.
1. Add below files into components folder.
* Top.tsx
* second-top.tsx
2. Update components/header.tsx file with this.
3. Create pages directory and add following files.
* ClientMissingIDError.tsx
* Home.tsx
* Landing.tsx
* NotFound.tsx
4. Remove App.tsx file as we have created Landing.tsx file inside pages directory.
5. Update public/css/styles.css file with new styles.
- Finally, we need to update src/index.js file.
As you can see here, we have set home as a secured path with SecureRedirect which is extended by the SecureRoute API in Asgardeo react SDK.
Also, wrapped the router with AuthProvider which is a React context provider that provides the session data.
4) Try Sample APIs
In our application home page(pages/Home.tsx) , I have used below APIs.
Other than that I have used signIn API for the sign-in and Signout API for the logout .
Of course, this is not enough for an application from the authentication provider. You can find more APIs with really good examples from below.
Also, If you have confused when you are setting up the sample application, you can find the finalized sample application from here.
That’s it. Hope you have some idea about integrating the Asgardeo Auth React SDK into an existing React application. Thank you very much for reading this.
Cheers !!
