Use Facebook Login Button with React

Question

I'm trying Facebook authentication for my app for the first time. I'm able to get it working fine through a tutorial, I can login a user and log them out using the handy Facebook Login Button as shown in an example in the Facebook SDK docs here:

https://developers.facebook.com/docs/facebook-login/web

I love using this button because it is easy, subscribes to Facebook branding requirements automatically, and because it automatically becomes a Facebook logout button when a user is logged in. Perfect in every way. Here's how the button's code looks with auto-logout included:

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>

Seems like gravy, until I try it in a ReactJS page.

// From the tutorials
<script type='text/babel'>
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.<br />
          // MY ADDITION ... it breaks
          <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
          </fb:login-button>
        </div>
      );
    }
  });
  ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>

I also tried it like this:

ReactDOM.render(
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>,
    document.getElementById('loginbutton')
);

I can't include the FB SDK Login Button this way because it says "JSX is not XML". Fair enough I guess.

Is there any way to include this handy button in a React page, or do I just have to create a custom FB button? I'd have thought this seemed like such a common use case, and since Facebook gave us React, I'm surprised I couldn't find a way to use this solution more easily. (Making the custom button isn't the end of the world, but I want to know if there's a better/easier way.)

Answer 1

Use the code generator provided by Facebook at:

https://developers.facebook.com/docs/facebook-login/web/login-button

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true"></div>

Note that for this to work with the Facebook SDK onlogin function demonstrated in the tutorial, you will need to add a custom attribute to link up the functionality, e.g.:

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true" data-onlogin="checkLoginState();"></div>

Additionally, the code generator will give more specification to the SDK bootstrapping process than is given in the default tutorial. So instead of this code provided by the tutorial:

// This won't work w/ custom <div ...> login buttons
(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'));

You need to use something more like this, from the code generator:

(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#xfbml=1&version=v2.8&appId=YOUR-APP'S-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

This will ensure everything is working smoothly with the correct version (e.g. 2.8 vs 2.5) of the SDK so you won't get a slew of console errors with the inclusion of a customized version of the FB SDK login button.