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

Other resources

• Facebook Documentation