Implement idle timeout popup in React
Today we will show you how to implement idle timeout popup in React application.
You may need to develop/integrate the functionality to detect inactive users to auto logout in React. So in this article, we will look the small React Example to handle the auto logout. In other words, we can say session-based timeout example in react.js.
Checkout more articles on ReactJS
Demo Application
Steps to implement idle timeout popup in React
- Create a react app and install npm dependencies
- Prepare components for demo
- Write a logic to set idle timeout popup
- Output
1. Create a react app and install npm dependencies
Let’s create a react app using the create-react-app npm package. Run the following command to create a react app.
1 | npx create-react-app idle-timeout-popup-react |
For the demo, we will create components (Login & Dashboard) and handle the redirection using routing.
The complete guide of Routing in React.
- Routing in React JS
- URL Parameters with React Router
- Nested Routes in React JS
- Multiple parameters with React Router
- What’s new in React Router version 6
Here, we will use the following two libraries for this project.
- reactstrap for the modal popup and UI.
- react-idle-timer for the idle timeout.
Run the following command to install the above two libraries.
1 | npm i reactstrap bootstrap react-idle-timer |
2. Prepare components for demo
Now, we will simply create two different components such as Dashboard & Login. By clicking on the Login button, we will redirect to the Dashboard page and use the Logout button to return to the Login page.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.css'; import './index.css'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React from 'react'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Login from './Login'; import Dashboard from './Dashboard'; function App() { return ( <BrowserRouter> <div> <h5 className="mb-3 d-block">Implement idle timeout popup in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h5> <Switch> <Route exact path="/" component={Login} /> <Route path="/dashboard" component={Dashboard} /> </Switch> </div> </BrowserRouter> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import React, { Component } from 'react'; class Login extends Component { handleLogin = () => { this.props.history.push('/dashboard'); } render() { return <div className="w-25"> <b className="mb-2 d-block">Login</b> <input className="d-block mb-2 form-control" type="text" placeholder="Email" /> <input className="d-block mb-2 form-control" type="password" placeholder="Password" /> <button className="btn btn-success" onClick={this.handleLogin}>Login</button> </div> } } export default Login; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import React, { Component } from 'react'; import { Table } from 'reactstrap'; class Dashboard extends Component { handleLogout = () => { this.props.history.push('/'); } render() { return <div className="w-25"> <b className="mb-2 d-block">Dashboard</b> <Table className="table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </Table> <button className="btn btn-danger" onClick={this.handleLogout}>Logout</button> </div> } } export default Dashboard; |
3. Write a logic to set idle timeout popup
Let’s write a logic to implement idle timeout functionality using react-idle-timer and show the modal popup when the user goes idle.
In this example, we will display a popup after 10 seconds of idle time. After displaying the popup, you will be redirected to the login page in 5 seconds. By clicking on the Stay Logged In button, we will restart the idle timer and stay on the same page.
Without wasting time, let’s create a modal popup component called TimeoutModal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import React from 'react'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; const TimeoutModal = ({ showModal, togglePopup, handleStayLoggedIn }) => { return <Modal isOpen={showModal} toggle={togglePopup} keyboard={false} backdrop="static"> <ModalHeader>Session Timeout!</ModalHeader> <ModalBody> Your session is about to expire in 5 seconds due to inactivity. You will be redirected to the login page. </ModalBody> <ModalFooter> <Button color="primary" onClick={handleStayLoggedIn}>Stay Logged In</Button> </ModalFooter> </Modal> } export default TimeoutModal; |
In the above component, we are passing the following three attributes.
- showModal – Flag to show/hide the modal popup.
- togglePopup – Method to manage the visibility of the modal popup.
- handleStayLoggedIn – Stay logged in and reset the idle timer.
Let’s import the react-idle-timer & TimeoutModal in the Dashboard to handle the idle timeout popup.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | ... ... import IdleTimer from 'react-idle-timer'; import TimeoutModal from './TimeoutModal'; class Dashboard extends Component { constructor(props) { super(props); this.state = { showModal: false } this.idleTimer = null; this.logoutTimer = null; } onIdle = () => { this.togglePopup(); this.logoutTimer = setTimeout(() => { this.handleLogout(); }, 1000 * 5 * 1); // 5 seconds } togglePopup = () => { this.setState(prevState => ({ showModal: !prevState.showModal })); } handleStayLoggedIn = () => { if (this.logoutTimer) { clearTimeout(this.logoutTimer); this.logoutTimer = null; } this.idleTimer.reset(); this.togglePopup(); } ... ... render() { const { showModal } = this.state; return <div className="w-25"> <b className="mb-2 d-block">Dashboard</b> ... ... <IdleTimer ref={ref => { this.idleTimer = ref }} element={document} stopOnIdle={true} onIdle={this.onIdle} timeout={1000 * 10 * 1} // 10 seconds /> <TimeoutModal showModal={showModal} togglePopup={this.togglePopup} handleStayLoggedIn={this.handleStayLoggedIn} /> </div> } } export default Dashboard; |
Let’s configure the following properties for the IdleTimer.
- stopOnIdle – Set to
true, so we can stop the timer when the user goes idle. - onIdle – Method to capture an event when the user is idle.
- timeout – Idle timeout in milliseconds.
4. Output
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
