How to add authentication to a React app using Asgardeo Auth React SDK
The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication using Asgardeo.
This guide uses the Asgardeo React SDK to secure React applications, which provides React developers with an easier way to add user authentication to React applications. You can now secure your React applications using security best practices while writing less code.
In this blog, I’ll walk you through the steps to build a React application then we will use Asgardeo SDK to integrate this application with Asgardeo.
1. Generate a React application
Before you start, you need to have installed Node on your system. Install npm and node in your local environment if you don’t have them already.
It can be installed by visiting here.
Check your installation using the following command
node -v
If the node is successfully installed then the above command will display the version. Then we need to install yarn using the following commands.
npm i -g yarn
If yarn is successfully installed then the below command will display the version.
yarn -v
Create a bootstrap typescript react application using the following command.
This command can take some time
Go inside the created sample directory
cd asgardeo-react-sample
Start the app using the following command
yarn start
Navigate to http://localhost:3000 and you should see our app in all its starter glory:
2. Create a app in Asgardeo
Register in Asgardeo using https://asgardeo.io/signup.
After the signup, you will be redirected to https://console.asgardeo.io/
Then go to Develop -> Applications
Click on New Application -> Single Page Application
Click on Register. You can find more details about this by referring to Asgardeo official documentation.
3. Edit Code
cd asgardeo-react-sample
Asgardeo even provides code snippets that can be used to integrate your app with Asgardeo.
Login to https://console.asgardeo.io/ and then navigate to the applications page. Click on the pencil icon in front of your application.
Select the Quick Start tab and Select React.
Select Integrate your application.
Since we have already installed the Asgardeo SDK. Copy the code snippet on Step 2 on Integrate your application page.
Go to the code of the React Bootstrap application we created in the above step 2 on this blog.
Replace the content in index.tsx file using the copied code snippet from Asgardeo Console.
Here you can see a part saying
{ /* Rest of your application. */ }
This comment should be replaced with your application. To create your application page go to App.tsx
Replace the code of App.tsx from the above code. This simply has a login and logout button that handles login and logout through Asgardeo. If the Authentication is Successful I have used the Asgardeo React SDK to get the user information and id token. Created a separate component authentication-response.tsx to handle that response.
Create a component folder in the src folder. Create the authentication-response.tsx file in the component folder.
Also, create an index.tsx file in the same components directory to export authentication response handling component. Add the following code to that.
Now your application part is ready. now you can replace the
{ /* Rest of your application. */ }
Comment in the index.tsx file using the following
<App />
4. Try Out
Now your application is ready. You need a customer user in your Asgardeo application to try this. You can go to Manage -> Users -> New User
Start your react application using the following command
npm start
Navigate to http://localhost:3000
You can find the full code of the react application in https://github.com/Buddhimah/asgardeo-react-sample
You need to change the client id and the tenant domain.[3] That's it then you can start the application and log in as above.
