title: In React, trying to refresh and stay on same page but state will not update as expected
body: <p>My app uses react, react-router-dom and stitch which is accessing mongodb and handling the auth through google. I am able to authenticate and and access the ProtectedPage component but when I refresh, isAuthed will not have a value and I will redirect to /login. Why is state not being update so that isAuthed = true and how would I ensure that I am taken to /protected when i refresh?</p>
  <pre><code>import React, {Component} from 'react';
  import {
    Switch,
    Route,
    Link,
    Redirect,
    withRouter,
  } from &quot;react-router-dom&quot;;
  import {Stitch, GoogleRedirectCredential} from 'mongodb-stitch-browser-sdk'
  
  import './App.css';
  
  class App extends Component{
  
    constructor(props) {
      super(props)
  
      this.state = {
        isAuthed: ''
      }
    }
  
    componentDidMount(){
      
      this.client = new Stitch.initializeDefaultAppClient(&quot;myAppId&quot;);
  
      if(this.client.auth.hasRedirectResult()){
        this.client.auth.handleRedirectResult();
      }
      
      this.setState({isAuthed: this.client.auth.isLoggedIn});
    }
  
  
    login = () =&gt; {
      const credential = new GoogleRedirectCredential() 
      this.user = this.client.auth.loginWithRedirect(credential);
    }
  
    logout = () =&gt; {
      this.client.auth.logout();
      this.setState({isAuthed: false});
    }
  
    showUser = () =&gt; {
      console.log(this.client.auth.isLoggedIn);
      console.log(this.client);
    }
  
  
    render() {
    return (
      &lt;div className=&quot;App&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;Link to=&quot;/&quot;&gt;Public Page&lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;Link to=&quot;/login&quot;&gt;Login&lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
        &lt;Link to=&quot;/protected&quot;&gt;Protected Page&lt;/Link&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;Switch&gt;
        &lt;Route exact path=&quot;/&quot;&gt;
          &lt;PublicPage isAuthed={this.state.isAuthed}/&gt;
        &lt;/Route&gt;
        &lt;Route path=&quot;/login&quot; &gt;
          &lt;LoginPage login={this.login} isAuthed={this.state.isAuthed}/&gt;
        &lt;/Route&gt;
        &lt;PrivateRoute path=&quot;/protected&quot; isAuthed={this.state.isAuthed} &gt;
          &lt;ProtectedPage logout={this.logout} /&gt;
        &lt;/PrivateRoute&gt;
      &lt;/Switch&gt;
  
      &lt;/div&gt;
    );
    }
  }
  
  export default withRouter(App);
  
  function PublicPage() {
   
    return (
      &lt;div&gt;&lt;h3&gt;Public&lt;/h3&gt;
      &lt;/div&gt;
      
    );
  
  }
  
  function ProtectedPage({logout}) {
   
    return (
        &lt;div&gt;
        &lt;h3&gt;You Are Logged In&lt;/h3&gt;
          &lt;button onClick={logout}&gt;Logout&lt;/button&gt;
        &lt;/div&gt;
      );
  }
  
  function LoginPage({login}) {
  
    return (
  
  
      &lt;div&gt;
        &lt;p&gt;You must log in to view the page&lt;/p&gt;
        &lt;button onClick={login}&gt;Log in&lt;/button&gt;
      &lt;/div&gt;
      
    );
  }
  
  function PrivateRoute({ children, isAuthed, client, ...rest}) {
    console.log(isAuthed);
  
    return (
      &lt;Route
        {...rest}
        render={({ location }) =&gt;
        isAuthed ? (
            children
          ) : (
            &lt;Redirect
              to={{
                pathname: &quot;/login&quot;,
                state: { from: location }
              }}
            /&gt;
          )
        }
      /&gt;
    );
  }
  </code></pre>