React Redux: Token Authentication example with JWT & Axios
Tags: react, redux, authentication, webdev
Published: 2020-12-18 03:33:45

In this tutorial, we’re gonna build a React + Redux Application for Token Authentication example with JWT, LocalStorage, React Router, Axios and Bootstrap. I will show you:
- 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

Inside tutorial, you can also find Spring Boot backend that works well with this React Client:
- one working with MySQL/PostgreSQL
- and one working with MongoDB

## Overview of React Redux 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-redux-jwt-authentication-token-example-signup](https://dev-to-uploads.s3.amazonaws.com/i/qi9jnomvx8rhtpcwxn2c.png)

– Signup failed:

![react-redux-jwt-authentication-token-example-signup-email-duplicate](https://dev-to-uploads.s3.amazonaws.com/i/29glpi1hkkjha9r1k3f0.png)

– Form Validation Support:

![react-redux-jwt-authentication-token-example-form-validation](https://dev-to-uploads.s3.amazonaws.com/i/2mqrlvr0mefez74ggts3.png)

– Login Page:

![react-redux-jwt-authentication-token-example-login](https://dev-to-uploads.s3.amazonaws.com/i/zdya3j6wofa1p6p04su2.png)

– Profile Page (for successful Login):

![react-redux-jwt-authentication-token-example-profile-page](https://dev-to-uploads.s3.amazonaws.com/i/df5v88t9pimjv1vss9g2.png)

– For Moderator account login, the navigation bar will change by authorities:

![react-redux-jwt-authentication-token-example-authorization-login](https://dev-to-uploads.s3.amazonaws.com/i/cny05u9va48oaeomy662.png)

– Check Browser Local Storage:

![react-redux-jwt-authentication-token-example-local-storage](https://dev-to-uploads.s3.amazonaws.com/i/ftb9bzu540ukjhdg3y2k.png)

– Check State in Redux using `redux-devtools-extension`:

![react-redux-jwt-authentication-token-example-redux-devtools-extension](https://dev-to-uploads.s3.amazonaws.com/i/jin3hsd49fxpa2paixi7.png)

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

![react-redux-jwt-authentication-token-example-flow](https://dev-to-uploads.s3.amazonaws.com/i/gqmaudsppx48t7zdv16h.png)

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

- [Spring Boot JWT Authentication with Spring Security, MySQL](https://bezkoder.com/spring-boot-jwt-authentication/)
- [Spring Boot JWT Authentication with Spring Security, PostgreSQL](https://bezkoder.com/spring-boot-security-postgresql-jwt-authentication/)
- [Spring Boot JWT Authentication with Spring Security, MongoDB](https://bezkoder.com/spring-boot-jwt-auth-mongodb/)
- [Node.js JWT Authentication & Authorization with MySQL](https://bezkoder.com/node-js-jwt-authentication-mysql/)
- [Node.js JWT Authentication & Authorization with MongoDB](https://bezkoder.com/node-js-mongodb-auth-jwt/)
- [Node.js JWT Authentication & Authorization with PostgreSQL](https://bezkoder.com/node-js-jwt-authentication-postgresql/)

## React Component Diagram with Redux, Router, Axios
Let’s look at the diagram below.

![react-redux-jwt-authentication-token-example-project-overview](https://dev-to-uploads.s3.amazonaws.com/i/0m0skxpbu722jo01zzks.png)

For more details, implementation and Github Source code, please visit:
[https://bezkoder.com/react-redux-jwt-auth/](https://bezkoder.com/react-redux-jwt-auth/ "https://bezkoder.com/react-redux-jwt-auth/")

Without Redux:
[React JWT Authentication example](https://bezkoder.com/react-jwt-auth/)