React Facebook Authentication

Allows developers to receive a facebook authentication token that can be used by a backend service.

Installation

To install the latest version:

npm install --save react-facebook-auth

or

yarn add react-facebook-auth

How to use

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookAuth from 'react-facebook-auth';

const MyFacebookButton = ({ onClick }) => (
  <button onClick={onClick}>
    Login with facebook
  </button>
);

const authenticate = (response) => {
  console.log(response);
  // Api call to server so we can validate the token
};

const App = () => (
  <div>
    <h1>Facebook Auth</h1>
    <FacebookAuth
      appId="<app-id>"
      callback={authenticate}
      component={MyFacebookButton}
    />
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

A full example can be found in examples directory.

Available Props

Params	Type	Info
appId	string	Facebook application id. Check https://developers.facebook.com
scope	string	Comma separated list of extended permissions
fields	string	name,email,picture
callback	function	Callback triggered when we receive a response from facebook.
onFailure	function	If provided, will be triggered on failed requests.
returnScopes	boolean	When true, the granted scopes will be returned in a comma-separated list in the grantedScopes field of the authResponse
autoLoad	boolean	Defaults to: false
xfbml	boolean	Defaults to: false
cookie	boolean	Defaults to: false
reAuthenticate	boolean	Asks the person to re-authenticate unconditionally. Defaults to: false
reRequest	boolean	Asks the person again for revoked permissions. Defaults to: false
redirectUri	string	Defaults to: '/'
version	string	Facebook SDK version. Defaults to: 2.8
language	string	Defaults to: en_US
disableRedirect	boolean	Defaults to: false
customProps	object	Allows custom props passing to the custom element.
component	node	Custom react element that returns a button element.

License

MIT