Skip to main content

How to Implement JWT Authentication in React

Add a simple JWT authentication to a React Template

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: 

$ git clone https://github.com/creativetimofficial/soft-ui-dashboard-react.git
$ cd soft-ui-dashboard-react
$
$ yarn       # install dependencies
$
$ yarn start # start for development
$
$ yarn build # production build

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