Facebook login button for react

FBLoginButton.jsx

import React, {useCallback, useEffect, useState} from 'react';

const FBLoginButton = (
  {
    children = 'Login with Facebook',
    appId = null,
    graphApiVersion = 'v18.0',
    configurationId = null,
    onMessage = null,
    onLoginCallback = null
  }
) => {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  //Load SDK
  useEffect(() => {
    if (document.getElementById('facebook-jssdk')) {
      setSdkLoaded(true);
      return;
    }

    window.fbAsyncInit = function () {
      window.FB.init({
        appId,
        autoLogAppEvents: true,
        xfbml: true,
        version: graphApiVersion
      });

      setSdkLoaded(true);
    };

    const script = document.createElement('script');
    script.id = 'facebook-jssdk';
    script.src = 'https://connect.facebook.net/en_US/sdk.js';
    script.async = true;
    script.defer = true;
    script.crossOrigin = 'anonymous';
    document.body.appendChild(script);
  }, [appId, graphApiVersion]);

  //Bindings
  useEffect(() => {
    // Session logging message event listener
    window.addEventListener('message', (event) => {
      if (!event.origin.endsWith('facebook.com')) return;

      if (onMessage) {
        try {
          const data = JSON.parse(event.data);
          onMessage(data);
        } catch (err) {
          console.error(err);
        }
      }
    });
  }, [onMessage]);

  // Response callback
  const fbLoginCallback = useCallback((response) => {
    if (onLoginCallback) {
      if (response.authResponse) {
        onLoginCallback(response.authResponse);
      } else {
        console.error('WhatsAppEmbeddedSignup error', err);
      }
    }
  }, [onLoginCallback]);

  // Launch method and callback registration
  const launchWhatsAppSignup = useCallback(() => {
    if (!sdkLoaded || !window.FB) {
      console.warn('FB SDK not ready');
      return;
    }

    window.FB.login(fbLoginCallback, {
      config_id: configurationId,
      response_type: 'code',
      override_default_response_type: true,
      extras: {
        setup: {},
      }
    });
  }, [fbLoginCallback, sdkLoaded, configurationId]);

  return (
    <button
      type="button"
      disabled={!sdkLoaded}
      onClick={launchWhatsAppSignup}
      style={{
        backgroundColor: sdkLoaded ? '#1877f2' : 'rgba(128,125,125,0.7)',
        border: 0,
        borderRadius: 4,
        color: '#fff',
        cursor: sdkLoaded ? 'pointer' : 'none',
        fontFamily: 'Helvetica, Arial, sans-serif',
        fontSize: 16,
        fontWeight: 'bold',
        padding: '7px 24px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 5,
      }}
    >{sdkLoaded ? children : 'Loading...'}</button>
  );
};

export default FBLoginButton;

usage-example.jsx

const onFbLoginCallBack = (authResponse) => {
  const code = authResponse.code;
  // Use the retrieve token to get the actual data

  console.warn({authResponse, code});
};

const onFbLoginMessage = (data) => {
  console.warn({data});
};

<FBLoginButton
  appId="13456..."
  configurationId="123456...."
  graphApiVersion="v24.0"
  onMessage={onFbLoginMessage} //Optional
  onLoginCallback={onFbLoginCallBack} //Optional
>
  Login
</FBLoginButton>