1.2.0 • Published 3 months ago

react-facebook-login-hook v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

react-facebook-login-hook

NPM version NPM downloads NPM bundle size

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

nametypeDescription
readybooleanIndicates if Facebook SDK script was loaded successfully
busybooleanHas a value of true when the hook waits for the login process to complete
logInfunction
logOutfunctionLog out Facebook user from your app
getProfilefunctionGet data from a Facebook user's profile. Can be called after successful login

useFacebookLogin options/parameters

nametypeRequiredDefault valueDescription
appIdstringYour application ID
scopestringpublic_profile,emailFacebook permissions
fieldsstringname,email,pictureFacebook fields to fetch
languagestringen_USSDK language
useRedirectbooleanundefinedUse redirect flow
onInitErrorfunctionundefinedCallback on init error (loading script element with Facebook SDK)
sdkInitParamsInitParamsundefinedParameters for the SDK initialization
loginOptionsLoginOptionsundefinedParameters for the Facebook login flow
dialogParamsDialogParamsundefinedParameters for the Facebook login dialog

InitParams (Facebook Documentation about init params)

nametypeRequiredDefault valueDescription
versionstringv16.0SDK version
cookiebooleanundefinedDetermines whether a cookie is created for the session or not
localStoragebooleantrueDetermines whether a long-lived access token for the session can be saved in localStorage
xfbmlbooleanundefinedDetermines whether XFBML tags used by social plugins are parsed
frictionlessRequestsbooleanundefinedFrictionless Requests are available to games on Facebook.com or on mobile web using the JavaScript SDK.

LoginOptions (Facebook Documentation about login options)

nametypeRequiredDefault valueDescription
auth_typestringundefinedSupports 3 values: rerequest, reauthenticate, reauthorize
return_scopesbooleanundefinedWhen true, the granted scopes will be returned in a comma-separated list in the grantedScopes field of the authResponse
enable_profile_selectorbooleanundefinedWhen true, prompt the user to grant permission for one or more Pages
profile_selector_idsstringundefinedComma separated list of IDs to display in the profile selector

DialogParams (Facebook Documentation about dialog params)

nametypeRequiredDefault valueDescription
redirect_uristringundefinedThe URL that you want to redirect the person logging in back to. This URL will capture the response from the Login Dialog
statestringundefinedA 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_typestringundefinedDetermines whether the response data included when the redirect back to the app occurs is in URL parameters or fragments

Other resources