Authentication & Authorization with React.js example
Tags: react, webdev, node, javascript
Published: 2020-12-25 07:03:10

In this tutorial, we’re gonna build a React JWT Authentication example with LocalStorage, React Router, Axios and Bootstrap (without Redux). I will show you:
- JWT Authentication Flow for User Signup & User Login
- Project Structure for React JWT Authentication (without Redux) with LocalStorage, React Router & Axios
- Creating React Components with Form Validation
- React Components for accessing protected Resources (Authorization)
- Dynamic Navigation Bar in React App

Inside tutorial, you can also find Nodejs or Spring Boot backend that works well with this React Client:
- one working with MySQL/PostgreSQL
- and one working with MongoDB

Using HttpOnly Cookie to store JWT:
[React Login and Registration example with JWT and HttpOnly cookie](https://bezkoder.com/react-login-example-jwt-hooks/)

## Overview of React JWT Authentication example
We will build a React application in that:
- There are Login/Logout, Signup pages.
- Form data will be validated by front-end before being sent to back-end.
- Depending on User’s roles (admin, moderator, user), Navigation Bar changes its items automatically.

Here are the screenshots:
– Signup Page:

![react-jwt-authentication-signup](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-signup.png "react-jwt-authentication-signup")

– Form Validation Support:

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-validation](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-validation.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-validation")

– Login Page:

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-login](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-login.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-login")

– Profile Page (for successful Login):

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-profile-page](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-profile-page.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-profile-page")

– For Moderator account login, the navigation bar will change by authorities:

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-authorization-login](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-authorization-login.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-authorization-login")

– Check Browser Local Storage:

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-localstorage](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-localstorage.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-localstorage")

## User Registration and User Login Flow
For JWT Authentication, we’re gonna call 2 endpoints:

- POST api/auth/signup for User Registration
- POST api/auth/signin for User Login
- The following flow shows you an overview of Requests and Responses that React Client will make or receive. This React Client must add a JWT to HTTP Header before sending request to protected resources.

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-flow](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-flow.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-flow")

You can find step by step to implement these back-end servers in following tutorial:

- [Spring Boot JWT Authentication with Spring Security, MySQL](https://bezkoder.com/spring-boot-jwt-authentication/)
- [Spring Boot JWT Authentication with Spring Security, PostgreSQL](https://bezkoder.com/spring-boot-security-postgresql-jwt-authentication/)
- [Spring Boot JWT Authentication with Spring Security, MongoDB](https://bezkoder.com/spring-boot-jwt-auth-mongodb/)
- [Node.js JWT Authentication & Authorization with MySQL](https://bezkoder.com/node-js-jwt-authentication-mysql/)
- [Node.js JWT Authentication & Authorization with MongoDB](https://bezkoder.com/node-js-mongodb-auth-jwt/)
- [Node.js JWT Authentication & Authorization with PostgreSQL](https://bezkoder.com/node-js-jwt-authentication-postgresql/)

## Demo Video
This is full React + Node.js Express JWT Authentication & Authorization demo (with form validation, check signup username/email duplicates, test authorization with 3 roles: Admin, Moderator, User):

{% youtube tNcWX9qPcCM %}

Or React + Spring Boot JWT Authentication & Authorization demo:

{% youtube CsgtYvlR7xk %}

## React Component Diagram with Router, Axios & LocalStorage
Let’s look at the diagram below.

![https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-project-overview](https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-project-overview.png "https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-project-overview")

If you want to use React Hooks for this example, you can find the implementation at:
[React Hooks: JWT Authentication (without Redux) example](https://bezkoder.com/react-hooks-jwt-auth/)

Using HttpOnly Cookie to store JWT:
[React Login and Registration example with JWT and HttpOnly cookie](https://bezkoder.com/react-login-example-jwt-hooks/)

Or Redux for state management:
[React Redux: JWT Authentication & Authorization example](https://bezkoder.com/react-redux-jwt-auth/)

For more details, implementation and Github, please visit:
[https://bezkoder.com/react-jwt-auth/](https://bezkoder.com/react-jwt-auth/ "https://bezkoder.com/react-jwt-auth/")