Integrating Facebook Web Sdk With Reactjs Component State

I'm getting started with ReactJS, NodeJS, Webpack, and the Facebook SDK for user authentication. All these technologies and their associated software engineering principles/best p

Solution 1:

Yes you are right and can very well integrate facebook login with react component.

A sample login component can be like this -

importReactfrom'react';

classLoginComponentextendsReact.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  loadFbLoginApi() {

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

        console.log("Loading fb api");
          // 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'));
  }

  componentDidMount() {
        this.loadFbLoginApi();
    }

    testAPI() {
      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(response) {
      console.log('statusChangeCallback');
      console.log(response);
      if (response.status === 'connected') {
        this.testAPI();
      } elseif (response.status === 'not_authorized') {
          console.log("Please log into this app.");
      } else {
          console.log("Please log into this facebook.");
      }
    }

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

    handleFBLogin() {
        FB.login(this.checkLoginState());
        }

    render() {
        return (
                <div><MyButtonclassNames = "btn-facebook"id         = "btn-social-login"whenClicked = {this.handleFBLogin}
                        ><spanclassName="fa fa-facebook"></span> Sign in with Facebook
                    </MyButton></div>
               );
    }
}

exportdefaultLoginComponent;

When response status received is connected then it means user is logged in via Facebook and you can set state on your component to reflect that. e.g

response.status === 'connected'this.setState({userLoggedIn:true});

I am using a custom button component (MyButton) in React which you can very easily create.

Solution 2:

What about using the npm react-facebook? It includes a few components like "Initialize" (this is for expose the FB Api in a function children) or a LoginButton that handles the facebook pop up screen for login, or if you wanna make your own button you can use component Login. Just provide the facebook app id to the FacebookProvider component at the root of you project (called only once) and use the components that providea such great node module as react-facebook.

https://www.npmjs.com/package/react-facebook

Solution 3:

I have found another way to load fb-sdk file in webpack, using npm package: react-load-script

Follow this simple package to achieve the same: https://www.npmjs.com/package/react-load-script