How to detect inactivity and auto-reset a React app

Background

Sometimes an application needs to be reset after a certain period of inactivity, for example, public apps on 'kiosk' tablets, or banking and finance applications. To keep user data private and secure we need to be able to safely reset these if a user accidentally leaves before properly exiting.

Here's a guide on how to make a simple react component that auto resets an application after one minute of inactivity. I am using Next.js but the same principles would work with Create React App and React Router Dom.

1. Create a whitelist (optional)

Create a list of all pages where you don't want to trigger an auto-reset. Or, if you only need a few pages to auto-reset, make a blacklist that only includes these pages.

1const whitelist = [
2  '/',
3  '/admin',
4  '/results',
5  '/profile'
6];

2. Create Component

Build the component, place it early in your app's component tree for the best results, ideally inside your top level App component or just inside your Redux Provider Component (if using one).

1import React from 'react'
2
3const whitelist = [
4  '/',
5  '/admin',
6  '/results',
7  '/profile'
8];
9
10const IdleTimer = () => {
11  return <div />; // must show something on the screem
12};

3. Call a function every time the page changes

We will set up a useEffect hook that watches for changes to the current page's pathname and executes the code inside it every time the page changes.

1import React from 'react'
2import { useRouter } from 'next/router';
3
4const IdleTimer = () => {
5  const router = useRouter();
6  
7  useEffect(() => {
8    // code here will run everytime the page changes
9  }, [router.pathname]); 
10  
11  return <div />;
12};

4. Stop the pages in your whitelist from executing

Inside the useEffect hook, set up a check to make sure the reset will only occur on the pages you want.

1  ...
2  useEffect(() => {
3    let preventReset = false;
4    for (const path of whitelist) {
5      if (path === router.pathname) {
6        preventReset = true;
7      }
8    }
9    if (preventReset) {
10      return;
11    }
12    /* 
13      code here will run everytime the page changes & the 
14      current page is NOT in the whitelist 
15    */
16  }, [router.pathname]);
17  ...

Or if you want to be fancy, you can do this with reduce

1  ...
2  useEffect(() => {
3    const preventReset = whitelist
4      .map(path => path === router.pathname ? 1 : 0)
5      .reduce((prev, curr) => prev + curr, 0)
6    if (preventReset) {
7      return;
8    }
9    /* 
10      code here will run everytime the page changes & the 
11      current page is NOT in the whitelist 
12    */
13  }, [router.pathname]);
14  ...

5. Create the timeout

We need to create a timer that will reset the app after a period of time.

So, at the top of the IdleTimer component, initiate a variable 'timeout' to which you will assign a Javascript timeout.

Note: we must assign the timeout to a variable in order to clear it and restart it each time user activity is detected.

1const IdleTimer = (props: Props) => {
2  const router = useRouter();
3  let timeout = null; // <- Javascript
4  // Typescript -> let timeout: NodeJS.Timeout | null = null 
5...

Then create a function inside the component to handle the reset timer. This will be called any time user activity is detected and starts the countdown again from zero.

1...
2  const restartAutoReset = () => {
3    if (timeout) {
4      clearTimeout(timeout);
5    }
6    timeout = setTimeout(() => {
7      // Insert your code to reset you app here
8    }, 1000 * 60); // 60 Seconds
9  };
10...

Make sure the timeout starts up at the beginning of each page load by putting it inside the usEffect hook under the whitelist code.

1  ...
2  useEffect(() => {
3    ...
4    if (preventReset) {
5      return;
6    }
7    
8    // initiate timeout
9    restartAutoReset();
10    
11  }, [router.pathname]);
12  ...

The IdleTimer component will now trigger your reset code exactly one minute after it mounts. The next step is to cancel and restart this timeout every time we detect user activity.

6. Listen for user activity

Now the last thing we need to do is listen for user activity and reset the timer if the user is still active.

We will achieve this by listening to the global onmousemove event.

Create the function that will fire every time the mouse moves and call the timer resetting function we created in the previous step.

1  const onMouseMove = () => {
2    restartAutoReset();
3  };

Now we must make sure that we start listening for mouse movement when the page loads and the IdleTimer component mounts.

Inside the **useEffect **hook, underneath the whitelist code and timeout initiation code, add an event listener that will fire every time mouse movement is detected.

1  ...
2  useEffect(() => {
3    ...
4    if (preventReset) {
5      return;
6    }
7    
8    // initiate timeout
9    restartAutoReset();
10    
11    // listen for mouse events
12    window.addEventListener('mousemove', _onMouseMove);
13    
14  }, [router.pathname]);
15  ...

The IdleTimer component will now trigger your reset code exactly one minute after the last detected mouse movement.

One more thing! The last thing we need to do is make sure we cancel the timeout and stop listening for mouse activity when the page changes and the component unmounts.

If we do not explicitly stop Javascript timeouts and event listeners they will just carry on running on the next pages and we'll end up initiating more and more of them and it will cause mayhem.

The fix is to include a cleanup function inside the useEffect hook that runs whenever the component is about to be unmounted from the screen. Here we will clear out the timer and mouse movement event listener.

1    ...
2    // inside useEffect hook
3    
4    // initiate timeout
5    restartAutoReset();
6
7    // listen for mouse events
8    window.addEventListener('mousemove', onMouseMove);
9
10    // cleanup
11    return () => {
12      if (timeout) {
13        clearTimeout(timeout);
14        window.removeEventListener('mousemove', onMouseMove);
15      }
16    };
17  }, [router.pathname]);
18  ...

The IdleTimer component will now trigger your reset code exactly one minute after the last detected mouse movement. It will clear itself and restart every time the user changes pages.

Completed code

1import { useEffect } from 'react';
2import { useRouter } from 'next/router';
3import { connect } from 'react-redux';
4
5const whitelist = [
6  '/',
7  '/admin',
8  '/results',
9  '/profile'
10];
11
12export const IdleTimer = () => {
13  const router = useRouter();
14  let timeout: NodeJS.Timeout | null = null;
15
16  const goBackToHome = () => {
17     // code to reset the application
18  };
19
20  const restartAutoReset = () => {
21    if (timeout) {
22      clearTimeout(timeout);
23    }
24    timeout = setTimeout(() => {
25      goBackToHome();
26    }, 1000 * 60);
27  };
28
29  const onMouseMove = () => {
30    restartAutoReset();
31  };
32
33  useEffect(() => {
34    // Whitelist certain pages
35    let preventResett = false;
36    for (const path of whitelist) {
37      if (path === router.pathname) {
38        preventReset = true;
39      }
40    }
41    if (preventReset) {
42      return;
43    }
44
45    // initiate timeout
46    restartAutoReset();
47
48    // listen for mouse events
49    window.addEventListener('mousemove', _onMouseMove);
50
51    // cleanup
52    return () => {
53      if (timeout) {
54        clearTimeout(timeout);
55        window.removeEventListener('mousemove', _onMouseMove);
56      }
57    };
58  }, [router.pathname]);
59  return <div />;
60};

There you have it! Hope you found this useful!