Facebook Login for React Native

This guide provides examples of using the Facebook Login Button and Login Manager components in your React Native applications.

To read more about the features available with Facebook login, see Facebook Login for Apps.

Login Button

The simplest way to add Facebook login functionality to your application is to use the LoginButton object from the SDK. When using the LoginButton, all of the complexity of creating a login user interface is handled for you. You specify the permissions that your application needs, and the object notifies you about user actions through attribute-bound functions. To learn more about permissions, see Permissions Overview.

To create a Facebook login for your app, copy the following code into a file called FBLoginButton.js. Note that to use the LoginButton object, you must import the LoginButton class from the react-native-fbsdk module.

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton } from 'react-native-fbsdk';

export default class FBLoginButton extends Component {
 render() {
   return (
     <View>
       <LoginButton
         publishPermissions={["email"]}
         onLoginFinished={
           (error, result) => {
             if (error) {
               alert("Login failed with error: " + error.message);
             } else if (result.isCancelled) {
               alert("Login was cancelled");
             } else {
               alert("Login was successful with permissions: " + result.grantedPermissions)
             }
           }
         }
         onLogoutFinished={() => alert("User logged out")}/>
     </View>
   );
 }
};

module.exports = FBLoginButton;

To change the publishing permissions, modify the publishPermissions attribute of the LoginButton tag. For a list of available permissions, see Permissions Reference.

When the login has completed, the function you provide for the onLoginFinished attribute is executed. As you can infer from the example, error conditions are passed in the first parameter, and results in the second. A null error state doesn’t indicate a successful login. When a login has completed successfully, meaning that the user has a Facebook account and authorizes your application to access it, then the permissions that they have granted the app are exposed via the grantedPermissions property of the result.

After a succesful login, the view of the text of the login button changes to “Log out” to indicate that clicking on it disconnects your app from their Facebook account.

To add the FBLoginButton class to your rendered view, add the FBLoginButton tag to your render function in the file index.ios.js.

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

var FBLoginButton = require('./FBLoginButton');

export default class YourApp extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Text style={styles.label}>Welcome to the Facebook SDK for React Native!</Text>
       <FBLoginButton />
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 label: {
   fontSize: 16,
   fontWeight: 'normal',
   marginBottom: 48,
 },
});

AppRegistry.registerComponent('YourApp', () => YourApp);

Login Manager

The LoginManager class is used to request additional permissions for a session or to provide login functionality using a custom UI. Like LoginButton, the LoginManager class is loaded from the react-native-fbsdk module. The example below performs a login with minimal permissions.

const FBSDK = require('react-native-fbsdk');
const {
 LoginManager,
} = FBSDK;
   
// ...

// Attempt a login using the Facebook login dialog,
// asking for default permissions.
LoginManager.logInWithPermissions(['public_profile']).then(
 function(result) {
   if (result.isCancelled) {
     alert('Login was cancelled');
   } else {
     alert('Login was successful with permissions: '
       + result.grantedPermissions.toString());
   }
 },
 function(error) {
   alert('Login failed with error: ' + error);
 }
);

‍