title: Stop login state from changing in homepage with React Context
body: <p>I tried to manage my app's login state with React context. The logic is simple: if the user passes the authentication in the login page, the login state in context should be updated to <code>true</code>, and the user will be directed to the homepage. I'm also using the login state and <code>Redirect</code> to prevent users from accessing the login page.</p>
  <p>Unfortunately, this method failed to block logged-in users from viewing the login page. The reason is that the login state changed back to <code>false</code> once the user successfully logged in and get redirected here. I feel like I must be doing something wrong but could not figure it out.</p>
  <p>Here is my <strong>React Context</strong> setup:</p>
  <pre><code>// LoginContext.js    
  export default React.createContext({
      isAuthenticated: null,
      logoutUser: () =&gt; {},
      loginUser: () =&gt; {}
  })
  </code></pre>
  <p>Here's the app component where I put Context provider:</p>
  <pre><code>//App.js
  class App extends Component {
    state = {
      users: [],
      isAuthenticated: false
    };
  
    logoutUser = () =&gt; {
      this.setState({ accessToken: null, username: null, isAuthenticated: false });
    };
  
   loginUser = () =&gt; {
      this.setState({ isAuthenticated: true })
    }
  
  render() {
      const value = {
        isAuthenticated: this.state.isAuthenticated,
        logoutUser: this.logoutUser,
        loginUser: this.loginUser
      }
      return (
        &lt;LoginContext.Provider value={value}&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route
                exact path=&quot;/&quot;
                render={() =&gt; (
                  &lt;HomePageScreen
                    data={homepage_data}
                    recordImpression={this.recordImpression}
                  /&gt;
                )}
              /&gt;
              &lt;Route path=&quot;/login&quot;&gt;
                {value.isAuthenticated
                  ? &lt;Redirect to=&quot;/&quot; /&gt;
                  : &lt;LoginScreen
                    handleLoginFormSubmit={this.handleLoginFormSubmit}
                    recordImpression={this.recordImpression}
                  /&gt;}
              &lt;/Route&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
       &lt;/LoginContext.Provider&gt;
  }
  </code></pre>
  <p>Here is the function that handles form submit and page transition in the <strong>login page</strong>:</p>
  <pre><code>  handleLoginFormSubmit = async (data, bannerID = '') =&gt; {
      const url = `${process.env.REACT_APP_SERVICE_URL}/users/login`;
      try {
        const res = await axios.post(url, data)
          .then(res =&gt; {
            this.setState({ accessToken: res.data.access_token, username: data.username });
            this.loginUser()
            this.props.history.push('/', { newLogin: true });
            // the line below saves the refresh_token to the local storage of the browser
            window.localStorage.setItem(&quot;refreshToken&quot;, res.data.refresh_token);
            window.localStorage.setItem(&quot;username&quot;, data.username);
          })
      } catch (error) {
        if (bannerID) {
          window.scrollTo(0, 0)
          this.displayBanner(bannerID)
        }
      }
    };
  </code></pre>