johnnyhicks95/react-jwt-auth

React JWT Authentication (without Redux) example

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

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.

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

React Component Diagram with Router, Axios & LocalStorage

For more detail, please visit:

React (without Redux) JWT Authentication & Authorization example

React Redux JWT Authentication & Authorization example

In-depth Introduction to JWT-JSON Web Token

React.js CRUD example to consume Web API

React File Upload with Axios and Progress Bar to Rest API

Fullstack (JWT Authentication & Authorization example):

React + Spring Boot

React + Node.js Express

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

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.

johnnyhicks95 / react-jwt-auth