Integrating a React-Based Authentication System for your Web App

Gone are the times when all service users would be broadcast the same content. With rapid improvements in software technologies, users are now provided individually personalized content. This is made possible using 2 key factors: one, each user is uniquely identified and their actions are tracked, and two, these actions/activities are processed by ML/AI algorithms to show content relevant to the user’s activity.

Establishing a unique identification is important to enhance the user experience of an application. Not just that, it can also be used to serve personal data like messages, emails, etc. We can see this system present almost everywhere on the web today, which is accomplished through what’s known as authentication. It verifies if the person is the same as who he/she claims to be.

Authentication and Its Types

As previously mentioned, authentication is used to verify the identity of a person they claim to be. There are various ways through which one can verify their identity.

Before looking at the types of authentication, let’s clear a common beginner misconception. When learning about authentication architecture, it is obvious to come across the term authorization, but it is important to note that authorization is not the same as authentication. The former describes the authority or access level an individual holds whereas the latter is verifying the identity.

Authorization can be considered as a subset of authentication. An authenticated user may or may not be authorized to perform an action, but to be authorized to perform any action that mutates the data on the server, one must be authenticated.

Moving ahead, let us look at some of the most commonly used authentication types.

Authentication Using a Form

** **

Source

This is one of the most widely used ways of authentication to date. Here, a form is set up both for registration and login, where the user enters their details and the information is stored in the site's database through a self-service.

Pros:

Full access and visibility to the form data can extract any amount of information from the user and can be styled to fit the site’s design principles.

Cons:

Longer development time requires active maintenance, can get tedious to fill out long forms, and is time-consuming

Using social handles

** **

Source

It is very likely that a user visiting your site already has at least one social account.

So instead of creating an authentication system from the ground up, one could simply use social logins to onboard or sign in users.

Pros:

Faster development, increased registrations, verified email out of the box, and a good UX overall.

Cons:

Downtime in social media might disrupt the logins of your app (less likely, but possible),

excluding non-social media users, visitors might forget which social login they used.

OTP-Based Authentication

** **

Source

In OTP-based authentication, a user is authenticated via an email or a phone number, or both, by sending a one-time password to the registered phone number/email.

Once the user logs in with the sent OTP, the password is invalidated and cannot be used again to authenticate.

This requires an email or SMS provider to send the OTP whenever the user logs in.

Pros:

No burden of remembering passwords, and better security.

Cons:

Increased maintenance costs for SMS/email service provider, requires the user to have access to email/phone every time they sign in.

Authentication Using Frontegg

In the above section, we saw the different ways in which an authentication system can be built along with its pros and cons. The common drawback of all of these methods is that they are time-consuming and require coding skills.

So, how can one go about building an auth system with minimum effort and great results? Frontegg‘s Login Box Builder was built keeping these problems in mind.

For those of you who haven’t heard about Frontegg, it is a user management SaaS platform built for B2B products. It provides a wide range of choices to make sure that the creation of a login/sign-up widget is flexible enough. This platform can be used for user management right from authentication to checkout, of which we’ll see the authentication implementation in detail.

**
**

Currently, React, Angular, and Vue-based websites can use the login/sign-up widget. The integration of the authentication system in React is the main topic of this article. However, a comparable strategy can be modified to accomplish the same in other frameworks as well.

Building an authentication system using Frontegg is straightforward and is composed of 3 simple steps: design, integrate and deploy.

First off, head to Frontegg and sign up for a free account. After you sign up, you are taken to a screen with the headings "Build your login box," "Integrate," etc. Choose "Start" next to "Build your login box". You will set the authentication type and aesthetics here.

There are no limitations on how the authentication system should be created in this situation. You may use social logins if you wish to, for example. Click on ‘Publish changes’ after you are done designing your login box.**
**

The next step is integrating the box into the code, the widget has to be included into your site after the login/sign-up box is ready. Hosted and embedded integration options are available.

Although we'll be using hosted login in this tutorial, you're free to use embedded login too. Run the following command to install "@frontegg/react" and "react-router-dom":**
**

npm install @frontegg/react react-router-dom@latest

In your index.js, wrap the root component with the `FrontEgg` component. This is to maintain the integrity of private routes and know the auth state overall. It should be something like the one below.

Source

To get the base URL, navigate to “Go live”>Add your domain to the "Allowed Origin" list, where you can see your base URL. Click on your profile in the lower left corner, then select Workspace Settings from the expanded menu to find the client ID.

Next, we can use Frontegg's 'useAuth' hook to determine whether a user has been authenticated or not. If the user is authenticated, this hook returns the user data and authenticated state (boolean value). Based on the boolean value, you can conditionally render various pieces of information.**
**

Source

If the user is not authenticated, the "useEffect" hook sends him to sign up. You can adjust this to your needs, but enabling users to authenticate is a wise choice. The aforementioned code snippet was obtained from Frontegg's official GitHub repo.

Next, from your Frontegg dashboard, activate hosted login. To implement that, click Manage for Hosted Login under "Settings" under "Authentication". The image below depicts the same.

The hosted login feature must then be enabled by toggling the enable switch, and you must enter "http://localhost:3000/oauth/callback" in the redirected URL input field (given that you are running on localhost).

Click "save" at the bottom to save the changes after making the mentioned additions.

The last step is adding the weblink to the CORS policy.

Select "Add your domain" from the list of available options after selecting the "Go live" option on the top tab. Scroll to the bottom of the "Domains" section to add your domain to the list of "Allowed Origins" that is whitelisted. This should get the widget ready to launch.

Conclusion

An authentication system plays a critical role in driving a business as a smoother log-in/sign-up system results in onboarding a larger number of users than an uneasy and tedious signup procedure.

To manage users without any hassle, platforms like Frontegg can be utilized, which benefits both the application developers and the end users.