https://github.com/greatsumini/react-facebook-login
Well-Typed React Component for Facebook Login
https://github.com/greatsumini/react-facebook-login
facebook facebook-login jest oauth react reactjs storybook typescript
Last synced: about 1 year ago
JSON representation
Well-Typed React Component for Facebook Login
- Host: GitHub
- URL: https://github.com/greatsumini/react-facebook-login
- Owner: greatSumini
- License: mit
- Created: 2021-04-30T09:27:32.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-07T21:39:42.000Z (about 1 year ago)
- Last Synced: 2025-04-08T09:11:45.988Z (about 1 year ago)
- Topics: facebook, facebook-login, jest, oauth, react, reactjs, storybook, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@greatsumini/react-facebook-login
- Size: 22.4 MB
- Stars: 112
- Watchers: 2
- Forks: 30
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Facebook Login
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[](https://github.com/greatSumini/react-facebook-login/actions/workflows/ci.yml)
[](https://github.com/greatSumini/react-facebook-login)
React Component for Facebook Login. aims to improve [react-facebook-login](https://github.com/keppelen/react-facebook-login).
[한글 가이드](https://sumini.dev/guide/016-react-facebook-login/)
- 💙 Typescript support
- 📦 6kb mini library
- 👫 All browsers supported
- 🏃 Currently maintaining
## Table of contents
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Component](#component)
- [FacebookLoginClient](#facebookloginclient)
- [Examples](#examples)
- [Props](#props)
- [Stay in touch](#stay-in-touch)
- [License](#license)
- [Links](#links)
## Getting Started
```shell
npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-login
```
## Usage
### 🚨 Common Issue - "Sorry, something went wrong"
Facebook requires apps in development to add users explicitly as testers.
Please add app test users under the "App Roles" section. the you can login as one of the added test users.
### Component
```tsx
import FacebookLogin from '@greatsumini/react-facebook-login';
// default
{
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
/>
// custom style
// custom render function
{
console.log('Login Success!', response);
}}
onFail={(error) => {
console.log('Login Failed!', error);
}}
onProfileSuccess={(response) => {
console.log('Get Profile Success!', response);
}}
render={({ onClick, logout }) => (
)}
/>
// custom params, options
```
### FacebookLoginClient
You can manually call facebook sdk related functions with FacebookLoginClient
```tsx
import { FacebookLoginClient } from '@greatsumini/react-facebook-login';
FacebookLoginClient.getLoginStatus((res) => {
console.log(res.status);
});
FacebookLoginClient.login((res) => {
console.log(res);
});
FacebookLoginClient.getProfile((res) => {
console.log(res.id, res.name, res.email);
});
FacebookLoginClient.logout(() => {
console.log('logout completed!');
});
```
## Examples
You can checkout examples [here](./examples)
## Props
Check all available params,options [here](./docs/params.md)
| Property | Description | Type | Default |
| ---------------- | ------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------- |
| appId \* | Your application ID. | string | - |
| language | API version | string | 'en_US' |
| scope | Comma seperated list of permissions for login. | string | 'public_profile, email' |
| fields | fields return by /me (profile) | string | 'name,email,picture' |
| onSuccess | | function | - |
| onFail | | function | - |
| onProfileSuccess | | function | - |
| style | css properties for login button | CSSProperties | - |
| children | Children Component | ReactNode \| ReactNodeArray | "Login with Facebook" |
| render | Callback which render custom component | function | - |
| autoLoad | if true, request login on mount | boolean | false |
| 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))) |
| useCustomChat | if true, append 'xfbml.customerchat' to sdk url | boolean | false |
| initParams | params for FB.init | InitParams | [docs](./docs/params.md) |
| dialogParams | params for login dialog | DialogParams | [docs](./docs/params.md) |
| loginOptions | options for FB.login | LoginOptions | [docs](./docs/params.md) |
## Stay in touch
- Author - [Sumin Choi](https://sumini.dev)
## License
React Facebook Login is [MIT licensed](./LICENSE).
## Links
- [NPM](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
- [GitHub](https://github.com/greatSumini/react-facebook-login)
- [(Official) Facebook Login Guide](https://developers.facebook.com/docs/facebook-login/web)