React Facebook Login Component

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';

const componentClicked = () => {
  console.log('Facebook login button clicked!');
};

const responseFacebook = (response) => {
  console.log('Facebook response received:', response);
  if (response && !response.status) {
    console.log('User logged in:', response.name, response.email);
    // Typically, you would send response.accessToken to your backend for server-side verification
    // Example: 
    // fetch('/api/auth/facebook', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ accessToken: response.accessToken, userID: response.userID })
    // });
  } else {
    console.log('Login failed or cancelled:', response);
  }
};

ReactDOM.render(
  <FacebookLogin
    appId="YOUR_FACEBOOK_APP_ID" // <-- IMPORTANT: Replace with your actual App ID
    autoLoad={false} // Set to true to attempt automatic login on page load. Use with caution.
    fields="name,email,picture" // Requested user data fields
    scope="public_profile,email" // Requested permissions
    onClick={componentClicked} // Optional: callback when the button is clicked
    callback={responseFacebook} // Required: callback with login response
    cssClass="my-custom-facebook-button" // Optional: add custom CSS class
    icon="fa-facebook" // Optional: use Font Awesome icon. Ensure Font Awesome is loaded.
    textButton="Login with Facebook" // Optional: custom button text
  />,
  document.getElementById('root') // Ensure an element with id="root" exists in your HTML
);