# react-facebook-login-lite

> A small library for logging in to facebook customized by me, containing some simple functions for some of my small projects.

Latest version **1.0.0** (published 2021-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-facebook-login-lite
pnpm add react-facebook-login-lite
yarn add react-facebook-login-lite
bun add react-facebook-login-lite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-05-04 |
| First published | 2021-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | DevAT-VietNam |
| Maintainers | devatvietnam |
| Keywords | react, react-facebook-login, react-login, react-facebook, facebook-login |

## Links

- npm: https://www.npmjs.com/package/react-facebook-login-lite
- Repository: https://github.com/devat-youtuber/react-facebook-login-lite
- Issues: https://github.com/devat-youtuber/react-facebook-login-lite/issues
- npm.io page: https://npm.io/package/react-facebook-login-lite

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-05-04

## README

# React Facebook Login Lite

> React Facebook Login / Log-in Component for React


## Install
```
npm install react-facebook-login-lite
```

## How to use
```js
import FacebookLogin from 'react-facebook-login-lite';
// or
import { FacebookLogin } from 'react-facebook-login-lite';


const onSuccess = (response) => {
  console.log(response);
}

const onFailure = (error) => {
  console.log(error);
}

//or typescript
const onSuccess = (response: FacebookLoginAuthResponse) => {
  console.log(response);
}

const onFailure = (error: any) => {
  console.log(error);
}


ReactDOM.render(
    <FacebookLogin 
      appId="your-facebook-app-id"
      onSuccess={onSuccess}
      onFailure={onFailure}
    />,
    document.getElementById('root')
);
```

## Stay Logged in
`isSignedIn={true}` attribute will call `onSuccess` callback on load to keep the user signed in.
```jsx
    <FacebookLogin 
      appId="your-facebook-app-id"
      onSuccess={onSuccess}
      onFailure={onFailure}
      isSignedIn={true}
    />
```


## onSuccess callback

 1. In the `onSuccess(response) {...}` callback function, You will get a response includes:
  * `authResponse`
  * `status`
  * `user` 
 2. Send `const { accessToken, userID } = response.authResponse` to your server 
 3. Have your server sending a GET request to `https://graph.facebook.com/v3.0/${userID}/?fields=id,first_name,last_name,middle_name,email,picture&access_token=${accessToken}`


More details can be found in the official Facebook for devolopers:
 * https://developers.facebook.com/docs/facebook-login/web


## Login Props

|    params    |   value  |             default value            |   description    |
|:------------:|:--------:|:------------------------------------:|:----------------:|
|     appId    |  string  |               REQUIRED               | You can create a appId by creating a [facebook app](https://developers.facebook.com/apps/?show_reminder=true) |
|     scope    |  string  |          public_profile,email        |                  |
|   language   |  string  |               en_US                  |                  |
|    version   |  string  |               v10.0                  |                  |
|     fields   |  string  | id,email,first_name,last_name,middle_name,name,picture,short_name |                  |
|     height   |  string  |                50px                  |                  |
|     theme    |  string  |               light                  | There are two values: 'dark' and 'light'  |
|    imgSrc    |  string  |              facebook                |                  |
|    btnText   |  string  |         Sign in with Facebook        |                  |
|   onSuccess  | function |               REQUIRED               |                  |
|   onFailure  | function |               REQUIRED               |                  |
| isSignedIn   | boolean  |                false                 | If true will auto login your facebook |


## onFailure callback

onFailure callback is called when either initialization or a signin attempt fails.

| property name |  value   |             definition               |
|:-------------:|:--------:|:------------------------------------:|
|   error       |  any     |           Error code                 |



More details can be found in the official Facebook docs:
 * [Facebook for developers](https://developers.facebook.com/docs/facebook-login/)


### 👉 Follow me on Youtube: [@devat-vietnam](https://www.youtube.com/c/DevATHTML)
### 👉 Buy Me a Coffee . Thank You ! 💗: (https://www.buymeacoffee.com/QK1DkYS)

---
_Source: https://npm.io/package/react-facebook-login-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._