DEV Community

Cover image for Authentication & Authorization with React.js example
Tien Nguyen
Tien Nguyen

Posted on • Edited on

32 5

Authentication & Authorization with React.js 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

Inside tutorial, you can also find Nodejs or Spring Boot backend that works well with this React Client:

  • one working with MySQL/PostgreSQL
  • and one working with MongoDB

Using HttpOnly Cookie to store JWT:
React Login and Registration example with JWT and HttpOnly cookie

Overview of React 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-jwt-authentication-signup

– Form Validation Support:

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-validation

– Login Page:

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-login

– Profile Page (for successful Login):

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-profile-page

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

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-authorization-login

– Check Browser Local Storage:

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-localstorage

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.

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-flow

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

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

Or React + Spring Boot JWT Authentication & Authorization demo:

React Component Diagram with Router, Axios & LocalStorage

Let’s look at the diagram below.

https://bezkoder.com/wp-content/uploads/2020/03/react-jwt-authentication-project-overview

If you want to use React Hooks for this example, you can find the implementation at:
React Hooks: JWT Authentication (without Redux) example

Using HttpOnly Cookie to store JWT:
React Login and Registration example with JWT and HttpOnly cookie

Or Redux for state management:
React Redux: JWT Authentication & Authorization example

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

Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

Top comments (3)

Collapse
 
erantona profile image
SUVENDU ROY

Nice

Collapse
 
tienbku profile image
Tien Nguyen

Thanks! :) And Merry Christmas!

Collapse
 
muratx10 profile image
Murat

Is it safe to store the JWT in localStorage?

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay