{"library":"react-facebook-login","title":"React Facebook Login Component","description":"This package, `react-facebook-login`, provides a React component designed to simplify integrating Facebook authentication into web applications. As of its latest version, 4.1.1, the component allows developers to add a styled Facebook login button or implement a custom UI using a render prop, handling the underlying Facebook SDK interactions and authentication flow. It supports fetching user profiles (name, email, picture) and requesting custom permissions (scopes). The package offers a straightforward way to integrate Facebook login without direct manipulation of the Facebook JavaScript SDK. Given its last significant update was in the 2019/2020 timeframe, its release cadence is effectively dormant, and developers should be aware of potential incompatibilities with newer React versions or changes in Facebook's API. Its primary differentiator was its simplicity and ability to provide a quick Facebook login integration out-of-the-box or with custom rendering.","language":"javascript","status":"abandoned","last_verified":"Sat Apr 25","install":{"commands":["npm install react-facebook-login"],"cli":null},"imports":["import FacebookLogin from 'react-facebook-login'","import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'","const responseFacebook = (response) => { /* handle response */ }"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport FacebookLogin from 'react-facebook-login';\n\nconst componentClicked = () => {\n  console.log('Facebook login button clicked!');\n};\n\nconst responseFacebook = (response) => {\n  console.log('Facebook response received:', response);\n  if (response && !response.status) {\n    console.log('User logged in:', response.name, response.email);\n    // Typically, you would send response.accessToken to your backend for server-side verification\n    // Example: \n    // fetch('/api/auth/facebook', {\n    //   method: 'POST',\n    //   headers: { 'Content-Type': 'application/json' },\n    //   body: JSON.stringify({ accessToken: response.accessToken, userID: response.userID })\n    // });\n  } else {\n    console.log('Login failed or cancelled:', response);\n  }\n};\n\nReactDOM.render(\n  <FacebookLogin\n    appId=\"YOUR_FACEBOOK_APP_ID\" // <-- IMPORTANT: Replace with your actual App ID\n    autoLoad={false} // Set to true to attempt automatic login on page load. Use with caution.\n    fields=\"name,email,picture\" // Requested user data fields\n    scope=\"public_profile,email\" // Requested permissions\n    onClick={componentClicked} // Optional: callback when the button is clicked\n    callback={responseFacebook} // Required: callback with login response\n    cssClass=\"my-custom-facebook-button\" // Optional: add custom CSS class\n    icon=\"fa-facebook\" // Optional: use Font Awesome icon. Ensure Font Awesome is loaded.\n    textButton=\"Login with Facebook\" // Optional: custom button text\n  />,\n  document.getElementById('root') // Ensure an element with id=\"root\" exists in your HTML\n);\n","lang":"javascript","description":"This example demonstrates a basic Facebook login button using the `react-facebook-login` component. It includes event handling for clicks and the authentication response, requesting specific user data fields and permissions. It requires a valid Facebook App ID and an HTML element with id 'root' to render into.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}