{"id":18057,"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.","status":"abandoned","version":"4.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/keppelen/react-facebook-login","tags":["javascript","react","reactjs","react-component","facebook-login","react-facebook-login"],"install":[{"cmd":"npm install react-facebook-login","lang":"bash","label":"npm"},{"cmd":"yarn add react-facebook-login","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-facebook-login","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React components.","package":"react","optional":false},{"reason":"Required for rendering React components in a browser environment.","package":"react-dom","optional":false}],"imports":[{"note":"Standard default import for the pre-styled component, compatible with modern module bundlers. CommonJS `require` is not the idiomatic approach for client-side React code.","wrong":"const FacebookLogin = require('react-facebook-login')","symbol":"FacebookLogin","correct":"import FacebookLogin from 'react-facebook-login'"},{"note":"Use this specific import path for the unstyled component that utilizes a render prop for custom UI. It is also a default export from this specific sub-path.","wrong":"import { FacebookLogin } from 'react-facebook-login/dist/facebook-login-render-props'","symbol":"FacebookLogin (render prop)","correct":"import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'"},{"note":"The `callback` prop expects a function that will receive the Facebook API response object upon successful login or error. This is not a direct import but a prop usage pattern.","symbol":"responseFacebook (callback)","correct":"const responseFacebook = (response) => { /* handle response */ }"}],"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."},"warnings":[{"fix":"Manually verify compatibility with the latest Facebook Graph API documentation. Consider migrating to a more actively maintained library or directly integrating the current Facebook JavaScript SDK to ensure compliance and functionality. Thoroughly test the component if you choose to use it.","message":"The Facebook Graph API and its JavaScript SDK undergo frequent updates. This package (last updated v4.1.1, around 2019/2020) likely relies on an older version of the Facebook SDK and API. This can cause login failures, unexpected behavior, or security vulnerabilities due to incompatibilities with current Facebook platform requirements.","severity":"breaking","affected_versions":">=4.1.1"},{"fix":"It is highly recommended to evaluate and migrate to alternatives for Facebook login. Options include directly integrating the official Facebook JavaScript SDK or using a more current, actively community-maintained library that supports modern React and Facebook API versions.","message":"This `react-facebook-login` package is no longer actively maintained. There have been no new features, bug fixes, or security patches released since its last update in the 2019/2020 timeframe. Using abandoned software can introduce significant security vulnerabilities, compatibility issues with newer React versions or browser standards, and a lack of support for critical bugs.","severity":"breaking","affected_versions":">=4.1.1"},{"fix":"Obtain a valid Facebook App ID from the Facebook Developer Console (https://developers.facebook.com/apps/) and pass it as the `appId` prop: `<FacebookLogin appId=\"YOUR_APP_ID\" ... />`. Ensure the App ID corresponds to a live Facebook application.","message":"The `appId` prop is absolutely required for the component to function correctly. Omitting or providing an invalid App ID will prevent the Facebook SDK from initializing properly, leading to login failures and errors in the browser console.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"It is generally safer to set `autoLoad={false}` and trigger the login explicitly via user interaction (e.g., a button click). If auto-loading is genuinely required, ensure robust state management is in place to prevent redundant login attempts and manage token expiration gracefully.","message":"Using `autoLoad={true}` can lead to an infinite login loop or unexpected token refreshes, especially in single-page applications where the component might be unmounted and remounted frequently. This can result in a poor user experience or rate-limiting issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using `react-icons`, update import paths to their current format. For example, change `import TiSocialFacebookCircular from 'react-icons/lib/ti/social-facebook-circular';` to `import { TiSocialFacebookCircular } from 'react-icons/ti';`.","message":"The example code for custom icons, such as `<TiSocialFacebookCircular />`, uses an outdated import path for `react-icons` (e.g., `'react-icons/lib/ti/social-facebook-circular'`). Modern versions of `react-icons` use a different import structure.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure you have a valid Facebook App ID set as the `appId` prop on the `FacebookLogin` component. Check the browser's developer console for any network errors related to `connect.facebook.net` or other SDK resources.","cause":"The Facebook App ID is missing, incorrect, or the SDK failed to initialize due to network issues or browser restrictions.","error":"Facebook SDK not loaded"},{"fix":"While this component is designed to handle SDK loading internally, persistent issues might indicate a network problem, ad blocker interference, or an outdated SDK reference within the component. Verify your internet connection and ensure no browser extensions are blocking Facebook scripts.","cause":"The Facebook JavaScript SDK has not fully loaded before the component attempts to interact with it, often due to timing issues or network delays.","error":"\"window.FB is undefined\" or \"FB is not defined\""},{"fix":"Navigate to your Facebook App settings (https://developers.facebook.com/apps/) under 'Settings' > 'Basic' > 'Platform'. For a 'Website' platform, ensure you have added *all* exact URLs (e.g., `http://localhost:3000`, `https://your-domain.com`) where your app runs, including the protocol (HTTP/HTTPS) and port number.","cause":"The URL from which your application is trying to perform the Facebook login is not registered in your Facebook App settings.","error":"Error: Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the Mobile Site URL in your App's settings."},{"fix":"Double-check your `appId`, the list of requested `scope` permissions, and confirm that your Facebook App is 'Live' and properly configured in the Facebook Developer Console. If all settings appear correct, try again after some time, as it might be a transient issue with Facebook's services.","cause":"This is a generic error from Facebook, often indicating an issue with the App ID, requested permissions, Facebook app status, or a temporary service outage on Facebook's side.","error":"Auth Dialog response: An error occurred. Please try again later."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}