Idle Session Time out in React

A web app session is one of the most critical security concerns for a developer to guard against intruders. Unauthenticated access can lead to N number of threats. Furthermore, considering a scenario of polling data from the backend in an idle scenario would unnecessarily keep the server busy. Thus, a smartly planned “Idle Time-Out” can offer reliable confidence to the developer as well as the end-user.

In this article, we will take React as the base framework to implement the same. However, the business logic can also be used in other popular UI frameworks such as Angular and Vue.JS.

So let's get started!!

Approach

The session will be handled by a logical clock monitoring the user’s interaction with the application. There will be a prefixed time value stored in the session which will be used as a threshold value for the system idle time.

As soon as this threshold value matches the system idle time, the user will be prompted to choose between two options: log out from the application or continue the session. If the user wishes to keep the current session, the logical clock will be reset to 0.