Can you create a Facebook login example?

I am trying to do a login with Facebook but I don't have any idea where to put the code that Facebook provides to me.

I made this same question in StackOverflow but nobody seems to know how, look:

http://stackoverflow.com/questions/34812562/facebook-login-using-reactjs

I am trying to figure out how to perform the Facebook login with React and make the userID part of the props in order to have the user available in the whole application.

Here is what I have

    componentDidMount: function() {
          window.fbAsyncInit = function() {
            FB.init({
              appId      : '894010190618709',
              cookie     : true,  // enable cookies to allow the server to access
                                // the session
              xfbml      : true,  // parse social plugins on this page
              version    : 'v2.1' // use version 2.1
            });

            FB.getLoginStatus(function(response) {
              this.statusChangeCallback(response);
            }.bind(this));
          }.bind(this);

          // Load the SDK asynchronously
          (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 = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        },

        // Here we run a very simple test of the Graph API after login is
        // successful.  See statusChangeCallback() for when this call is made.
        testAPI: function() {
          console.log('Welcome!  Fetching your information.... ');
          FB.api('/me', function(response) {
          console.log('Successful login for: ' + response.name);
          document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
          });
        },

        statusChangeCallback: function(response) {
          console.log('statusChangeCallback');
          console.log(response);
          if (response.status === 'connected') {
            // Logged into your app and Facebook.
            this.testAPI();
          } else if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' +
              'into this app.';
          } else {
            // The person is not logged into Facebook, so we're not sure if
            // they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
          }
        },

        checkLoginState: function() {
          FB.getLoginStatus(function(response) {
            this.statusChangeCallback(response);
          }.bind(this));
        },

        handleClick: function() {
          FB.login(this.checkLoginState());
        },

in the function checkLoginState the response comes with the status and the userID, that userID is the one I need to make available anywhere in the app, I guess I can achieve this using props, but according to my code, how do I put this userID into props ?

EDIT

to give you a wider view of what I want: I have this code in the parent component of my app, then I have a header component where I have a sign in button, if the user is logged in, I have to hide that button and put the user name instead. So, according to what I have been reading about React, I need to pass the props from the parent component to the childs, like so:

    <Parent>
      <Child fbLoginProp{this.props.fbLoginProps}></Child> //Header component
    </Parent>

What do you recommend me to do ?

goatslacker / alt

Can you create a Facebook login example? #598