React Redux JWT Authentication & Authorization example

Build a React Redux Token Authentication example with JWT, LocalStorage, React Router, Axios and Bootstrap:

• JWT Authentication Flow for User Signup & User Login
• Project Structure for React Redux JWT Authentication, LocalStorage, Router, Axios
• Working with Redux Actions, Reducers, Store for Application state
• Creating React Components with Form Validation
• React Components for accessing protected Resources (Authorization)
• Dynamic Navigation Bar in React App

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.

For more detail, please visit:

React Redux JWT Authentication & Authorization example

React - How to Logout when Token is expired

React Hooks + Redux: JWT Authentication & Authorization example

React JWT Authentication & Authorization (without Redux) example

This project was bootstrapped with Create React App.

Set port

.env

PORT=8081

Note:

Open src/services/auth-header.js and modify return statement for appropriate back-end (found in the tutorial).

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem('user'));

  if (user && user.accessToken) {
    // return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
    return { 'x-access-token': user.accessToken };             // for Node.js Express back-end
  } else {
    return {};
  }
}

Project setup

In the project directory, you can run:

npm install
# or
yarn install

or

Compiles and hot-reloads for development

npm start
# or
yarn start

Open http://localhost:8081 to view it in the browser.

The page will reload if you make edits.

Related Posts

In-depth Introduction to JWT-JSON Web Token

React.js CRUD example to consume Web API

React Redux CRUD App example with Rest API

React Pagination example

React File Upload with Axios and Progress Bar to Rest API

Fullstack (JWT Authentication & Authorization example):

React + Spring Boot

React + Node.js Express

Fullstack CRUD with Node.js Express:

React.js + Node.js Express + MySQL

React.js + Node.js Express + PostgreSQL

React.js + Node.js Express + MongoDB

Fullstack CRUD with Spring Boot:

React.js + Spring Boot + MySQL

React.js + Spring Boot + PostgreSQL

React.js + Spring Boot + MongoDB

Fullstack CRUD with Django:

React.js + Django Rest Framework

Integration (run back-end & front-end on same server/port)

How to integrate React.js with Spring Boot

Integrate React with Node.js Express on same Server/Port

Serverless:

React Firebase CRUD App with Realtime Database

React Firestore CRUD App example | Firebase Cloud Firestore