react-facebook-login-hook
Description
react-facebook-login-hook provides a React hook for Facebook login.
- TypeScript support
- Lightweight - no external dependencies
Quickstart:
const { busy, logIn, logOut, getProfile } = useFacebookLogin({ appId: "YOUR_APP_ID" });
async function handleLogin() {
const response = await logIn();
if (response?.status === "connected") {
// response.authResponse.accessToken - process access token
const profile = await getProfile();
console.log("profile", profile);
}
}
return (
<button disabled={busy} onClick={handleLogin}>
{busy ? "Please wait..." : "Log in with Facebook"}
</button>
);API
| name | type | Description |
|---|---|---|
| ready | boolean |
Indicates if Facebook SDK script was loaded successfully |
| busy | boolean |
Has a value of true when the hook waits for the login process to complete |
| logIn | function |
|
| logOut | function |
Log out Facebook user from your app |
| getProfile | function |
Get data from a Facebook user's profile. Can be called after successful login |
useFacebookLogin options/parameters
| name | type | Required | Default value | Description |
|---|---|---|---|---|
| appId | string |
✓ | Your application ID | |
| scope | string |
public_profile,email | Facebook permissions | |
| fields | string |
name,email,picture | Facebook fields to fetch | |
| language | string |
en_US | SDK language | |
| useRedirect | boolean |
undefined |
Use redirect flow | |
| onInitError | function |
undefined |
Callback on init error (loading script element with Facebook SDK) | |
| sdkInitParams | InitParams |
undefined |
Parameters for the SDK initialization | |
| loginOptions | LoginOptions |
undefined |
Parameters for the Facebook login flow | |
| dialogParams | DialogParams |
undefined |
Parameters for the Facebook login dialog |
InitParams (Facebook Documentation about init params)
| name | type | Required | Default value | Description |
|---|---|---|---|---|
| version | string |
v16.0 | SDK version | |
| cookie | boolean |
undefined |
Determines whether a cookie is created for the session or not | |
| localStorage | boolean |
true | Determines whether a long-lived access token for the session can be saved in localStorage | |
| xfbml | boolean |
undefined |
Determines whether XFBML tags used by social plugins are parsed | |
| frictionlessRequests | boolean |
undefined |
Frictionless Requests are available to games on Facebook.com or on mobile web using the JavaScript SDK. |
LoginOptions (Facebook Documentation about login options)
| name | type | Required | Default value | Description |
|---|---|---|---|---|
| auth_type | string |
undefined |
Supports 3 values: rerequest, reauthenticate, reauthorize | |
| return_scopes | boolean |
undefined |
When true, the granted scopes will be returned in a comma-separated list in the grantedScopes field of the authResponse | |
| enable_profile_selector | boolean |
undefined |
When true, prompt the user to grant permission for one or more Pages | |
| profile_selector_ids | string |
undefined |
Comma separated list of IDs to display in the profile selector |
DialogParams (Facebook Documentation about dialog params)
| name | type | Required | Default value | Description |
|---|---|---|---|---|
| redirect_uri | string |
undefined |
The URL that you want to redirect the person logging in back to. This URL will capture the response from the Login Dialog | |
| state | string |
undefined |
A string value created by your app to maintain state between the request and callback. This parameter should be used for preventing Cross-site Request Forgery. | |
| response_type | string |
undefined |
Determines whether the response data included when the redirect back to the app occurs is in URL parameters or fragments |