How to verify JWT Token Expiry in React/Next

Egnoel — Mon, 13 May 2024 22:28:10 +0000

Introduction:
JSON Web Tokens (JWT) are a popular method for authentication in web applications. One critical aspect of using JWT is verifying their expiry to maintain application security. In this tutorial, we'll walk through how to verify JWT token expiry in a React/Next.js app, ensuring that our application remains secure.

Prerequisites:
Before we begin, ensure you have the following:

Node.js + Express.js and JSON web token for the backend.
React and Next.js for the frontend.

Setting up Token Expiry in the Node/Express Backend:
In our Node/Express backend, let's build a simple login controller with expiration time for our token. Here's an example code snippet:

const login = async (req, res) => {
  try {
    const { email, password } = req.body;
    const user = await User.findOne({ email });
    if (!user) {
      return res.status(404).send({ message: 'User not found' });
    }
    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) {
      return res.status(404).send({ message: 'Incorrect password' });
    }
    const token = jwt.sign({ _id: user._id }, process.env.SECRET, {
      expiresIn: 86400, // expires in 24 hours
    });
    res.status(200).send({ token, user });
  } catch (error) {
    res.status(404).send({ message: error.message });
  }
};

Verifying Token Expiry in the React/Next.js Frontend:
In our React/Next.js frontend, let's use the jwt-decode library to check token expiry. Here's how you can do it:
Firstly, we need to install the library:

npm install jwt-decode or yarn add jwt-decode

Then, let's import and use it, like this:

import jwtDecode from 'jwt-decode';

const isTokenExpired = (token) => {
  if (!token) return true;
  try {
    const decodedToken = jwtDecode(token);
    const currentTime = Date.now() / 1000;
    return decodedToken.exp < currentTime;
  } catch (error) {
    console.error('Error decoding token:', error);
    return true;
  }
};

Handling Expired Tokens:
When a token is expired, we need to remove it from local storage and redirect the user to the login page. Like so:

useEffect(() => {
  if (localStorage.getItem('token')) {
    const token = localStorage.getItem('token');
    if (isTokenExpired(token)) {
      localStorage.removeItem('token');
      router.push('/login');
    } else {
      setUser(JSON.parse(localStorage.getItem('user')));
    }
  } else {
    router.push('/login');
  }
}, [router]);

Security Considerations:
It's crucial to handle JWT tokens securely. Consider using secure storage mechanisms and validating tokens on the server side to prevent security vulnerabilities.

Conclusion:
By verifying JWT token expiry in our React/Next.js app, we can ensure that the application remains secure against unauthorized access. Implementing token expiry checks is a critical step in maintaining the integrity of the authentication system.

Additional Resources:

Creating a Simple TodoApp with React and TypeScript

Egnoel — Tue, 22 Feb 2022 15:44:22 +0000

Hello Everyone, in this post we will se how to create a simple todo app using reactjs, typescript with vite as our initializer

Pre-requisites

Nodejs installed on your machine
Basic knowledges of html, css
Visual studio code

Step 1: creating our app

go to your preferred folder (your projects folder)
open the terminal in there and write:



$ npm create vite@latest React-Todo -- --template react-ts 

$ cd React-Todo #enter directory

$ npm install #to install dependencies

$ code .

Step 2: editing our app

Inside Visual studio code, our folder structure will be like this

Delete the selected elements because we wont need them.
Also, inside App.tsx we will remove all the unnecessary things and start everything from scratch.
Heres how the app will look

One thing to note is that the files extension are tsx or ts, which means they are typescript files.
Now we will format our App function to be as the typescript standard.
Change function App(){ to const App:React.FC = () =>{
React.FC indicates that the App is a functional component.

Now let's create the elements that will be rendered in the browser.
We will have two divs inside the initial div. One will be the header that will contain the inputs and button that will permit us to add a todo.
The second div will be the list of todos and will allow us to delete a specific todo.

Now we need a way to retrive the data that are been passed in the input fields, for that we will use useState.
First let's import it: import {useState} from 'react'
In this project we only have two inputs so we will have separate states for them.
Inside the App let's declare variables that catch the input states and let's add field value inside input tag.

Now let's create the todoList state, this state will have the above states that we created. Because those states have different types (string and number), we will have to use something called Interface that will have the types that todoList state will have.
For organization we will have the interface in another file and then import it to the App.
In the src folder, create a file with the name Interfaces.ts.

Now it's time to handle the events, we want to store what the user is writing.
We will create a function HandleChange that will monitor the values in the input fields and store them.
For that we will use a react built-in called ChangeEvent that is of type HTMLInputElement.

Note: Everything that the user input is string, we have to convert it to the type that we want. In this case the deadLine to number.

Now let's create the addtask function that will be used every time the user clicks in the Add button.

We are done with the header for now, let's move to the todoList div. We will implement the methods for us to be able to see in the page all tasks that were introduced.
We will iterate through all the tasks and render them in the page.
First lets create a component that will be responsible to render the tasks.
In src folder, create a folder named Components and inside create a file TodoTask.tsx
In this component we will have a interface that receives the one that we already created. We will also in this function handle the event when the user clicks in X button to delete a task.

Now lets import it to the App file and create the completeTask method.
This function will receive the name of the task we want to delete (mark as completed) as a parameter and return all tasks except it.

Step 3: Style our App

For the style you can go to my gitHub and copy and paste all the style to the file App.css

Final thoughts

We now have a full front-end Todo app with React using typeScript.
We saw some basic things like states, components and interfaces.
This is just the beginning, we can do many beautiful things with React.

Feel free to contact me:
Instagram
Twitter
Linkedin
GitHub