Package Exports

facebook-oauth-react
facebook-oauth-react/cjs/index.js
facebook-oauth-react/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (facebook-oauth-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;
}