{"id":15481674,"url":"https://github.com/greatsumini/react-facebook-login","last_synced_at":"2025-04-08T09:11:52.880Z","repository":{"id":37011837,"uuid":"363091229","full_name":"greatSumini/react-facebook-login","owner":"greatSumini","description":"Well-Typed React Component for Facebook Login","archived":false,"fork":false,"pushed_at":"2025-04-07T21:39:42.000Z","size":23483,"stargazers_count":112,"open_issues_count":20,"forks_count":30,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T09:11:45.988Z","etag":null,"topics":["facebook","facebook-login","jest","oauth","react","reactjs","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@greatsumini/react-facebook-login","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greatSumini.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2021-04-30T09:27:32.000Z","updated_at":"2025-04-03T01:20:01.000Z","dependencies_parsed_at":"2024-01-27T21:23:50.822Z","dependency_job_id":"220c2f4a-46a9-43cb-af70-f90eae22fb01","html_url":"https://github.com/greatSumini/react-facebook-login","commit_stats":{"total_commits":1132,"total_committers":13,"mean_commits":87.07692307692308,"dds":"0.42844522968197885","last_synced_commit":"1b257c3eece1f61274c38066fc83c63b66329754"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatSumini%2Freact-facebook-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatSumini%2Freact-facebook-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatSumini%2Freact-facebook-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greatSumini%2Freact-facebook-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greatSumini","download_url":"https://codeload.github.com/greatSumini/react-facebook-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"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":["facebook","facebook-login","jest","oauth","react","reactjs","storybook","typescript"],"created_at":"2024-10-02T05:05:27.232Z","updated_at":"2025-04-08T09:11:52.854Z","avatar_url":"https://github.com/greatSumini.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Facebook Login\n\n[![NPM version](https://img.shields.io/npm/v/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)\n[![NPM downloads](https://img.shields.io/npm/dm/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)\n[![NPM bundle size](https://img.shields.io/bundlephobia/min/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)\n[![CI](https://img.shields.io/github/actions/workflow/status/greatsumini/react-facebook-login/ci.yml?label=CI)](https://github.com/greatSumini/react-facebook-login/actions/workflows/ci.yml)\n[![GitHub Stars](https://img.shields.io/github/stars/greatSumini/react-facebook-login?style=social)](https://github.com/greatSumini/react-facebook-login)\n\n\u003cbr/\u003e\n\nReact Component for Facebook Login. aims to improve [react-facebook-login](https://github.com/keppelen/react-facebook-login).\u003cbr/\u003e\n[한글 가이드](https://sumini.dev/guide/016-react-facebook-login/)\n\n- 💙 Typescript support\n- 📦 6kb mini library\n- 👫 All browsers supported\n- 🏃 Currently maintaining\n\n## Table of contents\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n  - [Component](#component)\n  - [FacebookLoginClient](#facebookloginclient)\n- [Examples](#examples)\n- [Props](#props)\n- [Stay in touch](#stay-in-touch)\n- [License](#license)\n- [Links](#links)\n\n## Getting Started\n\n```shell\nnpm i --save @greatsumini/react-facebook-login\n# or\nyarn add @greatsumini/react-facebook-login\n```\n\n## Usage\n\n### 🚨 Common Issue - \"Sorry, something went wrong\"\n\nFacebook requires apps in development to add users explicitly as testers.\n\nPlease add app test users under the \"App Roles\" section. the you can login as one of the added test users.\n\n### Component\n\n```tsx\nimport FacebookLogin from '@greatsumini/react-facebook-login';\n\n// default\n\u003cFacebookLogin\n  appId=\"1088597931155576\"\n  onSuccess={(response) =\u003e {\n    console.log('Login Success!', response);\n  }}\n  onFail={(error) =\u003e {\n    console.log('Login Failed!', error);\n  }}\n  onProfileSuccess={(response) =\u003e {\n    console.log('Get Profile Success!', response);\n  }}\n/\u003e\n\n// custom style\n\u003cFacebookLogin\n  appId=\"1088597931155576\"\n  style={{\n    backgroundColor: '#4267b2',\n    color: '#fff',\n    fontSize: '16px',\n    padding: '12px 24px',\n    border: 'none',\n    borderRadius: '4px',\n  }}\n/\u003e\n\n// custom render function\n\u003cFacebookLogin\n  appId=\"1088597931155576\"\n  onSuccess={(response) =\u003e {\n    console.log('Login Success!', response);\n  }}\n  onFail={(error) =\u003e {\n    console.log('Login Failed!', error);\n  }}\n  onProfileSuccess={(response) =\u003e {\n    console.log('Get Profile Success!', response);\n  }}\n  render={({ onClick, logout }) =\u003e (\n    \u003cCustomComponent onClick={onClick} onLogoutClick={logout} /\u003e\n  )}\n/\u003e\n\n// custom params, options\n\u003cFacebookLogin\n  appId=\"1088597931155576\"\n  useRedirect\n  initParams={{\n    version: 'v10.0',\n    xfbml: true,\n  }}\n  dialogParams={{\n    response_type: 'token',\n  }}\n  loginOptions={{\n    return_scopes: true,\n  }}\n/\u003e\n```\n\n### FacebookLoginClient\n\nYou can manually call facebook sdk related functions with FacebookLoginClient\n\n```tsx\nimport { FacebookLoginClient } from '@greatsumini/react-facebook-login';\n\nFacebookLoginClient.getLoginStatus((res) =\u003e {\n  console.log(res.status);\n});\n\nFacebookLoginClient.login((res) =\u003e {\n  console.log(res);\n});\n\nFacebookLoginClient.getProfile((res) =\u003e {\n  console.log(res.id, res.name, res.email);\n});\n\nFacebookLoginClient.logout(() =\u003e {\n  console.log('logout completed!');\n});\n```\n\n## Examples\n\nYou can checkout examples [here](./examples)\n\n## Props\n\nCheck all available params,options [here](./docs/params.md)\n\n| Property         | Description                                      | Type                        | Default                                                                                                       |\n| ---------------- | ------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| appId \\*         | Your application ID.                             | string                      | -                                                                                                             |\n| language         | API version                                      | string                      | 'en_US'                                                                                                       |\n| scope            | Comma seperated list of permissions for login.   | string                      | 'public_profile, email'                                                                                       |\n| fields           | fields return by /me (profile)                   | string                      | 'name,email,picture'                                                                                          |\n| onSuccess        |                                                  | function                    | -                                                                                                             |\n| onFail           |                                                  | function                    | -                                                                                                             |\n| onProfileSuccess |                                                  | function                    | -                                                                                                             |\n| style            | css properties for login button                  | CSSProperties               | -                                                                                                             |\n| children         | Children Component                               | ReactNode \\| ReactNodeArray | \"Login with Facebook\"                                                                                         |\n| render           | Callback which render custom component           | function                    | -                                                                                                             |\n| autoLoad         | if true, request login on mount                  | boolean                     | false                                                                                                         |\n| useRedirect      | if true, use redirect instead of window.FB.login | boolean                     | false (forced to be true in fb browers ([ref](https://github.com/greatSumini/react-facebook-login/issues/2))) |\n| useCustomChat    | if true, append 'xfbml.customerchat' to sdk url  | boolean                     | false                                                                                                         |\n| initParams       | params for FB.init                               | InitParams                  | [docs](./docs/params.md)                                                                                      |\n| dialogParams     | params for login dialog                          | DialogParams                | [docs](./docs/params.md)                                                                                      |\n| loginOptions     | options for FB.login                             | LoginOptions                | [docs](./docs/params.md)                                                                                      |\n\n\u003cbr/\u003e\n\n## Stay in touch\n\n- Author - [Sumin Choi](https://sumini.dev)\n\n## License\n\nReact Facebook Login is [MIT licensed](./LICENSE).\n\n## Links\n\n- [NPM](https://www.npmjs.com/package/@greatsumini/react-facebook-login)\n- [GitHub](https://github.com/greatSumini/react-facebook-login)\n- [(Official) Facebook Login Guide](https://developers.facebook.com/docs/facebook-login/web)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreatsumini%2Freact-facebook-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreatsumini%2Freact-facebook-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreatsumini%2Freact-facebook-login/lists"}