How to Implement React User Idle Timeout

User idle detection is an essential part when it comes to securing web applications. In this tutorial, we are going to cover what is user idleness and how we can detect user idle in react step by step.

What is User Idle?

User Idle is the amount of time the user is inactive and not performing any actions in the web application or away from the computer.

Use cases of User Idle Detection

The two major use cases of user idleness are security and performance reasons.

1. Security reasons:

The web application is very easily vulnerable to security attacks. The longer the user system is idle, the easier the hacker can inject malicious code or hijack the logged-in user’s session. In these cases, if we use user idle detection to log out the user if they are idle that will add security to our web application and prevents hijacking.

2. Performance:

User Idle detection helps to handle performance-related scenarios. Imagine, if we are making an API call to get data every 30 sec for live updates, then if the user is idle, we should stop making API call.

How to Detect User Idle in Web Application?

To detect user idle in the browser, listen for browser DOM events. We can run a timer using setInterval method, If no DOM events are triggered during that interval we can log out or show a popup for the user. On the other hand, for each DOM event that happens, we can reset the timer to run again.

How to Handle User Idle Detection in ReactJS?

To detect user idleness in ReactJS, there’s a popular NPM package available called use-bn-idle.

Install use-bn-idle Package

npm install --save use-bn-idle

The use-bn-idle package exports the custom hook useBnIdle by using that we can detect the user idleness in react applications.

Listen for User Idleness/Session Timeout in React Component

Import the following code on top of your component:

// import in your component
import {useBnIdle} from 'use-bn-idle';

Inside your functional component, use the useBnIdle hook which accepts a callback function that emits if the user is idle for a certain time. The useBnIdle returns an array of functions startTimer and stopTimer, using those methods we can start/stop the user idle detection timer.

import {useBnIdle} from 'use-bn-idle';

const App = () => {
    const [startTimer, stopTimer] = useBnIdle(() => {
      //Will execute if the user is idle for a certain period of time.
      //You can write logic like showing popup or log out the user.
      console.log('Expired: Session Timeout');
    })
      
    useEffect(() => {
      // start the user idle detection
      startTimer(60); //passed 60 seconds as argument.
    })

    return <div>
      <button onClick={stopTimer}>Stop Detection</button>
    </div>
}

The above code snippet is an example of how you can detect a user idle in react web application. The startTimer the method accepts a time parameter in seconds, we have passed 60 seconds. So after one minute, if the user is idle, then our callback function inside useBnIdle will be triggered.

Inside the callback function, you can handle the logic like auto logout, triggering popup, etc based on your requirement. For brevity, I just logged the text in the callback function.

In some cases, based on requirements you may need to restart the timer. For such cases, you can invoke the startTimer(seconds) method again which will restart the timer again.

Under the Hood – User Idle/Session Timeout Logic in React

In-depth, the use-bn-idle package is written as a react hook to listen for various DOM events like mouse move, click, resize, etc.

A timer will run once you invoke the startTimer method, if a DOM event is triggered, the timer gets restarted automatically inside the package.

If there’s no DOM event triggered for the specified time, the callback function invokes to indicate the user idleness.

• Learn how to handle user idle detection in Angular.

Conclusion

In this tutorial, we have covered how to detect user idle in react application. I hope, you got a solution for your react application to handle session timeout (session expired) based on user idleness/user inactivity. If you need any help on user idle integration in ReactJS, feel free to ask in the comment below.