Adding "sign in with Facebook" to a Flutter app sounds straightforward. In practice it touches the Facebook developer console, Firebase configuration, your Android manifest and Dart glue code. This guide breaks the process into stages and flags the spots where configuration drift causes silent failures.
The short version
- The login flow uses the flutter_facebook_auth plugin alongside firebase_auth and firebase_core.
- You register the app in the Facebook developer console and place the App ID and protocol scheme into res/values/strings.xml.
- AndroidManifest.xml needs the Facebook SDK ApplicationId meta-data plus two activity declarations: one for FacebookActivity and one for CustomTabActivity to handle the OAuth callback.
- Main.dart initializes Firebase, calls FacebookAuth.instance.login with the email permission, then signs the user into Firebase using the OAuth credential.
The building blocks, in plain English
Three files handle the work. First, pubspec.yaml: add firebase_auth, firebase_core and flutter_facebook_auth under dependencies. Second, AndroidManifest.xml, where two pieces matter: a meta-data tag with android:name="com.facebook.sdk.ApplicationId" pointing to a string resource, and a CustomTabActivity entry that catches the auth callback via an intent-filter with the fb_login_protocol_scheme. Third, strings.xml, which holds your Facebook App ID and the protocol scheme from the developer console.
The Dart side runs after those pieces are in place. After WidgetsFlutterBinding.ensureInitialized() and Firebase.initializeApp(), the login button triggers FacebookAuth.instance.login(permissions: ['email']). On success, getUserData() returns a map you can use to pull the email address. That email feeds into FirebaseAuth.instance.signInWithCredential using FacebookAuthProvider.credential with the access token.
Why it matters
The Dart code is the easy half. The setup that trips teams up is keeping the App ID, the protocol scheme and the keystore hash synchronized across the Facebook console, strings.xml and any release build you push to the Play Store. When those drift, you get silent failures that look like code bugs.
That said, the same integration unlocks access to Facebook's advertising and data-sharing APIs if your product roadmap includes them. And Firebase Auth handles Google and OTP providers the same way, so picking one auth backend for all providers is an architectural decision that pays dividends when you add sign-in options later.
Decision checklist: are you ready to ship?
| Step | Status |
|---|---|
| Facebook App ID and protocol scheme match between console and strings.xml | [ ] |
| AndroidManifest.xml has both FacebookActivity and CustomTabActivity declarations | [ ] |
| Release keystore hash registered in Facebook console (differs from debug) | [ ] |
| Error handling distinguishes user-cancelled vs. Server-rejected logins | [ ] |
| iOS Info.plist configured with App ID and URL types before testing on device | [ ] |
| Fallback (OTP or email) exists if Facebook permission is denied | [ ] |
A worked example
Say you are building a marketplace app and want returning buyers to skip a signup form. You add a "Continue with Facebook" button on the welcome screen. The login call requests only the email permission. On success, you write the user into a Firestore users collection keyed by the Firebase UID and route them to the product feed. If the email permission is denied, you fall back to an OTP login so the user is never blocked.
Bottom line
Flutter Facebook login is a well-trodden path. Treat the Facebook console and manifest edits as the real work, verify the release keystore alignment, harden the Dart error handling, and configure iOS before you ship.
Key takeaways
- Register the app in the Facebook developer console first; everything else depends on the App ID.
- Keep strings.xml and AndroidManifest.xml in sync with the console values; configuration drift is the main failure mode.
- Do not ship demo-style error handling; build a retry path and distinguish cancellation from rejection.
- Budget time for iOS Info.plist edits: LSApplicationQueriesSchemes for fb and URL types for the auth callback.
Frequently asked questions
Do I need Firebase to add Facebook login to Flutter?
No, but Firebase handles token storage and refresh logic for you. Pairing Facebook login with Firebase Auth is the practical choice for most production apps.
Which Facebook permissions should I request on first login?
Request only what your app needs. Email is usually sufficient for account creation; ask for additional permissions later with context to avoid silent rejections.
Why does login work in debug but fail in release builds?
The release build uses a different keystore, so the hash registered in the Facebook console no longer matches. Re-register the release key hash to fix this.
Can I keep using Google sign-in alongside Facebook?
Yes. Firebase Auth treats both as identity providers. User records are keyed by Firebase UID regardless of which button the user pressed.