facebook-oauth-react

facebook-oauth-react

This package made for easily facebook oauth implementation in your react app

How to install

yarn:

yarn add react-facebook-oauth

npm:

npm install react-facebook-oauth

pnpm:

pnpm add react-facebook-oauth

Usage

Go to Meta for developers and create an app after login. Then setup facebook login service.

Wrap your app in <FacebookOAuthProvider>

import ReactDOM from "react-dom/client";
import { FacebookOAuthProvider } from "react-facebook-oauth";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <FacebookOAuthProvider appId={APP_ID} appVersion={APP_VERSION}>
    <YOUR-APP>
  </FacebookOAuthProvider>
);

Use useFacebookLogin() hook.

import { useFacebookLogin } from "react-facebook-oauth";

const App = () => {
  const facebookLogin = useFacebookLogin({ onSuccess: (authResponse) => console.log(authResponse) });

  <MyCustomButton onClick={() => facebookLogin()}>
    Login with facebook
  </MyCustomButton>
};

API:

<FacebookOAuthProvider>

Property	Description
appId	Required: Facebook App ID
appVersion	Required: Facebook App Version
onScriptLoadSuccess	Optional: Callback fires on load FB script success
onScriptLoadError	Optional: Callback fires on load FB script failure

useFacebookLogin

Property	Description
onSuccess	Required: Callback fires on success, This function have an AuthResponse argument
onError	Optional: Callback fires on error

AuthResponse

{
  accessToken: string;
  expiresIn: number | string;
  reauthorize_required_in: number;
  graphDomain: string;
  signedRequest: string;
  userID: string;
}