KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

react-facebook-login

★ 112 Open GitHub ↗

Well-Typed React Component for Facebook Login

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Facebook Login

[![NPM version](https://img.shields.io/npm/v/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[![NPM downloads](https://img.shields.io/npm/dm/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[![NPM bundle size](https://img.shields.io/bundlephobia/min/@greatsumini/react-facebook-login)](https://www.npmjs.com/package/@greatsumini/react-facebook-login)
[![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)
[![GitHub Stars](https://img.shields.io/github/stars/greatSumini/react-facebook-login?style=social)](https://github.com/greatSumini/react-facebook-login)

<br/>

React Component for Facebook Login. aims to improve [react-facebook-login](https://github.com/keppelen/react-facebook-login).<br/>
[한글 가이드](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
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
/>

// custom style
<FacebookLogin
  appId="1088597931155576"
  style={{
    backgroundColor: '#4267b2',
    color: '#fff',
    fontSize: '16px',
    padding: '12px 24px',
    border: 'none',
    borderRadius: '4px',
  }}
/>

// custom render function
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
  render={({ onClick, logout }) => (
    <CustomComponent onClick={onClick} onLogoutClick={logout} />
  )}
/>

// custom params, options
<FacebookLogin
  appId="1088597931155576"
  useRedirect
  initParams={{
    version: 'v10.0',
    xfbml: true,
  }}
  dialogParams={{
    response_type: 'token',
  }}
  loginOptions={{
    return_scopes: true,
  }}
/>
```

### 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)                                                                                      |

<br/>

## 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)

react-facebook-login

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README