ReactJs JWT Authentication example
Tags: react, jwt, todayisearched, authentication
Published: 2021-01-10 02:27:08

Full Article: [https://bezkoder.com/react-jwt-auth/](https://bezkoder.com/react-jwt-auth/)

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

**Note**: The tutorial is for learning purpose. Better practice is to store JWT in HttpOnly cookie:
[React.js Login & Registration example – JWT & HttpOnly Cookie](https://www.bezkoder.com/react-login-example-jwt-hooks/)

Or using Redux for state management:
<a href="https://www.bezkoder.com/redux-toolkit-auth/">React Redux: JWT Authentication & Authorization example</a>

## Overview of ReactJs 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:

![reactjs-jwt-authentication-token-example-signup](https://dev-to-uploads.s3.amazonaws.com/i/qi9jnomvx8rhtpcwxn2c.png)

– Signup failed:

![reactjs-jwt-authentication-token-example-signup-email-duplicate](https://dev-to-uploads.s3.amazonaws.com/i/29glpi1hkkjha9r1k3f0.png)

– Form Validation Support:

![reactjs-jwt-authentication-token-example-form-validation](https://dev-to-uploads.s3.amazonaws.com/i/2mqrlvr0mefez74ggts3.png)

– Login Page:

![reactjs-jwt-authentication-token-example-login](https://dev-to-uploads.s3.amazonaws.com/i/zdya3j6wofa1p6p04su2.png)

– Profile Page (for successful Login):

![reactjs-jwt-authentication-token-example-profile-page](https://dev-to-uploads.s3.amazonaws.com/i/df5v88t9pimjv1vss9g2.png)

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

![reactjs-jwt-authentication-token-example-authorization-login](https://dev-to-uploads.s3.amazonaws.com/i/cny05u9va48oaeomy662.png)

– Check Browser Local Storage:

![react-redux-jwt-authentication-token-example-local-storage](https://dev-to-uploads.s3.amazonaws.com/i/ftb9bzu540ukjhdg3y2k.png)

## 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.

![reactjs-jwt-authentication-token-example-flow](https://dev-to-uploads.s3.amazonaws.com/i/gqmaudsppx48t7zdv16h.png)

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 %}

<h2><span id="React_Component_Diagram">ReactJs JWT Authentication Component Diagram</span></h2>
Let's look at the diagram below.

![reactjs-jwt-authentication-token-example-components](https://dev-to-uploads.s3.amazonaws.com/i/snnsy7olf6kir3gc313m.png)

- The <code>App</code> component is a container with React Router (<code>BrowserRouter</code>). Basing on the state, the navbar can display its items.

- <code>Login</code> & <code>Register</code> components have form for data submission (with support of <code>react-validation</code> library). They call methods from <code>auth.service</code> to make login/register request.

- <code>auth.service</code> methods use <code>axios</code> to make HTTP requests. Its also store or get <strong>JWT</strong> from Browser Local Storage inside these methods.

- <code>Home</code> component is public for all visitor.

- <code>Profile</code> component displays user information after the login action is successful.

- <code>BoardUser</code>, <code>BoardModerator</code>, <code>BoardAdmin</code> components will be displayed by state <code>user.roles</code>. In these components, we use <code>user.service</code> to access protected resources from Web API.

- <code>user.service</code> uses <code>auth-header()</code> helper function to add JWT to HTTP header. <code>auth-header()</code> returns an object containing the JWT of the currently logged in user from Local Storage.  

<h2><span id="Project_Structure">Project Structure</span></h2>
This is folders & files structure for this React application:

![reactjs-jwt-authentication-token-example-project-structure](https://dev-to-uploads.s3.amazonaws.com/i/ew8zygr6u3ygs77d38al.png)

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

**Note**: The tutorial is for learning purpose. Better practice is to store JWT in HttpOnly cookie:
[React.js Login & Registration example – JWT & HttpOnly Cookie](https://www.bezkoder.com/react-login-example-jwt-hooks/)

Or using Redux for state management:
<a href="https://www.bezkoder.com/redux-toolkit-auth/">React Redux: JWT Authentication & Authorization example</a>