For more detail, please visit:

React Redux JWT Authentication & Authorization example

React Hooks + Redux: JWT Authentication & Authorization example

React JWT Authentication & Authorization (without Redux) example

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

This project was bootstrapped with Create React App.

.env

PORT=8081 

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 {}; } }

In the project directory, you can run:

npm install # or yarn install 

or

npm start # or yarn start 

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

The page will reload if you make edits.