title: React: How to log user out if their cookie is expired?
body: <p><strong>Background</strong>: On an express backend, I am using express-session to assign user sessions. On a React front-end, I have in place functionality to prevent users from entering protected routes. There is one bothersome edge case though: If an <strong>authenticated user</strong> remains in an application long enough for their cookie to expire, then they will have free reign to visit all authenticated routes as a "ghost" aka no cookie and and an inaccurate state: <code>this.state.isAuthenticated = true</code>(<em>Yes, they're state is technically "authenticated", because they never logged out or remounted the component preventing me to fetch my backend and perform a check, so that is why I refer to them as "ghosts"</em>)</p>
  
  <p><strong>Why is that?</strong> Well, everytime my App component mounts, I make sure that I check the state of the user. If they pass this authentication phase, then my backend will provide them with a session and I set authenticated state to be true. Because my app component never remounts, as the user traverses through my application, they will be able to visit the unauthorized routes as a "ghost".</p>
  
  <p><strong>Caveat</strong>: If they happen to refresh at any point or press the logout button, then my component will remount, and remove their access since they are not a legitmate user. </p>
  
  <p>I hope I have framed my situation well. My question is: how can I remove a user if they're cookie expires? </p>
  
  <p><strong>Edit</strong>: I have a working solution in Protectedroute.js, but checkAuth() is called an infinite amount of times unless the user moves away from the page. <strong>I want to avoid Redux, because I just started React a week ago</strong></p>
  
  <p><strong>ProtectedRoute.js</strong></p>
  
  <pre><code>function ProtectedRoute({component: Component}, {...rest}) {
      return(
      &lt;userContext.Consumer&gt;
          {({isAuthenticated, checkAuth}) =&gt; {
              checkAuth()
              return  &lt;Route {...rest} render = {(props) =&gt; isAuthenticated ? (&lt;Component {...props}/&gt;) : (&lt;Redirect to ='/login' /&gt;)} /&gt;
          }}
      &lt;/userContext.Consumer&gt;
      )
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
      constructor(props, context) {
          super(props, context)
  
          this.state = {
              isAuthenticated: false,
              isLoading: true
          }
  
          this.handleLoggedIn = this.handleLoggedIn.bind(this)
          this.handleLoggedOut = this.handleLoggedOut.bind(this)
          this.isAuthenticated = this.isAuthenticated.bind(this)
      }
  
      componentDidMount() {
          //Get and set currently logged in user
          //console.log('--componentDidMount--')
          this.isAuthenticated()
      }
  
  
      isAuthenticated() {
          const url = 'http://localhost:9000/api/auth'
          fetch(url, {
              method: 'GET',
              credentials: 'include',
              headers: {
                  'Content-Type' : 'application/json'
              }
          })
          .then((response) =&gt; response.text())
          .then((data) =&gt; {
              //console.log(data)
              if (data === 'true') {
                  console.log('--isAuthenticated--')
                  this.setState({
                      isAuthenticated: true,
                      isLoading: false
                  })
              } else {
                  this.setState({
                      isAuthenticated: false,
                      isLoading: false
                  })
              }
          })
          .catch((err) =&gt; {
              console.log('Error', err)
          })
      }
  
      handleLoggedIn() {
          console.log('--handleLoggedIn--')
          this.setState({
              isAuthenticated: true
          })
      }
  
      handleLoggedOut() {
          this.setState({
              isAuthenticated: false
          })
  
      }
  
      render() {
          const value = {
              loggedIn: this.handleLoggedIn,
              loggedOut: this.handleLoggedOut,
              isAuthenticated: this.state.isAuthenticated,
              checkAuth: this.isAuthenticated
          }
  
          if (this.state.isLoading) {
              return(&lt;div&gt;LOADING&lt;/div&gt;)
          } else {
              return (
                  &lt;Router&gt;
                      &lt;userContext.Provider value = {value}&gt;
                          &lt;div&gt;
                              &lt;userContext.Consumer&gt;
                                  {(value) =&gt; (&lt;Navigation isAuthenticated = {this.state.isAuthenticated} /&gt;)}
                              &lt;/userContext.Consumer&gt;
                          &lt;/div&gt;
                          &lt;Switch&gt;
                              &lt;Route path = '/signup'&gt;
                                  &lt;Signup /&gt;
                              &lt;/Route&gt;
                              &lt;Route path = '/login'&gt;
                                  &lt;Login handleLoggedIn={this.handleLoggedIn}/&gt;
                              &lt;/Route&gt;
                              &lt;Route path = '/feed'&gt;
                                  &lt;Feed /&gt;
                              &lt;/Route&gt;
                              &lt;Protectedroute path = '/create-post' component={CreatePost} /&gt;
                          &lt;/Switch&gt;
                      &lt;/userContext.Provider&gt;
                  &lt;/Router&gt;
              )
          }
      }
  }
  </code></pre>