JWT Authentication with React Application

“As an application developer, we are concerned with authentication and security. We will explore one of the widely used security mechanism that is JWT(JSON Web Token). I will try to explain the key benefits and will discuss the issues most of the developer’s tackle while using JWT.”

# LET’s start with the basics:

JWT is a JSON based authentication technique that is helpful for securely transmitting information between different parties in an application system.

JWT transition between application system

Let’s see how exactly it works will take the example of the above diagram to understand it. when the user login (i.e the react app sends the login request) and if the user is valid the node server returns a Jwt token that has some expiration time. This token received by react application is further used to access the protected resources (e.g API, pages). The react application is not allowed to access the protected resources without the valid token.

# Now after the basis lets start building our react app.

To build the application we are using node with express-server as backend and MongoDB as our database to store the users, before we start you should install MongoDB you can use any to the database of your choice i.e MySQL, Postgresql, SQLite.Once you are done we are ready to start.

Setting Up Application

Let's create two folders with the name client and server. The client folder will contain our front-end part (i.e react app) and the server will serve as the back-end.

• Client

Navigate to the client folder and the below mention command on the terminal.

npx create-react-app .

Note: Don’t forget to mention the dot it symbolizes the current directory.

The above command will initialize the react application in client dir. We will require a react-router to navigate to different links within our application. This can be installed by the below command.

npm i react-router-dom

Let's react to some of the routes and their respective pages. For a demo, we will create the following page.

• home
• login
• logout
• secret

and further, map it with respective routes as shown in the App.js file below.

Further, we will require an Auth guard (Higher Order Component) that will serve the purpose of Authenticating the resources or page.

This will allow only the authenticated user to access the page.

OK, so far we are done with setting up our client.

• Server

To set up the server, navigate to the server directory and run the below command one after the other.

npm init -y          // This will initilaize the npm repo
npm i express        // Install express server
npm i mongoose       // For mongoDB connectivity
npm i jsonwebtoken   // For generating JWT

There are some dependencies which we will require that are mention in package.json file. In the end, your package.json file looks the one below.

We are using nodemon for live reloading of our application in dev env. Now let's start building our Node APIs that will allow the user to Register, Authenticate. I have set up the express server and added some API to it as below.

OK, so we are done with the server and client.

let's start our server and client with the following commands.

To start the client:

cd client
npm run start

For server,

cd server
npm run start

This will start your application at http://localhost:3000. You can directly download or refer to our git repo for reference.

IshantL/react-node-jwt-demo

pank05 - Overview

In the end, this how your project looks like.

Application demo

Thanks, Ishant for helping me to create this project. You can follow us on LinkedIn and Medium for more interesting Updates.

Happy Coding !!!

Ishant Lambhate - Technical Consultant - Amazon | LinkedIn

Pankaj Purke - Associate Technology - Kratin LLC | LinkedIn