{"id":13403782,"url":"https://github.com/keppelen/react-facebook-login","last_synced_at":"2025-05-14T08:09:42.735Z","repository":{"id":30673360,"uuid":"34229179","full_name":"keppelen/react-facebook-login","owner":"keppelen","description":"A Component React for Facebook Login","archived":false,"fork":false,"pushed_at":"2023-10-30T16:47:39.000Z","size":479,"stargazers_count":1187,"open_issues_count":117,"forks_count":407,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-09T01:38:24.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keppelen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-20T00:00:02.000Z","updated_at":"2025-03-22T06:46:35.000Z","dependencies_parsed_at":"2024-06-18T11:11:06.648Z","dependency_job_id":"464891c2-c6ed-4209-a48f-fecc32c3f5ed","html_url":"https://github.com/keppelen/react-facebook-login","commit_stats":{"total_commits":150,"total_committers":63,"mean_commits":2.380952380952381,"dds":0.5333333333333333,"last_synced_commit":"c0465ffd181dab9f644926d8209d471a22c51cb8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keppelen%2Freact-facebook-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keppelen%2Freact-facebook-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keppelen%2Freact-facebook-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keppelen%2Freact-facebook-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keppelen","download_url":"https://codeload.github.com/keppelen/react-facebook-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101559,"owners_count":22014908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:34.540Z","updated_at":"2025-05-14T08:09:37.726Z","avatar_url":"https://github.com/keppelen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React","Packages"],"sub_categories":["React Components","Auth"],"readme":"# React Facebook Login - [![Build Status](https://travis-ci.org/keppelen/react-facebook-login.svg?branch=master)](https://travis-ci.org/keppelen/react-facebook-login)\n\n\u003e A Component React for Facebook Login\n\n## Getting Started\n\n- `yarn add react-facebook-login` or `npm install react-facebook-login`\n- Your application will also need `react-dom` and `react` installed.\n\n## Development\n\n```shell\ngit clone https://github.com/keppelen/react-facebook-login.git \u0026\u0026 cd react-facebook-login\nnpm install react react-dom react-facebook-login --save --force\nnpm start\n```\n- navigate to [localhost:8080](http://localhost:8080)\n\n## How to use\n\n### Basic button with styling\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FacebookLogin from 'react-facebook-login';\n\nconst responseFacebook = (response) =\u003e {\n  console.log(response);\n}\n\nReactDOM.render(\n  \u003cFacebookLogin\n    appId=\"1088597931155576\"\n    autoLoad={true}\n    fields=\"name,email,picture\"\n    onClick={componentClicked}\n    callback={responseFacebook} /\u003e,\n  document.getElementById('demo')\n);\n```\n\n### Facebook button without styling\n\nIf you're providing all your own custom styling, you can use the render prop build. This build doesn't include any CSS or additional code needed to customise the look of the button, and instead leaves that entirely up to you. You can see an example of this in `demo/index.js`.\n\nTo make sure you import the right version, you will need to update your import line:\n\n```js\nimport FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'\n```\n\n```\n\u003cFacebookLogin\n  appId=\"1088597931155576\"\n  autoLoad\n  callback={responseFacebook}\n  render={renderProps =\u003e (\n    \u003cbutton onClick={renderProps.onClick}\u003eThis is my custom FB button\u003c/button\u003e\n  )}\n/\u003e\n```\n\nThe `render` function will be passed the following properties for you to use:\n\n- `onClick`\n- `isDisabled`\n- `isProcessing`\n- `isSdkLoaded`\n\n\n### Custom CSS Class and Icon\n\nBy default fontawesome is included, If you don't want to use default fontawesome icons, you can send an element in icon attribute\n\nFontawesome example:\n```js\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FacebookLogin from 'react-facebook-login';\n\nconst responseFacebook = (response) =\u003e {\n  console.log(response);\n}\n\nReactDOM.render(\n  \u003cFacebookLogin\n    appId=\"1088597931155576\"\n    autoLoad={true}\n    fields=\"name,email,picture\"\n    callback={responseFacebook}\n    cssClass=\"my-facebook-button-class\"\n    icon=\"fa-facebook\"\n  /\u003e,\n  document.getElementById('demo')\n);\n```\n\nCustom element example:\n```js\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FacebookLogin from 'react-facebook-login';\nimport TiSocialFacebookCircular from 'react-icons/lib/ti/social-facebook-circular';\n\nconst responseFacebook = (response) =\u003e {\n  console.log(response);\n}\n\nReactDOM.render(\n  \u003cFacebookLogin\n    appId=\"1088597931155576\"\n    autoLoad={true}\n    fields=\"name,email,picture\"\n    callback={responseFacebook}\n    cssClass=\"my-facebook-button-class\"\n    icon={\u003cTiSocialFacebookCircular /\u003e}\n  /\u003e,\n  document.getElementById('demo')\n);\n```\n\n### Custom permission\nBy default the component, request only 'public_profile' permission, you can change if you send 'scope', that is a string comma separated attribute.\n\nsee https://developers.facebook.com/docs/facebook-login/permissions for permissions list\n\n```js\n  import React from 'react';\n  import FacebookLogin from 'react-facebook-login';\n\n  class MyComponent extends React.Component {\n    responseFacebook(response) {\n      console.log(response);\n    }\n\n    render() {\n      return (\n        \u003cFacebookLogin\n          appId=\"1088597931155576\"\n          autoLoad={true}\n          fields=\"name,email,picture\"\n          scope=\"public_profile,user_friends,user_actions.books\"\n          callback={this.responseFacebook}\n        /\u003e\n      )\n    }\n  }\n\n  export default MyComponent;\n```\n\n### Server\n```js\n'use strict';\n\nimport React from 'react';\nimport FacebookLogin from 'react-facebook-login';\n\nclass MyComponent extends React.Component {\n  responseFacebook(response) {\n    console.log(response)\n  }\n\n  render() {\n    return (\n      \u003cFacebookLogin\n        appId=\"1088597931155576\"\n        autoLoad={true}\n        fields=\"name,email,picture\"\n        callback={this.responseFacebook}\n      /\u003e\n    )\n  }\n}\n\nexport default MyComponent;\n```\n\n\n## Parameters\n|    params    |     value           |                default value                        |\n|:------------:|:-------------------:|:---------------------------------------------------:|\n|     appId    |     string          |                Required                             |\n|     size     |     string          |              small - medium - metro                 |\n|     scope    |     string          |      public_profile, email, user_birthday           |\n|     fields   |     string          |              name,email,picture                     |\n|   callback   |     function        |             resultFacebookLogin                     |\n| returnScopes |     boolean         |                  false                              |\n|   autoLoad   |     boolean         |                  false                              |\n|     xfbml    |     boolean         |                  false                              |\n|    cookie    |     boolean         |                  false                              |\n|   textButton |     string          |           Login with Facebook                       |\n|   cssClass   |     string          | kep-login-facebook kep-login-facebook-[button-size] |\n| redirectUri  |     string          |               window.location.href (mobile-only)    |\n|   version    |     string          |                  3.1                                |\n|   icon       |     string|element  |                  none                               |\n|   language   |     string          |                  en_US                              |\n|   onClick    |     function        |                  Initial click on the component     |\n|   isMobile   |     boolean         |                  detected via userAgent             |\n| disableMobileRedirect |    boolean     |                        false                        | set to true for popup authentication on mobile devices |\n|   isDisabled |     boolean         |                  undefined                          |\n|     tag      |     string          |                  HTML Element, Ex: 'a', 'button'             |\n|   onFailure  |     function        | optional function to separatere the failed init     |\n|   state  |     string        | optional string to maintain state between the request and callback. This parameter should be used for preventing Cross-site Request Forgery and will be passed back to you, unchanged, in your redirect URI     |\n| authType | string | optional string to change authentication type |\n| responseType | string | optional string to change response type. Default value is 'code' |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeppelen%2Freact-facebook-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeppelen%2Freact-facebook-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeppelen%2Freact-facebook-login/lists"}