react-native-fbsdk-next

To comply with Apple's App Tracking Transparency (ATT), iOS users who opt out of tracking can use Limited Login.

Key Concepts

• loginTrackingIOS: Set this to "limited" on the LoginButton or in LoginManager to enable this mode. The default is "enabled".
• AuthenticationToken vs AccessToken: In Limited Login mode, an AccessToken is unavailable. Instead, you must use AuthenticationToken.getAuthenticationTokenIOS().
• Graph API Restriction: An AuthenticationToken cannot be used to make requests to the Facebook Graph API. Attempting to do so will result in an OAuthException (Code 190).
• nonceIOS: You can optionally pass a custom non-empty string as a nonce for server-side validation.

import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import {
  AccessToken,
  AuthenticationToken,
  LoginButton,
} from 'react-native-fbsdk-next';

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          onLoginFinished={(error, result) => {
            if (error) {
              console.log("login has error: " + result.error);
            } else if (result.isCancelled) {
              console.log("login is cancelled.");
            } else {
              if (Platform.OS === "ios") {
                AuthenticationToken.getAuthenticationTokenIOS().then((data) => {
                  console.log(data?.authenticationToken);
                });
              } else {
                AccessToken.getCurrentAccessToken().then((data) => {
                  console.log(data?.accessToken.toString());
                });
              }
            }
          }}
          onLogoutFinished={() => console.log("logout.")}
          loginTrackingIOS="limited"
          nonceIOS="my_nonce"
        />
      </View>
    );
  }
}

Due to Apple privacy requirements, the Facebook iOS SDK no longer supports auto-initialization. You must initialize the SDK manually using one of two methods:

1. Platform-neutral (JavaScript)

Use this method if you want to control initialization from your JS code (e.g., after a GDPR consent flow). This works on both iOS and Android.

2. iOS Native Initialization

To initialize the SDK as early as possible on iOS, add the following to your AppDelegate.m file. This is recommended for optimal performance.

Note: You must add the necessary imports for AuthenticationServices, SafariServices, and FBSDKCoreKit.

#import <AuthenticationServices/AuthenticationServices.h>
#import <SafariServices/SafariServices.h>
#import <FBSDKCoreKit/FBSDKCoreKit-Swift.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FBSDKApplicationDelegate.sharedInstance initializeSDK];
  // your other stuff
}

You can implement Facebook login using either the pre-built LoginButton component or the LoginManager API for custom UI.

Using LoginButton

The LoginButton component provides a ready-to-use UI. Use onLoginFinished to handle success, errors, or cancellations, and onLogoutFinished for logout events.

Using LoginManager

For custom UI, use LoginManager.logInWithPermissions. This returns a Promise that resolves with the login result or rejects with an error.

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

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          onLoginFinished={(error, result) => {
            if (error) {
              console.log("login has error: " + result.error);
            } else if (result.isCancelled) {
              console.log("login is cancelled.");
            } else {
              AccessToken.getCurrentAccessToken().then((data) => {
                console.log(data.accessToken.toString())
              })
            }
          }}
          onLogoutFinished={() => console.log("logout.")}/>
      </View>
    );
  }
}

If using Expo in Bare Workflow, your AppDelegate.swift extends ExpoAppDelegate. Follow this pattern:

import Expo
import React
import FBSDKCoreKit
import AppTrackingTransparency

@UIApplicationMain
public class AppDelegate: ExpoAppDelegate {
  
  public override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    
    // Initialize Facebook SDK
    ApplicationDelegate.shared.application(
      application,
      didFinishLaunchingWithOptions: launchOptions
    )
    
    // Request tracking authorization
    if #available(iOS 14, *) {
      ATTrackingManager.requestTrackingAuthorization { _ in
        AppEvents.shared.activateApp()
      }
    } else {
      AppEvents.shared.activateApp()
    }
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
  
  public override func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    let handledByFB = ApplicationDelegate.shared.application(
      app, open: url, options: options)
    let handledByRN = RCTLinkingManager.application(
      app, open: url, options: options)
    let handledBySuper = super.application(
      app, open: url, options: options)
    
    return handledByFB || handledByRN || handledBySuper
  }
}

For React Native versions >= 0.77 using Swift, modify /ios/PROJECT/AppDelegate.swift:

1. Add imports:

import FBSDKCoreKit
import AppTrackingTransparency

2. Initialize in didFinishLaunchingWithOptions:

public override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
) -> Bool {
  
  // Initialize Facebook SDK
  ApplicationDelegate.shared.application(
    application,
    didFinishLaunchingWithOptions: launchOptions
  )
  
  // Request App Tracking Transparency (iOS 14+)
  if #available(iOS 14, *) {
    ATTrackingManager.requestTrackingAuthorization { _ in
      AppEvents.shared.activateApp()
    }
  } else {
    AppEvents.shared.activateApp()
  }
  
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

3. Add openURL method (Required for Facebook SSO):

public override func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  // Facebook SDK must be checked FIRST
  let handledByFB = ApplicationDelegate.shared.application(
    app, open: url, options: options)
  
  // Then React Native Linking
  let handledByRN = RCTLinkingManager.application(
    app, open: url, options: options)
  
  // Finally super
  let handledBySuper = super.application(
    app, open: url, options: options)
  
  return handledByFB || handledByRN || handledBySuper
}