Authentication using the Auth0 to a React application

Introduction

React is an open source JavaScript library for building user interfaces in WEB and mobile applications. Currently, React is at version 17 and Meta (formerly Facebook) is the main maintainer of the project.

Auth0 is an easy to implement, adaptable authentication and authorization platform.

Prerequisites

Before you start, you need to install and configure the tools:

Getting started

Create and configure the account on the Auth0

1. Let’s create the account. Access the site https://auth0.com/ and do steps 1 and 9 of the post Authentication using the Auth0 to an Angular application to create and configure the account on the Auth0.

2. In step 7 of the post above, fill in the field Allowed Callback URLs with the URL http://localhost:3000/react-auth0/profile, fill in the fields Allowed Logout URLs, Allowed Web Origins with the URL http://localhost:3000/react-auth0 and click on the button Save Changes.

Create the React application

1. Let’s create the application with the React base structure using the create-react-app tool.

2. Install and configure the Material UI CSS framework. Do step 2 of the post Adding the Material UI CSS framework to an React application.

3. Install the @auth0/auth0-react and react-router-dom libraries.

4. Create the SignIn component.

5. Add the lines in the src/SignIn.tsx file as below.

6. Create the Profile component.

7. Add the lines in the src/Profile.tsx file as below.

8. Change the src/index.tsx file. Import the Auth0Provider component and configure the parameter domain with the Auth0 domain and the parameter clientId with the Auth0 Client ID as below.

9. Change the src/App.tsx file. Add the menu and the routes in the src/Profile.tsx file as below.

10. Run the application with the command below.

11. Ready! Access the URL http://localhost:300/react-auth0 and check if the application is working. See the application working on GitHub Pages and Stackblitz.

Testing the application sign in

1. Let’s test the application sign in. Access the URL http://localhost:3000/react-auth0 and click on the button Sign in.

2. Click on the button Sign up.

3. Fill in the fields Email Address, Password and click on the button Continue.

4. Click on the button Accept.

5. You will be redirected to the application.

6. Check the registered email.

7. Ready! We test the application sign in and profile view. Auth0 documentation is available at https://auth0.com/docs.

The application repository is available at https://github.com/rodrigokamada/react-auth0.

This tutorial was posted on my blog in portuguese.

--

--

--

👨‍💻 Software Developer | ✍️ Technical Content Creator | 🤝 Open Source Contributor | 🙌 Ambassador

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Static hosting Angular project in azure blob storage with Azure DevOps integration

CodeWars Fundamentals: Remove the Minimum

The story behind dgtal.id tech

Demystifying Rxjs Observable

6 Programming Mistakes That Will Make You a Better Developer

Top 10 Lottie loaders to use in your next react native project.

loading gifs

Using useContext and useReducer together: Let’s create ‘Redux-like’ global state in React

Create Memes Generator with NodeJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rodrigo Kamada

Rodrigo Kamada

👨‍💻 Software Developer | ✍️ Technical Content Creator | 🤝 Open Source Contributor | 🙌 Ambassador

More from Medium

React app with Koa JS

Learn Fetch API with React Hooks By Building a simple application

Authentication and Authorization with JWTs in Node && Express.js

Register Insomnia

How to use Nodemon in Loopback 4 NodeJs Project