React Facebook Login

React Component for Facebook Login. aims to improve react-facebook-login.
한글 가이드

• 💙 Typescript support
• 📦 6kb mini library
• 👫 All browsers supported
• 🏃 Currently maintaining

Table of contents

• Getting Started
• Usage
  • Component
  • FacebookLoginClient
• Examples
• Props
• Stay in touch
• License
• Links

Getting Started

npm i --save @greatsumini/react-facebook-login
# or
yarn add @greatsumini/react-facebook-login

Usage

🚨 Common Issue - "Sorry, something went wrong"

Facebook requires apps in development to add users explicitly as testers.

Please add app test users under the "App Roles" section. the you can login as one of the added test users.

Component

import FacebookLogin from '@greatsumini/react-facebook-login';

// default
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
/>

// custom style
<FacebookLogin
  appId="1088597931155576"
  style={{
    backgroundColor: '#4267b2',
    color: '#fff',
    fontSize: '16px',
    padding: '12px 24px',
    border: 'none',
    borderRadius: '4px',
  }}
/>

// custom render function
<FacebookLogin
  appId="1088597931155576"
  onSuccess={(response) => {
    console.log('Login Success!', response);
  }}
  onFail={(error) => {
    console.log('Login Failed!', error);
  }}
  onProfileSuccess={(response) => {
    console.log('Get Profile Success!', response);
  }}
  render={({ onClick, logout }) => (
    <CustomComponent onClick={onClick} onLogoutClick={logout} />
  )}
/>

// custom params, options
<FacebookLogin
  appId="1088597931155576"
  useRedirect
  initParams={{
    version: 'v10.0',
    xfbml: true,
  }}
  dialogParams={{
    response_type: 'token',
  }}
  loginOptions={{
    return_scopes: true,
  }}
/>

FacebookLoginClient

You can manually call facebook sdk related functions with FacebookLoginClient

import { FacebookLoginClient } from '@greatsumini/react-facebook-login';

FacebookLoginClient.getLoginStatus((res) => {
  console.log(res.status);
});

FacebookLoginClient.login((res) => {
  console.log(res);
});

FacebookLoginClient.getProfile((res) => {
  console.log(res.id, res.name, res.email);
});

FacebookLoginClient.logout(() => {
  console.log('logout completed!');
});

Examples

You can checkout examples here

Props

Check all available params,options here

Property	Description	Type	Default
appId *	Your application ID.	string	-
language	API version	string	'en_US'
scope	Comma seperated list of permissions for login.	string	'public_profile, email'
fields	fields return by /me (profile)	string	'name,email,picture'
onSuccess		function	-
onFail		function	-
onProfileSuccess		function	-
style	css properties for login button	CSSProperties	-
children	Children Component	ReactNode | ReactNodeArray	"Login with Facebook"
render	Callback which render custom component	function	-
autoLoad	if true, request login on mount	boolean	false
useRedirect	if true, use redirect instead of window.FB.login	boolean	false (forced to be true in fb browers (ref))
useCustomChat	if true, append 'xfbml.customerchat' to sdk url	boolean	false
initParams	params for FB.init	InitParams	docs
dialogParams	params for login dialog	DialogParams	docs
loginOptions	options for FB.login	LoginOptions	docs

Stay in touch

• Author - Sumin Choi

License

React Facebook Login is MIT licensed.

Links

• NPM
• GitHub
• (Official) Facebook Login Guide