Authentication & Authorization with React.js example

Tien Nguyen - Dec 25 '20 - - Dev Community

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:

react-jwt-authentication-signup

– Form Validation Support:

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

– Profile Page (for successful Login):

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

– Check Browser Local Storage:

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

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

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.

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

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/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .