Authenticating React Apps With Auth0

Introduction

Consider that you have created an application in which you need a user login feature to uniquely identify each user that is using the application.

Implementing this feature by ourselves will require a lot of time and resources and it might be less secure. In this case, using a pre-written code to implement this feature will save a lot of time and resources, and also it will be very easy to use. This is also the case when we are creating an API (Application Programming Interface) to provide services to other users and we only want authentic and authorized users to use our API services.

Auth0 provides us with options to implement such authentication and authorization services in our application.

What is Auth0?

Auth0 is a popularly used solution that is used to implement authentication and authorization services to any application without writing authentication and authorization logic ourselves. It is very commonly used in modern-day applications (for example social networking sites). It saves a lot of time and resources for a developer and also provides a secure environment and a seamless user experience.

Auth0 can be used in the following cases.

• You want to implement a login feature to your application so that users can log in to your application and can use the application with their credentials.
• You have built an API (Application Programming Interface) and you want to secure it i.e. you only want authentic and authorized customers to use your services.
• You have implemented a user login feature but you also want other features like resetting the password, forget password, etc. in your application.

You can read the official documentation of auth0 to learn about more use cases. Auth0 Official Documentation

In React, we have an npm package to implement auth0 services in a react application (auth0 react). Auth0 react can be used to implement authorization and authentication services to any React application.

Installation

To install auth0 react in a React application, go to the react application folder, and in the terminal, write npm i @auth0/auth0-react. Auth0 react can be also installed using yarn by writing yarn add @auth0/auth0-react in the terminal.

Configure Auth0

1. Go to Auth0 Website and create an account by clicking on the signup button. If you already have an account, then login into your pre-existing account.
2. Go to the Auth0 dashboard and click on 'create application' to create a new project. Select the application type to 'Single page web application' to set up it for React application.
3. In the application menu, go to the setting and make sure that the following settings are set to the options given below.
   • Make sure the "Token Endpoint Authentication Method" is set to "None" in the "Application Properties" window.
   • Select the "Show Advanced Settings" link by scrolling down. Select the "OAuth" tab under "Advanced Settings."
   • Make sure "OIDC Conformant" is enabled and "JsonWebToken Signature Algorithm" is set to RS256.
4. Under the 'Application URIs' section in the settings, select the following URLs.
   • Allowed Logout URLs: http://localhost:3000
   • Allowed Callback URLs: http://localhost:3000
   • Allowed Web Origins: http://localhost:3000

These URLs ought to accurately represent the path on which your application is operating. Depending on where you're processing the callback, allowed Callback URLs could additionally contain a path. 5. Note down the Client ID and the Domain values that are present in the 'Basic Information' section of the settings. These will be required later when we will configure Auth0 SDK in our React application.

Configure the SDK

Configure the SDK by using the code provided by Auth0Provider in the index.js file in the 'src' folder of the React application. Wrap the App component inside Auth0Provider.

Using the useAuth0 hook, we can access the authentication state (i.e. isLoading, isAuthenticated, and user) and authentication methods (i.e. loginWithRedirect and logout) in any component of the React Application.

Given below is the example code written inside the 'App.js' file of the React application.

Example: Authentication Using the Auth0 to a React Application

Let us implement a login feature in a React application using auth0 react. Create a new React application named 'auth0-react' by writing the npx create-react-app auth0-react command in the terminal.

Install the package auth0 react by writing the command npm i @auth0/auth0-react inside the terminal. This will install all the modules and functions that are pre-written inside the auth0 library.

Configure the SDK for auth0 reacts by writing the following code in the 'index.js' file inside the 'src' folder of the react application. Auth0Provider will be used for the configuration of auth0 react in our application.

Use your Auto0 Domain and Auth0 Client ID that was there in the basic information section in the settings tab of the application in the Auth0 dashboard (Check Configuring Auth0 section of this article).

We will use the useauth0 hook which provides us methods like isLoading, isAuthenticated and user to access the authentication state and loginWithRedirect and logout to implement authentication features in our React component.

This is what our React page looks like.

When we click on the login button, it takes us to the auth0 page where we can log in with different options. We can also click on sign up to create a free auth0 account.

Finally, after a successful login, our React page looks something like this.

The logout button on the page shows that the user has logged in.