Skip to main content
The LoginButton component is a pre-built UI component that initiates Facebook Login or Logout when pressed. It automatically shows the appropriate button based on the user’s login state.

​
Import

import { LoginButton } from 'react-native-fbsdk-next';

​
Props

​
permissions

The permissions to request when the login button is pressed. 
permissions?: Array<string>
Type: Array<string>
Default: ['public_profile']
Platform: Both

​
Example

<LoginButton
  permissions={['public_profile', 'email', 'user_friends']}
  onLoginFinished={handleLogin}
  onLogoutFinished={handleLogout}
/>

​
Common Permissions

  • public_profile - Basic profile information (name, profile picture)
  • email - User’s email address
  • user_friends - List of friends who use your app
  • user_birthday - User’s birthday
  • user_photos - User’s photos
  • user_posts - User’s posts

​
onLoginFinished

Callback invoked when login completes, fails, or is cancelled. 
onLoginFinished?: (error: Record<string, unknown>, result: LoginResult) => void
Type: Function
Platform: Both

​
Parameters

ParameterTypeDescription
errorRecord<string, unknown>Error object if login failed, null otherwise
resultLoginResultResult object containing login status and permissions
LoginResult: 
type LoginResult = {
  isCancelled: boolean;
  grantedPermissions?: Array<string>;
  declinedPermissions?: Array<string>;
}

​
Example

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

function MyComponent() {
  const handleLoginFinished = async (error, result) => {
    if (error) {
      console.log('Login failed with error:', error);
      return;
    }
    
    if (result.isCancelled) {
      console.log('Login was cancelled');
      return;
    }
    
    console.log('Login success!');
    console.log('Granted:', result.grantedPermissions);
    console.log('Declined:', result.declinedPermissions);
    
    // Get access token
    const data = await AccessToken.getCurrentAccessToken();
    console.log('Access Token:', data.accessToken);
  };
  
  return (
    <LoginButton
      permissions={['public_profile', 'email']}
      onLoginFinished={handleLoginFinished}
      onLogoutFinished={() => console.log('Logged out')}
    />
  );
}

​
onLogoutFinished

Callback invoked when logout completes. 
onLogoutFinished?: () => void
Type: Function
Platform: Both

​
Example

<LoginButton
  permissions={['public_profile']}
  onLoginFinished={handleLogin}
  onLogoutFinished={() => {
    console.log('User logged out');
    // Clear user data, navigate to login screen, etc.
  }}
/>

​
loginTrackingIOS

The desired tracking preference for iOS login. Use 'limited' for Limited Login (privacy-focused) or 'enabled' for traditional login. 
loginTrackingIOS?: 'enabled' | 'limited'
Type: 'enabled' | 'limited'
Default: 'enabled'
Platform: iOS only
iOS 14.5+ requires Limited Login when users opt out of App Tracking Transparency. Setting this to 'limited' ensures your app works for all users.

​
Example

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

function MyComponent() {
  const handleLoginFinished = async (error, result) => {
    if (error || result.isCancelled) return;
    
    if (Platform.OS === 'ios') {
      const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
      if (authToken) {
        console.log('Limited Login - Auth Token:', authToken.authenticationToken);
      } else {
        const accessToken = await AccessToken.getCurrentAccessToken();
        console.log('Traditional Login - Access Token:', accessToken.accessToken);
      }
    }
  };
  
  return (
    <LoginButton
      permissions={['public_profile', 'email']}
      loginTrackingIOS="limited" // Enable Limited Login for iOS
      onLoginFinished={handleLoginFinished}
      onLogoutFinished={() => console.log('Logged out')}
    />
  );
}

​
nonceIOS

An optional nonce to use for iOS login validation. A unique nonce is automatically generated if not provided. 
nonceIOS?: string
Type: string
Platform: iOS only
The nonce must be a non-empty string without whitespace. Invalid nonces will be ignored.

​
Example

import { LoginButton } from 'react-native-fbsdk-next';

function generateNonce() {
  return `${Date.now()}-${Math.random().toString(36).substring(7)}`;
}

function MyComponent() {
  const nonce = generateNonce();
  
  return (
    <LoginButton
      permissions={['public_profile', 'email']}
      loginTrackingIOS="limited"
      nonceIOS={nonce} // Custom nonce for validation
      onLoginFinished={handleLogin}
      onLogoutFinished={handleLogout}
    />
  );
}

​
loginBehaviorAndroid

The behavior to use when attempting login on Android. 
loginBehaviorAndroid?: 'native_with_fallback' | 'native_only' | 'web_only'
Type: 'native_with_fallback' | 'native_only' | 'web_only'
Default: 'native_with_fallback'
Platform: Android only
  • 'native_with_fallback' - Try Facebook app, fall back to web dialog
  • 'native_only' - Only use Facebook app
  • 'web_only' - Only use web dialog

​
Example

<LoginButton
  permissions={['public_profile', 'email']}
  loginBehaviorAndroid="web_only" // Force web dialog on Android
  onLoginFinished={handleLogin}
  onLogoutFinished={handleLogout}
/>

​
defaultAudience

The default audience for posts made by the application. 
defaultAudience?: 'friends' | 'everyone' | 'only_me'
Type: 'friends' | 'everyone' | 'only_me'
Default: 'friends'
Platform: Both
  • 'friends' - Only friends can see posts
  • 'everyone' - All Facebook users can see posts
  • 'only_me' - Only the user can see posts

​
Example

<LoginButton
  permissions={['public_profile', 'email']}
  defaultAudience="only_me" // Posts visible to user only
  onLoginFinished={handleLogin}
  onLogoutFinished={handleLogout}
/>

​
tooltipBehaviorIOS

The desired tooltip behavior for iOS. 
tooltipBehaviorIOS?: 'auto' | 'force_display' | 'disable'
Type: 'auto' | 'force_display' | 'disable'
Default: 'auto'
Platform: iOS only
  • 'auto' - Show tooltip automatically based on Facebook’s logic
  • 'force_display' - Always show the tooltip
  • 'disable' - Never show the tooltip

​
Example

<LoginButton
  permissions={['public_profile']}
  tooltipBehaviorIOS="disable" // Don't show tooltip
  onLoginFinished={handleLogin}
  onLogoutFinished={handleLogout}
/>

​
style

Custom styling for the button. 
style?: ViewStyle
Type: ViewStyle
Platform: Both
The default button size is 190x30. You can customize the size, but the button content (text and icon) is controlled by Facebook and cannot be changed.

​
Example

import { StyleSheet } from 'react-native';
import { LoginButton } from 'react-native-fbsdk-next';

function MyComponent() {
  return (
    <LoginButton
      permissions={['public_profile', 'email']}
      style={styles.loginButton}
      onLoginFinished={handleLogin}
      onLogoutFinished={handleLogout}
    />
  );
}

const styles = StyleSheet.create({
  loginButton: {
    height: 50,
    width: 250,
    marginVertical: 20,
  },
});

​
testID

Test identifier for automated testing. 
testID?: string
Type: string
Platform: Both

​
Example

<LoginButton
  permissions={['public_profile']}
  testID="facebook-login-button"
  onLoginFinished={handleLogin}
  onLogoutFinished={handleLogout}
/>

​
Complete Example

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  ActivityIndicator,
} from 'react-native';
import {
  LoginButton,
  AccessToken,
  AuthenticationToken,
  Profile,
} from 'react-native-fbsdk-next';

function LoginScreen() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [loginType, setLoginType] = useState(null);
  
  useEffect(() => {
    checkLoginStatus();
  }, []);
  
  const checkLoginStatus = async () => {
    try {
      const token = await AccessToken.getCurrentAccessToken();
      if (token) {
        const profile = await Profile.getCurrentProfile();
        setUser(profile);
        setLoginType('traditional');
      } else if (Platform.OS === 'ios') {
        const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
        if (authToken) {
          const profile = await Profile.getCurrentProfile();
          setUser(profile);
          setLoginType('limited');
        }
      }
    } catch (error) {
      console.error('Error checking login status:', error);
    } finally {
      setLoading(false);
    }
  };
  
  const handleLoginFinished = async (error, result) => {
    if (error) {
      console.log('Login error:', error);
      alert('Login failed. Please try again.');
      return;
    }
    
    if (result.isCancelled) {
      console.log('Login cancelled');
      return;
    }
    
    console.log('Login successful!');
    console.log('Granted permissions:', result.grantedPermissions);
    console.log('Declined permissions:', result.declinedPermissions);
    
    // Get user profile
    try {
      const profile = await Profile.getCurrentProfile();
      setUser(profile);
      
      // Check login type
      if (Platform.OS === 'ios') {
        const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
        if (authToken) {
          setLoginType('limited');
          console.log('Limited Login');
        } else {
          setLoginType('traditional');
          console.log('Traditional Login');
        }
      } else {
        setLoginType('traditional');
      }
    } catch (error) {
      console.error('Error fetching profile:', error);
    }
  };
  
  const handleLogoutFinished = () => {
    console.log('User logged out');
    setUser(null);
    setLoginType(null);
  };
  
  if (loading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
  
  return (
    <View style={styles.container}>
      {user ? (
        <View style={styles.profileContainer}>
          <Text style={styles.title}>Welcome!</Text>
          <Text style={styles.userName}>{user.name}</Text>
          <Text style={styles.userInfo}>User ID: {user.userID}</Text>
          {user.email && (
            <Text style={styles.userInfo}>Email: {user.email}</Text>
          )}
          <Text style={styles.loginTypeInfo}>
            Login Type: {loginType === 'limited' ? 'Limited' : 'Traditional'}
          </Text>
          
          <LoginButton
            permissions={['public_profile', 'email']}
            onLoginFinished={handleLoginFinished}
            onLogoutFinished={handleLogoutFinished}
            style={styles.loginButton}
          />
        </View>
      ) : (
        <View style={styles.loginContainer}>
          <Text style={styles.title}>Welcome to My App</Text>
          <Text style={styles.subtitle}>
            Please log in with Facebook to continue
          </Text>
          
          <LoginButton
            permissions={[
              'public_profile',
              'email',
              'user_friends',
            ]}
            loginTrackingIOS="limited"
            loginBehaviorAndroid="native_with_fallback"
            defaultAudience="friends"
            tooltipBehaviorIOS="auto"
            onLoginFinished={handleLoginFinished}
            onLogoutFinished={handleLogoutFinished}
            style={styles.loginButton}
            testID="facebook-login-button"
          />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  loginContainer: {
    alignItems: 'center',
  },
  profileContainer: {
    alignItems: 'center',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
    textAlign: 'center',
  },
  userName: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 10,
  },
  userInfo: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  loginTypeInfo: {
    fontSize: 14,
    color: '#1877F2',
    marginTop: 10,
    marginBottom: 20,
  },
  loginButton: {
    height: 50,
    width: 280,
    marginTop: 20,
  },
});

export default LoginScreen;

​
See Also

Login Methods

Learn about different login methods

LoginManager

Programmatic login with LoginManager

Limited Login

Understand iOS Limited Login

AccessToken

Work with access tokens

Build docs developers (and LLMs) love

Get started for freeTalk to us