This article explains how to add User Authentication to React using JSON Web Tokens (JWT). We will start using an open-source template and mention all implementation steps that enhance the codebase. In the end, the project will be able to register and authenticate users using an open-source
Node JS API Server that exposes authentication routes and manages the persistence in the same way as this Free React Product. Thanks for reading!
In order to make this article more useful, at the end a shortlist of open-source React Apps already enhanced with JWT Authentication is mentioned. Topics covered:
- ✅ #1:
Clone the React Template
- ✅ #2:
- ✅ #3:
Code the APIfor backend communication
- ✅ #4: Code the
React Store(frontend persistence)
- ✅ #5: Code the
- ✅ #6: Start the
Node JS APIBackend
- ✅ #7: Start the
React UIand test the authentication
- ✅ #8:
- ✅ #9: Links & Resources
✨ #1 - Download the React Template
The template used in this article is React Soft Dashboard, an open-source product crafted by Creative-Tim and the source code can be downloaded from the product page. In case this design is not what you're looking for, feel free to use another one and adapt the code instructions to the new structure.
To successfully compile and run the project, the workstation should have a decent version of Node JS (12.x or above), GIT, and a modern code editor like VsCode or Atom. Here are the steps to compile the template using the source code published on Github:
👉 Step #1 - Clone sources using GIT
👉 Step #2 - Install modules
👉 Step #3 - Start for development (with LIVE reload)
✨ #2 - Analyze the Codebase
After the download, the first logical step is to look around and see how the project is structured.
- Detect master pages (layouts)
- Locate the authentication pages: SignIN, Register.
Sometimes, such pages aren't provided but in this case, we can use the default versions shipped by the template.
✨ #3 - Code the Client API
This section presents the necessary code that provides network communication with the API backend using Axios, a popular HTTP client. For newcomers, Axios is a library executable on the client and server side (Node JS) using the same codebase. For more information about Axios, feel free to access the official docs or play with the free samples. Let's move forward and code our simple API interface:
👉 Step #1 - Create a
configurationfile used by the API
The file defines all the constants used in different places and contexts. For now, we need only the
👉 Step #2 - Create a new folder
👉 Step #3 - Create an
index.jsfile with API configuration
👉 Step #4 - Create
auth.jsthat contains all API calls
At this point, our
client-side API is coded and configured to communicate with the backend.
✨ #4 - Code the React Store
In many React Apps, you will find that their store is based on
React-Redux . Here we use React Context. We need to create the store in order to keep track of the user's account and determine whether we should allow the user on certain pages if they are not logged in.
👉 Step #1 - Create a new
src/context/auth.context.js will contain the following code:
👉 Step #2 - Bind together
Context Providerand the
👉 Step #3 - Define protected Routes
We need this feature in order to redirect guest users to authenticate before accessing the private pages (dashboard, profile page..).
Below we have 2 examples of both protected and unprotected routes:
✨ #5 - Code the Auth Flow
After you have identified the Auth Components you can start creating the Authentication process We'll take the
Login Component as an example:
On success (
user credentials are good)
setProfile helper is called to save the user information in the app store.
The above code snippet extracts and saves the
JWT Token for later use (logout, user profile request).
✨ #6 - Start the Node JS API
The Node JS Backend server is a simple one that exposes three API methods called from React, via
👉 SignUP Method -
👉 SignIN Method -
👉 Logout Method -
👉 Step #1 - Clone the sources
👉 Step #2 - Install dependencies via NPM or Yarn
👉 Step #3 - Run the
👉 Step #4 - Start the API server (development mode)
At this point, the API server should be up and running on port
5000, the same port expected by the
React UI in the configuration (Section #3).
✨ #7 - Start React Soft Dashboard
All the above sample code can be found and downloaded from GitHub under the MIT License and used for commercial or learning projects. Let's access the public repository and compile the React UI by following the instructions provided in the README file.
- 👉 React Soft Dashboard - (full-stack version) source code
- 👉 React Soft Dashboard - (full-stack version) LIVE Demo
Here are the necessary steps to download and compile Soft Dashboard React:
At this point, we should be able to visit the app in the browser on port
3000 , register new users, authenticate and interact with the UI.
✨ #8 - More Open-source Samples
In case Soft UI design is not the design you are looking for, we have other samples mentioned below that come with an identical authentication flow (login, logout, register) powered by JWT.
Berry is a creative React Dashboard build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard with an easy and intuitive responsive design as on retina screens or laptops.
Purity UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, and alerts, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using Chakra's style props.
✨ #9 - Links & Resources
Authentication is an important feature for any product and JWT Authentication especially implemented in the right way will make an end-product more secure and reliable in front of the end users. Here are some links related to this topic: