How to Implement JWT Authentication in React

This page explains how to update a React Template to support authentication using the JWT strategy. After the update, the project will have the following features: 
Guest users are redirected to authenticate
Users are able to authenticate using a registered account
Users are able to register new accounts
Users are able to logout from the application
The App will use an open-source Node JS Backend published on Github - Product features:
​API Definition - the unified API structure implemented by this server
Simple, intuitive codebase - can be extended with ease.
TypeScript, Joy for validation
Stack: NodeJS / Express / SQLite / TypeORM
Auth: Passport / passport-jwt strategy
​
Used Template: Soft UI React
Soft UI Dashboard is an open-source React Dashboard template crafted by Creative-Tim on top of M-UI (ex. Material-UI), the most popular components library for React. The product can be downloaded from the official product page but also directly from Github and compiled in a local environment: 
1
$ git clone https://github.com/creativetimofficial/soft-ui-dashboard-react.git
2
$ cd soft-ui-dashboard-react
3
$
4
$ yarn       # install dependencies
5
$ 
6
$ yarn start # start for development 
7
$
8
$ yarn build # production build 
Copied!
In order to make this template a real app enhanced with a usable JWT authentication flow, we will make a few changes over the codebase:
#1 - Update Dependencies
Add formik
#2 - Code the Guard component
#3 - Define  the app store to handle the persistence on the client-side 
@Todo
@Todo
​
1# - Update Dependencies
@ToDo
2# - Code Auth Guard Component
@Todo
​

Flask Azure Deployment

Next - Content

Tutorials

Last modified 8mo ago

Copy link

Contents

Used Template: Soft UI React

1# - Update Dependencies

2# - Code Auth Guard Component