Facebook Login for React Native

This guide provides examples for 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.

The LoginButton class is loaded from the react-native-fbsdk module. Use the following code to create a custom login for your application.

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
} = FBSDK;
      
var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + result.error);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}/>
      </View>
    );
  }
});

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 application 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 will disconnect your application from their Facebook account.

To add the Login class to your rendered view, add the Login tag to your render function.

class MyApplication extends Component {
  render() {
    return (
      <View>
        <Text>Welcome to the Facebook SDK for React Native!</Text>
        <Login />
      </View>
    );
  }
}

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.logInWithReadPermissions(['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);
  }
);