title: Adding session timeout in a page in Reactjs
body: <p>I want to add session timeout in my login page. A few seconds before a session times out the page should show a session timeout alert. After that the session should time out a the user should be redirected to the initial page. Please help me to do this.
  This is my loginform.js page</p>
  
  <pre><code>    import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { login } from '../../redux/reducer';
  import './LoginForm.css';
  import { BrowserRouter as Router, Route } from "react-router-dom";
  
  class LoginForm extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
         timeOut:false,
        warning:false,
      };
      this.onSubmit = this.onSubmit.bind(this);
    }
  
  
  componentDidMount(){
  
      setTimeout(() =&gt; {
        this.setState({timeOut:true});
      },30000);//if 8sec is your warning time
  
      setTimeout(() =&gt; {
        this.setState({timeOut:true});
      },10000);//if 10sec is your time out
    }
  
    render() {
      let {username, password} = this.state;
      let {isLoginPending, isLoginSuccess, loginError} = this.props;
       if(this.state.timeOut){
       return  &lt;Route to="/Home" push={true} /&gt;
      }
      else{
      return (
        &lt;form name="loginForm" onSubmit={this.onSubmit}&gt;
          &lt;div className="form-group-collection"&gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;username:&lt;/label&gt;
              &lt;input type="username" name="username" onChange={e =&gt; this.setState({username: e.target.value})} value={username}/&gt;
            &lt;/div&gt;
  
            &lt;div className="form-group"&gt;
              &lt;label&gt;Password:&lt;/label&gt;
              &lt;input type="password" name="password" onChange={e =&gt; this.setState({password: e.target.value})} value={password}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;input type="submit" value="Login" /&gt;
  
          &lt;div className="message"&gt;
            { isLoginPending &amp;&amp; &lt;div&gt;Please wait...&lt;/div&gt; }
            { isLoginSuccess &amp;&amp; &lt;div&gt;Success.&lt;/div&gt; }
            { loginError &amp;&amp; &lt;div&gt;{loginError.message}&lt;/div&gt; }
          &lt;/div&gt;
        &lt;/form&gt;
      )
    }
  }
    onSubmit(e) {
      e.preventDefault();
      let { username, password } = this.state;
      this.props.login(username, password);
      this.setState({
        username: '',
        password: ''
      });
    }
  }
  const Home = () =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Welcome Admin &lt;/h2&gt;
  
    &lt;/div&gt;
  );
  
  const mapStateToProps = (state) =&gt; {
    return {
      isLoginPending: state.isLoginPending,
      isLoginSuccess: state.isLoginSuccess,
      loginError: state.loginError
    };
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      login: (username, password) =&gt; dispatch(login(username, password))
    };
  }
  </code></pre>
  
  <p>export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
  This is my reducer.js file</p>
  
  <pre><code>const SET_LOGIN_PENDING = 'SET_LOGIN_PENDING';
  const SET_LOGIN_SUCCESS = 'SET_LOGIN_SUCCESS';
  const SET_LOGIN_ERROR = 'SET_LOGIN_ERROR';
  
  export function login(username, password) {
    return dispatch =&gt; {
      dispatch(setLoginPending(true));
      dispatch(setLoginSuccess(false));
      dispatch(setLoginError(null));
  
      callLoginApi(username, password, error =&gt; {
        dispatch(setLoginPending(false));
        if (!error) {
          dispatch(setLoginSuccess(true));
        } else {
          dispatch(setLoginError(error));
        }
      });
    }
  }
  
  function setLoginPending(isLoginPending) {
    return {
      type: SET_LOGIN_PENDING,
      isLoginPending
    };
  }
  
  function setLoginSuccess(isLoginSuccess) {
    return {
      type: SET_LOGIN_SUCCESS,
      isLoginSuccess
    };
  }
  
  function setLoginError(loginError) {
    return {
      type: SET_LOGIN_ERROR,
      loginError
    }
  }
  
  function callLoginApi(username, password, callback) {
    setTimeout(() =&gt; {
      if (username === 'admin' &amp;&amp; password === 'password') {
        return callback(null);
      } else {
        return callback(new Error('Invalid username and password'));
      }
    }, 1000);
  }
  
  export default function reducer(state = {
    isLoginSuccess: false,
    isLoginPending: false,
    loginError: null
  }, action) {
    switch (action.type) {
      case SET_LOGIN_PENDING:
        return Object.assign({}, state, {
          isLoginPending: action.isLoginPending
        });
  
      case SET_LOGIN_SUCCESS:
        return Object.assign({}, state, {
          isLoginSuccess: action.isLoginSuccess
        });
  
      case SET_LOGIN_ERROR:
        return Object.assign({}, state, {
          loginError: action.loginError
        });
  
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>This is my store.js</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import logger from 'redux-logger';
  import reducer from './reducer';
  
  const store = createStore(reducer, {}, applyMiddleware(thunk, logger));
  export default store;
  </code></pre>
  
  <p>What are the changes I need to make in order to get session timeout to work?</p>