Question

29

Integrating Facebook Web SDK with ReactJS Component State

rated 0 times [ 35] [ 6] / answers: 1 / hits: 18120 / 8 Years ago, wed, october 12, 2016, 12:00:00

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 practices are relatively new to me (even JavaScript is pretty new to me).

I've followed the tutorial here https://developers.facebook.com/docs/facebook-login/web and I've got Facebook authentication working great! But the way this tutorial content is structured, it looks to me like the SDK is designed only to expect the FB status response handlers to be included in the raw page HTML just inside the <body> tag. The following in particular references 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'));

This strategy strikes me as imperfect and hard to integrate with React components. Is there a way to relocate the Facebook login/authentication code and Facebook status update handlers from the HTML, for example, into scripts being bundled with React code via Webpack? Is it possible? Part of the reason for my question is that if I understand correctly, for my Facebook status update handler to be able to update my React components' state, that handler needs to be part of a component to have access to the relevant React component this.setState(...) function.

Am I even thinking about this correctly?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alejandro

Add To Favorites

Follow

Total Points: 231

Total Questions: 102

Total Answers: 107

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

alejandro questions

1 Discord.js v13 code breaks when upgrading to v14

Mon, Jul 18, 22, 00:00, 2 Years ago

1 React Image Magnifiers not working when zoom in using nextjs

Fri, Sep 18, 20, 00:00, 4 Years ago

1 Discord.js bot responds when mentioned

Thu, Sep 10, 20, 00:00, 4 Years ago

1 how to get input field value on button click in Vuejs or in vanila javascript?

Sun, Aug 9, 20, 00:00, 4 Years ago

1 How do I set a user's voice channel when I have the user's id?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 8 Years ago melinal · Accepted Answer

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

A sample login component can be like this -

import React from 'react';



class LoginComponent extends React.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();

      } else if (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>

                    <MyButton

                        classNames = btn-facebook

                        id         = btn-social-login

                        whenClicked = {this.handleFBLogin}

                        >

                            <span className=fa fa-facebook></span> Sign in with Facebook

                    </MyButton>

                </div>

               );

    }

}



export default LoginComponent;

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.