How can I implement session timeout in a React application?

How can I implement session timeout in a React application?

You can implement session timeout in a React app by using a combination of state management and timers. Would you like a code example?

Yes, please provide a code example.

Sure! You can use the setTimeout function to log the user out after a specified period of inactivity. Here's a simple example:

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const timer = setTimeout(() => {
      alert('Session timed out!');
      // Add your logout logic here
    }, 300000); // 5 minutes

    return () => clearTimeout(timer);
  }, []);

  return <div>Your app content here</div>;
};

export default App;

What if I want to reset the timer when the user interacts with the app?

You can reset the timer by adding event listeners for user interactions like mouse movements or key presses. Here's how you can do it:

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    let timer;

    const resetTimer = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        alert('Session timed out!');
        // Add your logout logic here
      }, 300000); // 5 minutes
    };

    window.addEventListener('mousemove', resetTimer);
    window.addEventListener('keypress', resetTimer);

    resetTimer(); // Start the timer initially

    return () => {
      clearTimeout(timer);
      window.removeEventListener('mousemove', resetTimer);
      window.removeEventListener('keypress', resetTimer);
    };
  }, []);

  return <div>Your app content here</div>;
};

export default App;