DEV Community

Cover image for React Redux: Token Authentication example with JWT & Axios
bezkoder
bezkoder

Posted on • Updated on • Originally published at bezkoder.com

React Redux: Token Authentication example with JWT & Axios

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

– Signup failed:

react-redux-jwt-authentication-token-example-signup-email-duplicate

– Form Validation Support:

react-redux-jwt-authentication-token-example-form-validation

– Login Page:

react-redux-jwt-authentication-token-example-login

– Profile Page (for successful Login):

react-redux-jwt-authentication-token-example-profile-page

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

react-redux-jwt-authentication-token-example-authorization-login

– Check Browser Local Storage:

react-redux-jwt-authentication-token-example-local-storage

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

react-redux-jwt-authentication-token-example-redux-devtools-extension

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

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

React Component Diagram with Redux, Router, Axios

Let’s look at the diagram below.

react-redux-jwt-authentication-token-example-project-overview

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

Without Redux:
React JWT Authentication example

Top comments (0)