How to Implement Authentication in a React SPA Using Auth0 as the Identity Provider

Learn how to integrate an easy and fast authentication method into a SPA with Auth0.

Auth0 is an identity provider that allows us to manage our users' identities effectively and with great control.

I won't delve further into the theory behind this platform; this blog is a step-by-step guide to integrating a SPA in ReactJs with Auth0. You will create a new free account, create a tenant, an API, roles, and finally connect everything to have quick authentication in your application.

Let's get started:

To follow this step-by-step, you need basic knowledge of ReactJs to understand, navigate, and manipulate the demo project to adapt it to your needs.

Step 1: Create a free account on Auth0

Go to https://auth0.com/ and create a free personal account.

Step 2: Create a tenant

Once your account is created, you will find yourself on the platform's dashboard. During the creation process, a default tenant was created. You can use that or create a new one:

At the top left, select the component next to the Auth0 icon.

A tab will drop down, at the bottom of it you will see the option “Create tenant”.

Choose a name, which if you don't have a custom domain name, will serve as one.

Choose a region where this tenant will exist; I recommend the one closest to your geographic location.

Finally, choose the Environment Tag. Since this is a demo, the best option is development.

You can create n tenants and switch between them later. [for now you only need one]

💡 More information about Tenant: https://auth0.com/docs/get-started/auth0-overview/create-tenants

Step 3: Add a user to the default database

On the left panel, you have access to all Auth0 options and sections. Under “Authentication” you can see the “Databases”. By default, there is one called “Username-Password-Authentication” where, among other things, you can configure valid password policies and see which of your applications are enabled to use that Database.

It is in Auth0's Databases where the Users or identities that can access the application they have access to will exist.

So you can create a user and assign them the default database or create a new one. After making that decision, go to “User Management” and then “Users” in the left panel.

Although there are ways to migrate users from other sources, whether cloud or on-premise, in this example we will only create one user directly in Auth0.

To learn more about user migration in Auth0: https://auth0.com/docs/manage-users/user-migration

To create a user, press “Create User”, add an email, a password, and a connection to the default database.

The acceptable criteria for the password will be determined in the configuration of the database it connects to. Therefore, if you want to modify those criteria to either increase the length or impose the use of special characters, you must go back to the “Authentication” section, press the database, and go to “password policy”.

Step 4: Create a SPA application

An application in Auth0 does not imply any particular feature, but they are classified into 4 types:

Native: Mobile or desktop applications that run natively on a device (such as iOS or Android)

M2M: Non-interactive applications, such as command-line tools, daemons, IoT devices, or services running on a backend.

Regular web application: Traditional web applications that perform most of their application logic on the server like Express.js or ASP.NET

SPA: JavaScript applications that perform most of their user interface logic in a web browser, communicating with a web server mainly through APIs (like AngularJS + Node.js or React).

For this case, we want to connect to a SPA in React, so we will use this last option.

In the left panel, go to “Applications/applications”, then press the “Create Application” button, finally choose a name and select the SPA type.

Once here, you will notice that Auth0 provides us with templates in different libraries/frameworks in the Quickstart section.

If you don't already have a finished application, you can start with this template; otherwise, pay attention to the configuration to apply it to your own application.

In the settings section, you will find the important data you will need to add to the code, such as the ClientID and the Client Secret. You will also need an audience which is obtained by creating an API in Auth0, but you will see that in the next step.

Before continuing, verify that this application has access to the default Database or the one you created. You can check in the “Connections” section.

Auth0 allows authentication with third parties like Google, Twitter, GitHub, Facebook, etc. You must configure each one to enable it; if you need this option, you can see more here: https://marketplace.auth0.com/features/social-connections

Step 5: Create an API

To create an API in Auth0, go to the “Applications/APIs” section on the left panel. You will find the default API focused on managing the Auth0 account and its resources via code, for example, creating an action, modifying a user, etc. So it will not be useful for this example; therefore, create a new API using the “Create API” button.

Step 6: Connect your SPA-React to Auth0

Demo repository link: https://github.com/JazminTrujilloEyzaguirre/demo-react-auth0

At the root of the project, you will find a file called api-server.js that has the configuration for authentication, using two libraries [ express-jwt // jwks-rsa ] and the data in the auth-config.js file.

Go to the application settings and configure the host and port.

Next, run the command to install the necessary packages and start the application: npm install & npm start

During the login process, an authorization_code, an access_token and an id_token will be generated with the user's authentication information, the application they are accessing, the API audience, etc.

During the authentication process, the user is redirected to an identity provider [Auth0], where they enter their credentials. If authentication is successful, the identity provider issues an identification token containing information about the user, such as their name and email address. The application receiving the token can verify the user's authentication and use the information included in the token to personalize the user experience and protect resources.

Step 7: [optional] Enable and customize Universal Login, new experience in Auth0

As you may have noticed, the login using Auth0's Universal Login is customized in this demo. For you to customize your login, you need to know what Universal Login in Auth0 is and how advanced the options it offers are. Let me tell you a bit about this:

Universal Login is a feature of Auth0 that allows developers to create a unique and customized starting point for user authentication in their applications. With Universal Login, users can log in to different applications using the same authentication provider, which improves the user experience and reduces password management complexity. Universal Login also offers a wide variety of customizations, such as customizing the login page, adding logos and corporate colors, and integrating with company authentication policies.

New Experience and Classic Experience are the two user interface options offered by Auth0 for configuring and managing the platform regarding login.

New Experience is Auth0's most modern and recent user experience. It offers an intuitive user interface, a detailed dashboard view, and better organization of resources and settings. It is designed to be easier to use and to improve the productivity of developers and security administrators.

Classic Experience is Auth0's previous user experience. It is a more traditional user interface with a simpler menu structure and dashboard view. Some users may be familiar with this experience and may choose to use it if they prefer a simpler and more straightforward interface.

Both options offer the same functions and features of Auth0 but vary in how settings and resources are presented and organized.

In this demo, I used the New Experience. And since I needed quick customization, I used the most basic configuration it offers, where no coding or CSS is necessary.

In Customization Options, you will find a friendly interface that will allow you to make basic changes, such as color, font, etc.

In Advance Options, you will be able to access an editor where you can insert HTML, CSS code and use libraries like Bootstrap.

Well, at this point, we have navigated and used some of the functions that Auth0 offers us to quickly integrate a SPA and have fast authentication with the latest security standards.

Still, Auth0 has much, much more to offer. If you are interested in learning more, write to us and we will be happy to help you.

Ready to improve authentication in your web applications?

At Kranio, we have experts in integrating authentication solutions like Auth0 in React applications. We help you implement secure and scalable systems that protect your users' information and optimize the access experience. Contact us and discover how we can boost the security and efficiency of your technological projects.

‍