import React, { useState, useEffect } from 'react';
import {
View,
Text,
Button,
StyleSheet,
Platform,
Alert,
} from 'react-native';
import {
LoginManager,
AuthenticationToken,
AccessToken,
Profile,
} from 'react-native-fbsdk-next';
function LimitedLoginExample() {
const [user, setUser] = useState(null);
const [loginType, setLoginType] = useState(null);
const [tokenInfo, setTokenInfo] = useState(null);
useEffect(() => {
checkLoginStatus();
}, []);
const checkLoginStatus = async () => {
try {
const profile = await Profile.getCurrentProfile();
if (profile) {
setUser(profile);
// Check which login type
if (Platform.OS === 'ios') {
const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
if (authToken) {
setLoginType('limited');
setTokenInfo({
type: 'Authentication Token',
token: authToken.authenticationToken.substring(0, 20) + '...',
nonce: authToken.nonce,
graphDomain: authToken.graphDomain,
});
} else {
const accessToken = await AccessToken.getCurrentAccessToken();
if (accessToken) {
setLoginType('traditional');
setTokenInfo({
type: 'Access Token',
token: accessToken.accessToken.substring(0, 20) + '...',
userId: accessToken.userID,
});
}
}
} else {
const accessToken = await AccessToken.getCurrentAccessToken();
if (accessToken) {
setLoginType('traditional');
setTokenInfo({
type: 'Access Token',
token: accessToken.accessToken.substring(0, 20) + '...',
userId: accessToken.userID,
});
}
}
}
} catch (error) {
console.error('Error checking login status:', error);
}
};
const handleLogin = async () => {
try {
const result = await LoginManager.logInWithPermissions(
['public_profile', 'email'],
Platform.OS === 'ios' ? 'limited' : undefined
);
if (result.isCancelled) {
return;
}
await checkLoginStatus();
// If using Limited Login, verify token on server
if (Platform.OS === 'ios') {
const authToken = await AuthenticationToken.getAuthenticationTokenIOS();
if (authToken) {
await verifyTokenOnServer(authToken);
}
}
} catch (error) {
console.error('Login failed:', error);
Alert.alert('Login Failed', error.message);
}
};
const verifyTokenOnServer = async (authToken) => {
try {
const response = await fetch('https://your-api.com/auth/verify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
token: authToken.authenticationToken,
nonce: authToken.nonce,
}),
});
const data = await response.json();
if (data.valid) {
console.log('Token verified successfully');
Alert.alert('Success', 'Login verified!');
} else {
throw new Error('Invalid token');
}
} catch (error) {
console.error('Token verification failed:', error);
Alert.alert('Error', 'Token verification failed');
}
};
const handleLogout = () => {
LoginManager.logOut();
setUser(null);
setLoginType(null);
setTokenInfo(null);
};
return (
<View style={styles.container}>
{user ? (
<>
<Text style={styles.title}>Welcome, {user.name}!</Text>
<Text style={styles.subtitle}>User ID: {user.userID}</Text>
<View style={styles.infoBox}>
<Text style={styles.infoTitle}>Login Information</Text>
<Text style={styles.infoText}>
Type: {loginType === 'limited' ? 'Limited Login' : 'Traditional Login'}
</Text>
{loginType === 'limited' && Platform.OS === 'ios' && (
<Text style={styles.warningText}>
⚠️ Limited features available - Graph API not accessible
</Text>
)}
</View>
{tokenInfo && (
<View style={styles.tokenBox}>
<Text style={styles.tokenTitle}>Token Info</Text>
<Text style={styles.tokenText}>Type: {tokenInfo.type}</Text>
<Text style={styles.tokenText}>Token: {tokenInfo.token}</Text>
{tokenInfo.nonce && (
<Text style={styles.tokenText}>Nonce: {tokenInfo.nonce}</Text>
)}
{tokenInfo.graphDomain && (
<Text style={styles.tokenText}>
Domain: {tokenInfo.graphDomain}
</Text>
)}
</View>
)}
<Button title="Logout" onPress={handleLogout} />
</>
) : (
<>
<Text style={styles.title}>Facebook Login Example</Text>
<Text style={styles.description}>
This example demonstrates iOS Limited Login.
{Platform.OS === 'ios'
? ' Limited Login will be used automatically if ATT is denied.'
: ' Android always uses traditional login.'}
</Text>
<Button title="Login with Facebook" onPress={handleLogin} />
</>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'center',
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 10,
textAlign: 'center',
},
subtitle: {
fontSize: 16,
color: '#666',
marginBottom: 20,
textAlign: 'center',
},
description: {
fontSize: 14,
color: '#666',
marginBottom: 30,
textAlign: 'center',
},
infoBox: {
backgroundColor: 'white',
padding: 15,
borderRadius: 8,
marginBottom: 15,
},
infoTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
},
infoText: {
fontSize: 16,
marginBottom: 5,
},
warningText: {
fontSize: 14,
color: '#ff9800',
marginTop: 10,
},
tokenBox: {
backgroundColor: '#e3f2fd',
padding: 15,
borderRadius: 8,
marginBottom: 20,
},
tokenTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 10,
},
tokenText: {
fontSize: 12,
fontFamily: 'monospace',
marginBottom: 5,
},
});
export default LimitedLoginExample;