CODEWITHSUNDEEP
javascriptreactjsfacebookonclick
Kevin Danikowski
Kevin Danikowski

Reputation: 5196

onClick() not called for facebook button - reactJS

For some reason my onClick handler doesn't work with the facebook button (found at https://developers.facebook.com/docs/facebook-login/web/login-button/). But it will work with a common div.

Any idea why the onClick isn't called on the facebook button (second div)?

<div onClick={this._handleFBLogin}>Facebook Login (working)</div>
<div onClick={this._handleFBLogin} 
   className="fb-login-button" 
   data-max-rows="1" 
   data-size="large" 
   data-button-type="continue_with" 
   data-show-faces="false" 
   data-auto-logout-link="false" 
   data-use-continue-as="false" />

Symptoms:

The onClick() never even get's called.

EDIT: Follow Up

Based on @luschn's response, and some other questions (notably: Implement Facebook API login with reactjs)

I had to circumvent my _handleFBLogin() function which called a function to handle the facebook auth and directly handle the facebook auth. Here is the relevant code in componentDidMount():

        const facebookCallback = (response) => {
            return this._facebookCallback(response)
        }
        window.fbAsyncInit = function() {
            FB.init({
                appId      : FACEBOOK_APP_ID,
                cookie     : true,  // enable cookies to allow the server to access the session
                version    : FACEBOOK_API_VERSION
            });

            FB.Event.subscribe('auth.statusChange', function(response) {
                facebookCallback(response)
            });
        }.bind(this);

Note the binding and subscribe to auth.statusChange.

Also I didn't need to add data-onlogin because of this subscribe event.

Lastly, my origional _handleFBLogin code was:

_handleFBLogin = () => {
        FB.login(response => {
            this._facebookCallback(response)
        }, {scope: 'public_profile,email'})
    }

Upvotes: 0

Views: 773

Answers (1)

andyrandy
andyrandy

Reputation: 74004

You have to use the onlogin parameter/attribute instead, as you can read in the docs. Alternatively, you can use your own custom button with this: https://developers.facebook.com/docs/reference/javascript/FB.login/

Using your own onClick method would be pointless anyway, because the button plugin handles the login for you.

Upvotes: 1

Related Questions