Sometimes, a user logs in to your application and forgets to logout. Let’s assume there are lots of sensitive information about the user on your application e.g personal information or transactions data. This leaves the user data vulnerable.

As a developer, you are to develop a solution that detects user inactiveness on your application. This solution is to help logout users whenever they are not making use of the application.

In this tutorial, we’re going to build the frontend using react and its hooks. Following the steps should give you a better understanding when working on either Vue or Angular.

Let’s get started!

Before we continue, please note that this tutorial assumes you have a basic understanding of react and react hooks. If not, kindly find available resources that’ll guide you through and come back here.

First, Let’s start by creating a javascript file in your component folder e.g SessionTimeout.js

To make things faster for us, let’s import all the things we need for the tutorial. You’ll need to install moment.

npm install moment --save

import React, {
  useState,
  useEffect,
  useCallback,
  useRef,
  Fragment,
} from 'react';
import moment from 'moment';

const SessionTimeout =()=> {
  return <Fragment />;
};

export default SessionTimeout;

#react #reactjs #javascript