Expo Facebook returns cancel with native IOS facebook app on successful login
Problem
🐛 Bug Report Environment Expo CLI 2.20.2 environment info: System: OS: macOS 10.14.5 Shell: 5.3 - /bin/zsh Binaries: Node: 12.1.0 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild npmPackages: expo: ^33.0.0 => 33.0.7 react: 16.8.3 => 16.8.3 react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8 react-navigation: ^3.11.0 => 3.11.0 npmGlobalPackages: expo-cli: 2.20.2 iOS standalone app Steps to Reproduce 1. Use Facebook.logInWithReadPermissionsAsync to make a facebook login. 2. Choose to log in with the Facebook native app(not in the browser) 3. Press continue to get back to your app. Expected Behavior 3. User should be successfully logged in after getting redirected back to the app Actual Behavior 3. The promise returns type === cancel no matter what the user actually does. *Note: This seems to only happen to some users, but most of the time it does not work. I'd say 1/10 people actually manage to log in the first try. Reproducible Demo In the view I have: <TouchableOpacity onPress={this._handlePressAsync}> <Image source={facebookLogin} style={styles.facebookLogin}/> </TouchableOpacity> The function called: _handlePressAsync = async () => { const {type, token,} = await Facebook.logInWithReadPermission
Error Output
Error logging in, try again")
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Facebook Login Cancel Issue in iOS Standalone App
The issue arises due to the Facebook SDK not properly handling the redirect back to the app from the native Facebook app. This can occur if the app is not correctly configured in the Facebook Developer Console, or if there are issues with the URL scheme used for the redirect.
Awaiting Verification
Be the first to verify this fix
- 1
Check Facebook App Configuration
Ensure that your app is correctly configured in the Facebook Developer Console. Verify that the Bundle Identifier matches your iOS app and that the correct URL scheme is set up for your app.
- 2
Update URL Scheme
Add the correct URL scheme to your app's Info.plist file. This should match the Facebook App ID. For example, if your Facebook App ID is '123456789', add 'fb123456789' to the URL types.
xml<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>fb123456789</string> </array> </dict> </array> - 3
Update Expo SDK Version
Ensure that you are using the latest compatible version of the Expo SDK. Upgrade to at least Expo SDK 33.0.7 or higher, as there may be bug fixes related to Facebook login.
bashnpm install expo@^33.0.7 - 4
Handle Login Errors Gracefully
Implement error handling in your login function to provide better feedback to users. This can help identify if the issue is related to user permissions or other factors.
javascriptif (type === 'cancel') { alert('Login was cancelled. Please try again.'); } else if (type === 'success') { // Handle successful login } - 5
Test on Multiple Devices
Test the login functionality on multiple iOS devices and configurations to ensure that the fix works across different environments and user scenarios.
Validation
Confirm that users can successfully log in through the Facebook native app without receiving a cancel response. Monitor the login success rate to ensure it improves after implementing the fix.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep