title: How can I pass isAuthenticated to let Authenticated Component route to protected route?
body: <p>I'm implementing protected route by react router v4.
  I'm trying to pass "isAuthenticated" value from "Login" Component to "Authenticated" Component but I get "false" value.</p>
  
  <p>Maybe I use the wrong way, Could anybody please help to fix this problem?</p>
  
  <p>My code as following:</p>
  
  <p>Login.js provide "isAuthenticated" control</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AUTH_TOKEN } from '../constants';
  import { USERNAME } from '../constants';
  import { graphql, compose } from 'react-apollo';
  import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
  import gql from 'graphql-tag';
  
  export const Auth = {
      isAuthenticated: false,
    authenticate(cb) {
      this.isAuthenticated = true;
      // setTimeout(cb, 100);
    },
    signout(cb) {
      this.isAuthenticated = false;
      // setTimeout(cb, 100);
    }
  };
  
  class Login extends Component {
    state = {
      username: '',
      password: '',
    };
  
      login = () =&gt; {
          Auth.authenticate();
          console.log(Auth.isAuthenticated);
      };
  
    render() {
  
      return (
        &lt;Row&gt;
          &lt;Col xs={12} sm={6} md={5} lg={4}&gt;
                      &lt;div className="Login"&gt;
                  &lt;h4 className="page-header"&gt;Login&lt;/h4&gt;
                    &lt;form ref={form =&gt; (this.form = form)} onSubmit={event =&gt; event.preventDefault()}&gt;
                      &lt;FormGroup&gt;
                          &lt;ControlLabel&gt;Username&lt;/ControlLabel&gt;
                          &lt;br /&gt;
                      &lt;input
                              value={this.state.username}
                              onChange={e =&gt; this.setState({ username: e.target.value })}
                            type="text"
                            autoFocus
                        /&gt;
                      &lt;/FormGroup&gt;
  
                      &lt;FormGroup&gt;
                          &lt;ControlLabel&gt;Password&lt;/ControlLabel&gt;
                          &lt;br/&gt;
                          &lt;input
                              value={this.state.password}
                          onChange={e =&gt; this.setState({ password: e.target.value })}
                              type="password"
                            /&gt;
                          &lt;/FormGroup&gt;
                        &lt;div onClick={() =&gt; {this._confirm(); this.login(); }}&gt;
                            &lt;Button type="submit" bsStyle="success"&gt;Login&lt;/Button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
    )
  };
  
    _confirm = async () =&gt; {
      const { username, password } = this.state;
  
        const result = await this.props.loginMutation({
          variables: {
            username,
            password,
          },
        });
  
        const { token } = result;
        this._saveUserData(token, username);
  
          this.props.history.push(`/`);
    }
  
    _saveUserData = (token, username) =&gt; {
      localStorage.setItem(AUTH_TOKEN, token);
      localStorage.setItem(USERNAME, username);
    }
  };
  
  const LOGIN_MUTATION = gql`
    mutation LoginMutation($username: String!, $password: String!) {
      loginMutation(username: $username, password: $password) {
        token
      }
    }
  `;
  
  export default compose(
    graphql(LOGIN_MUTATION, { name: 'loginMutation' }),
  )(Login);
  </code></pre>
  
  <p>Authenticated.js need to get "isAuthenticated" value (true) to render the protected route.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, Redirect } from 'react-router-dom';
  import { Auth } from '../pages/Login';
  
  console.log(Auth.isAuthenticated);
  
  class Authenticated extends Component {
    render() {
          const {
              component: Component, exact, ...rest
          } = this.props;
  
          return (
          &lt;Route
              {...rest}
              exact={exact}
              render={props =&gt; (
              Auth.isAuthenticated ? (
                  &lt;Component { ...props} /&gt;
              ) : (
                  &lt;Redirect to="/login" /&gt;
          ))}
          /&gt;
          );
      }
  }
  
  
  
  export default Authenticated;
  </code></pre>
  
  <p>=== Workaround Solution ===</p>
  
  <p>Authenticated.js -> get the value from localStorage</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Route, Redirect } from 'react-router-dom';
  import { AUTH_TOKEN, IS_AUTHEN } from '../constants';
  
  class Authenticated extends Component {
  
  
    render() {
          const {
              component: Component, exact, ...rest
          } = this.props;
          const isAuthenticated = !!localStorage.getItem(IS_AUTHEN) &amp;&amp; !!localStorage.getItem(AUTH_TOKEN);
          console.log(isAuthenticated);
  
          return (
          &lt;Route
              {...rest}
              exact={exact}
              render={props =&gt; (
              isAuthenticated ? (
                  &lt;Component { ...props} /&gt;
              ) : (
                  &lt;Redirect to="/login" /&gt;
          ))}
          /&gt;
          );
      }
  }
  
  
  
  export default Authenticated;
  </code></pre>
  
  <p>Login.js -> Store value by using localStorage.setItem</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AUTH_TOKEN, USERNAME, IS_AUTHEN } from '../constants';
  import { graphql, compose } from 'react-apollo';
  import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
  import gql from 'graphql-tag';
  
  class Login extends Component {
    state = {
      username: '',
      password: '',
      authenticated: false,
    };
  
    render() {
  
      return (
        &lt;Row&gt;
          &lt;Col xs={12} sm={6} md={5} lg={4}&gt;
                      &lt;div className="Login"&gt;
                  &lt;h4 className="page-header"&gt;Login&lt;/h4&gt;
                    &lt;form ref={form =&gt; (this.form = form)} onSubmit={event =&gt; event.preventDefault()}&gt;
                      &lt;FormGroup&gt;
                          &lt;ControlLabel&gt;Username&lt;/ControlLabel&gt;
                          &lt;br /&gt;
                      &lt;input
                              value={this.state.username}
                              onChange={e =&gt; this.setState({ username: e.target.value })}
                            type="text"
                            autoFocus
                        /&gt;
                      &lt;/FormGroup&gt;
  
                      &lt;FormGroup&gt;
                          &lt;ControlLabel&gt;Password&lt;/ControlLabel&gt;
                          &lt;br/&gt;
                          &lt;input
                              value={this.state.password}
                          onChange={e =&gt; this.setState({ password: e.target.value })}
                              type="password"
                            /&gt;
                          &lt;/FormGroup&gt;
                        &lt;div onClick={() =&gt; this._confirm()}&gt;
                            &lt;Button type="submit" bsStyle="success"&gt;Login&lt;/Button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;
    )
  };
  
    _confirm = async () =&gt; {
      const { username, password } = this.state;
  
        const result = await this.props.loginMutation({
          variables: {
            username,
            password,
          },
        });
  
        this.setState({ authenticated: true });
        const { token } = result;
        this._saveUserData(token, username, this.state.authenticated);
  
          this.props.history.push(`/channel`);
    }
  
    _saveUserData = (token, username, authenticated) =&gt; {
      localStorage.setItem(AUTH_TOKEN, token);
      localStorage.setItem(USERNAME, username);
      localStorage.setItem(IS_AUTHEN, authenticated);
    }
  };
  
  const LOGIN_MUTATION = gql`
    mutation LoginMutation($username: String!, $password: String!) {
      loginMutation(username: $username, password: $password) {
        token
      }
    }
  `;
  
  export default compose(
    graphql(LOGIN_MUTATION, { name: 'loginMutation' }),
  )(Login);
  </code></pre>