title: How to implement login and logout with Facebook Login and ReactJS?
body: <p>I'm trying to use Facebook Login for users to log in and out of my web app using React and React-Router. I made a component which redirects a user on successful login, but I am not able to render the log out button on the new view. I am also new to React-Router so I'm not entirely sure if the problem is with my routes. </p>
  
  <p>Here's my code so far:</p>
  
  <p>login.js</p>
  
  <pre><code>class Login extends React.Component{
      constructor(props) {
          super(props);
          this.state = {
              loggedStatus: false,
              id : ''
          }
      }
  
      componentDidMount() {
          window.fbAsyncInit = function() {
              window.FB.init({
                  appId      : '',
                  cookie     : true,  
                  xfbml      : true,
                  version    : 'v2.11'
              });
  
              window.FB.getLoginStatus(function(response) {
                  this.statusChangeCallback(response);
              }.bind(this));
          }.bind(this);
  
          (function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.11&amp;appId=''";
              fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'))
      }
  
      loggedIn(response) {
          this.setState({
              loggedStatus : true,
              id: response.authResponse.userID        
          });         
      }
  
      loggedOut() {
          this.setState({
              loggedStatus: false,
          })
      }
  
      statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        if (response.status === 'connected') {
          this.loggedIn(response)
          console.log(this.state);
        } else if (response.status === 'not_authorized') {
          this.loggedOut()
          console.log(this.state.loggedStatus);
        } else {
          this.loggedOut()
           console.log(this.state.loggedStatus);
        }
      }
  
      checkLoginState() {
        window.FB.getLoginStatus(function(response) {
          this.statusChangeCallback(response);
        }.bind(this));
      }
  
      handleClick() {
        window.FB.login(this.checkLoginState());
      }
  
      render () {
          if (!this.state.loggedStatus) {
          return (
              &lt;div className="fb-login-button" 
                   data-max-rows="1" 
                   data-size="large" 
                   data-button-type="continue_with" 
                   data-show-faces="false" 
                   data-auto-logout-link="true" 
                   data-use-continue-as="true"&gt;
              &lt;/div&gt;   );
          } else {
              return (
                  &lt;Redirect to = {{
                      pathname : '/loggedin',
                      state : {
                          id: this.state.id
                      }
                  }} /&gt;
              )
          }
      }
  
  }
  
  export default Login;
  </code></pre>
  
  <p>loggedin.js</p>
  
  <pre><code>class UserLogin extends React.Component {
      constructor(props) {
          super(props);
          this.state =  {
              id: this.props.location.state.id
          }
      }
     render(){
        return (
      &lt;div&gt;Hey {this.state.id}!&lt;/div&gt;
      &lt;/div&gt;)
  
      }
  }
  
  export default UserLogin
  </code></pre>
  
  <p>And here is my main app, App.js</p>
  
  <pre><code>class App extends React.Component {
     render() {
        return (
          &lt;Router&gt;
              &lt;Switch path = '/'&gt;
                  &lt;Route path = '/login' component = {Login} /&gt;
                  &lt;Route path = '/loggedin' component = {UserLogin} /&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
       );
     }
  };
  
  export default App;
  </code></pre>