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
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:
– Form Validation Support:
– Login Page:
– Profile Page (for successful Login):
– For Moderator account login, the navigation bar will change by authorities:
– Check Browser Local Storage:
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.
You can find step by step to implement these back-end servers in following tutorial:
- Spring Boot JWT Authentication with Spring Security, MySQL
- Spring Boot JWT Authentication with Spring Security, PostgreSQL
- Spring Boot JWT Authentication with Spring Security, MongoDB
- Node.js JWT Authentication & Authorization with MySQL
- Node.js JWT Authentication & Authorization with MongoDB
- Node.js JWT Authentication & Authorization with 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):
Or React + Spring Boot JWT Authentication & Authorization demo:
React Component Diagram with Router, Axios & LocalStorage
Let’s look at the diagram below.
If you want to use React Hooks for this example, you can find the implementation at:
React Hooks: JWT Authentication (without Redux) example
Using HttpOnly Cookie to store JWT:
React Login and Registration example with JWT and HttpOnly cookie
Or Redux for state management:
React Redux: JWT Authentication & Authorization example
For more details, implementation and Github, please visit:
https://bezkoder.com/react-jwt-auth/
Top comments (3)
Nice
Thanks! :) And Merry Christmas!
Is it safe to store the JWT in localStorage?