Steverino Steverino - 1 month ago 52
React JSX Question

Use Facebook Login Button with React

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

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.