/react-redux-jwt-auth

React Redux: Token Authentication example with JWT, React Router, Axios, Thunk Middleware

Primary LanguageJavaScript

React Redux JWT Authentication & Authorization example

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.

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.