Q&A

Flutter login using Facebook authentication

By AlgoInsight Team2026-06-18androidiosmobilesecurity

Overview

Social login with Facebook is a three-layer concern: platform setup (registering with Facebook, configuring your iOS/Android apps), the Dart/Flutter plugin (flutter_facebook_auth), and your backend - either Firebase Auth (simplest) or your own server (exchange the access token for a session). Getting the platform configuration right is usually more work than the Flutter code itself.

graph LR
    A[Flutter app] --> B["FacebookAuth.instance.login()"]
    B --> C[Facebook native login dialog]
    C --> D[AccessToken returned to app]
    D --> E["getUserData() - name, email, photo"]
    D --> F["Exchange for Firebase credential (optional)"]
    F --> G[Firebase Auth user signed in]
    style B fill:#1e1b4b,color:#fff

1. Add the Package

# pubspec.yaml
dependencies:
  flutter_facebook_auth: ^6.0.0

2. Platform Configuration

Android - android/app/src/main/AndroidManifest.xml

<meta-data android:name="com.facebook.sdk.ApplicationId"
           android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken"
           android:value="@string/facebook_client_token"/>
<activity android:name="com.facebook.FacebookActivity" ... />

Add the IDs to android/app/src/main/res/values/strings.xml.

iOS - ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict><key>CFBundleURLSchemes</key><array><string>fb{APP_ID}</string></array></dict>
</array>
<key>FacebookAppID</key><string>{APP_ID}</string>
<key>FacebookClientToken</key><string>{CLIENT_TOKEN}</string>
<key>FacebookDisplayName</key><string>{APP_NAME}</string>

Obtain the App ID and Client Token from developers.facebook.com → your app → Settings → Basic.

3. Flutter Login Code

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

class AuthService {
  Future<Map<String, dynamic>?> signInWithFacebook() async {
    final LoginResult result = await FacebookAuth.instance.login(
      permissions: ['email', 'public_profile'],
    );

    if (result.status == LoginStatus.success) {
      final AccessToken accessToken = result.accessToken!;
      final userData = await FacebookAuth.instance.getUserData(
        fields: "name,email,picture",
      );
      // userData contains: id, name, email, picture.data.url
      return userData;
    } else {
      print('Login failed: ${result.message}');
      return null;
    }
  }

  Future<void> logout() async {
    await FacebookAuth.instance.logOut();
  }
}

4. Integrating with Firebase Auth (optional but common)

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<UserCredential> loginWithFacebook() async {
  final result = await FacebookAuth.instance.login();
  final token = result.accessToken!.tokenString;

  final credential = FacebookAuthProvider.credential(token);
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

This signs the user into Firebase using their Facebook identity, letting you use Firebase's user management, Firestore rules, etc.

5. Checking Current Login Status

final accessToken = await FacebookAuth.instance.accessToken;
if (accessToken != null) {
  // User is still logged in
}

Platform-Specific Notes

• iOS requires matching the bundle ID in the Facebook app settings.
• Android requires adding your app's SHA-1 key hash (or SHA-256 for Play Store) in the Facebook console.
• Web requires configuring FacebookAuth.instanceFor(app: Firebase.app()).webInitialize(...) in index.html.
• The Facebook Review process may be required for permissions beyond email/public_profile.

Why This Matters in Interviews

Flutter/mobile interviews use this to test third-party auth and platform setup knowledge. Key points: use flutter_facebook_auth; the flow is login → AccessToken → getUserData; Firebase integration exchanges the token for a UserCredential; and the tricky part is platform configuration (App ID, client token, URL scheme, SHA-1 hashes). Knowing the difference between using the access token directly vs passing it to Firebase shows architectural awareness.

Common Pitfalls

• Mismatched SHA-1/bundle ID between Facebook console and the actual app - silent failures.
• Forgetting the FacebookActivity entry in AndroidManifest.xml.
• Not requesting the email permission (scope) explicitly - it's not granted by default.
• Storing the access token insecurely (use secure storage, not SharedPreferences).
• Testing on Android emulators that don't have the Facebook app installed (use a physical device or a real Facebook account).

References

• flutter_facebook_auth: https://pub.dev/packages/flutter_facebook_auth
• Facebook Login for mobile: https://developers.facebook.com/docs/facebook-login/

More answers