react-facebook-login

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 );