How to Implement Authentication in a React SPA with Auth0 as an Identity Provider

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

Auth0 is an identity provider, which allows us to manage the identity of our users effectively and with a lot of control.

I will not go any further into the theory behind this platform, in this blog it is a step by step to integrate an SPA in ReactJS to auth0, you will create a new free account, you will create a tenant, an api, roles, and finally you will connect everything to have fast authentication in your application.

Let's do it:

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

Step 1: Create a free auth0 account

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

Step 2: Create a tenant

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

At the top left, select the component after the auth0 icon.

A tab will be displayed, at the end of it you will see the option “Create tenant”

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

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

Finally choose the Enviroment 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]

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

Step 3: Add a user to the default db

In the left panel you have access to all the options and sections of auth0. In “Authentication” you can see the “Database”. By default there is a so-called “Username-Password-Authentication” there, among other things, you can configure valid policies for passwords and see which of your applications are enabled to use that Database.

It is in the Database of auth0 where will the Users or identities that will be able to access the application to which they have access.

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

While there are ways to migrate users from other sources, whether in the cloud or on-premise, in this example we will only create an user directly in auth0.

To learn more about migrating Users 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 to which you connect. Therefore, if you want to modify these criteria to either increase the length or impose the use of special characters, you must return to the “Authentication” section, press the database and go to “password policy”.

Step 4: Create an SPA application

An application in auth0 does not involve any particular characteristics, but they are classified into 4 types:

Native: Mobile or desktop apps 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 that run on a backend.

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

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

For this case, we are looking 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 can realize that auth0 provides us with templates in the different libraries/frameworks in the Quickstart section.

If you don't have a finished application beforehand, 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 that you will need to add to the code, such as the ClientID And the Client Secret. You'll also need a Audience that you get by creating an API in auth0, but you'll 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 such as google, twitter, github, facebook, etc. You must make a configuration to enable each one, 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 in the left panel, you will find the default API that is focused on managing the auth0 account and its resources via code, for example, creating a Action, modify a User, etc. So it won't work for this example, so create a new API, with the “Create API” button

Step 6: Connect your SPA-React to Auth0

Repository link with the demo: https://github.com/JazminTrujilloEyzaguirre/demo-react-auth0

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

Go to application settings and configure the host and port.

The next thing is to run the command to install the necessary packages and run the application: npm install & npm start

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

In the authentication process, the user is redirected to an identity provider [auth0], where they enter their credentials. If the authentication is successful, the identity provider issues an identification token that contains information about the user, such as their name and email address. The application that receives 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 could notice, the login using universal login in auth0 is personalized in this demo, so that you can customize your login, you should know that universal login is in auth0 and how advanced are the options it offers. I'll tell you a little bit about this:

Universal Login is an Auth0 feature that allows developers to create a unique, personalized starting point for authenticating users in their applications. With Universal Login, users can log in to different applications using the same authentication provider, improving the user experience and reducing the complexity of managing passwords. Universal Login also offers a wide variety of customizations, such as customizing the login page, adding corporate logos and 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 in terms of login.

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

Classic Experience is the previous user experience of Auth0. It's 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 direct interface.

Both options offer the same functions and features as Auth0, but they vary in the way that configurations and resources are presented and organized.

In this demo, use New experience. And since it needed quick customization, use the most basic configuration it offers, where you don't need to write code or CSS.

In Customization Options, you'll find a user-friendly interface that allows you to make basic changes, color, font, etc.

In Advance Options it will allow you to access an editor where you can insert HTML and CSS code and make use of libraries such as Bootstrap.

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

Even so, auth0 has much, much more to offer, if you are interested in knowing 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 such as Auth0 into React applications. We help you implement secure and scalable systems that protect your user's information and optimize the access experience. Contact us and discover how we can boost the safety and efficiency of your technological projects.

‍