import React, { useState } from 'react';
import { View, Button, Text, Platform, Alert } from 'react-native';
import {
LoginManager,
AccessToken,
AuthenticationToken,
Profile,
} from 'react-native-fbsdk-next';
function LoginExample() {
const [user, setUser] = useState(null);
const [loginType, setLoginType] = useState(null);
const handleLogin = async () => {
try {
// Configure login behavior (Android)
if (Platform.OS === 'android') {
LoginManager.setLoginBehavior('native_with_fallback');
LoginManager.setDefaultAudience('friends');
}
// Perform login
const result = await LoginManager.logInWithPermissions(
['public_profile', 'email', 'user_friends'],
Platform.OS === 'ios' ? 'limited' : undefined
);
if (result.isCancelled) {
Alert.alert('Login Cancelled', 'You cancelled the login');
return;
}
console.log('Granted permissions:', result.grantedPermissions);
console.log('Declined permissions:', result.declinedPermissions);
// Get user profile
const profile = await Profile.getCurrentProfile();
setUser(profile);
// Check which type of login
if (Platform.OS === 'ios') {
const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
if (authToken) {
setLoginType('limited');
console.log('Limited Login - Auth Token:', authToken.authenticationToken);
} else {
setLoginType('traditional');
const accessToken = await AccessToken.getCurrentAccessToken();
console.log('Traditional Login - Access Token:', accessToken.accessToken);
}
} else {
setLoginType('traditional');
const accessToken = await AccessToken.getCurrentAccessToken();
console.log('Access Token:', accessToken.accessToken);
}
} catch (error) {
console.error('Login error:', error);
Alert.alert('Login Error', error.message);
}
};
const handleLogout = () => {
LoginManager.logOut();
setUser(null);
setLoginType(null);
};
const requestMorePermissions = async () => {
try {
const result = await LoginManager.logInWithPermissions([
'user_birthday',
'user_hometown',
]);
if (!result.isCancelled) {
console.log('New permissions granted:', result.grantedPermissions);
Alert.alert('Success', 'Additional permissions granted');
}
} catch (error) {
console.error('Permission request failed:', error);
}
};
const handleReauthorize = async () => {
try {
const result = await LoginManager.reauthorizeDataAccess();
if (!result.isCancelled) {
Alert.alert('Success', 'Data access reauthorized');
}
} catch (error) {
console.error('Reauthorization failed:', error);
}
};
return (
<View style={{ padding: 20 }}>
{user ? (
<>
<Text style={{ fontSize: 18, marginBottom: 10 }}>
Welcome, {user.name}!
</Text>
<Text style={{ marginBottom: 20 }}>
Login Type: {loginType}
</Text>
<Button title="Request More Permissions" onPress={requestMorePermissions} />
<Button title="Reauthorize Data Access" onPress={handleReauthorize} />
<Button title="Logout" onPress={handleLogout} />
</>
) : (
<Button title="Login with Facebook" onPress={handleLogin} />
)}
</View>
);
}
export default LoginExample;
