# How to Implement Social Media Authentication in FlutterFlow
- Tool: FlutterFlow
- Difficulty: Intermediate
- Time required: 40-60 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026
## TL;DR
Enable social authentication in FlutterFlow by configuring each provider in Firebase Auth console — Google requires OAuth consent screen, Facebook requires an App ID and App Secret, and Apple sign-in is mandatory for any iOS app that offers social login. Account linking handles the case where the same email is used across multiple providers.
## Social Authentication: Provider Setup and Apple's Requirements
FlutterFlow integrates with Firebase Authentication, which supports Google, Apple, Facebook, Twitter/X, GitHub, and more. The setup is provider-specific — each requires external developer console configuration before FlutterFlow can use it. The biggest mistake developers make is enabling Google and Facebook without Apple. Apple's App Store Review Guidelines (Guideline 4.8) require that any iOS app offering third-party social sign-in must also offer Sign in with Apple. Submitting without it results in app rejection. This tutorial covers the three most common providers and the account-linking flow that handles users who sign in with different providers using the same email address.
## Before you start
- FlutterFlow project with Firebase connected
- Firebase project with Authentication enabled
- Google Cloud Console access for OAuth consent screen
- Apple Developer account ($99/yr) for Sign in with Apple
- Facebook Developer account and App created at developers.facebook.com
## Step-by-step guide
### 1. Enable and configure Google Sign-In in Firebase
Open Firebase console > Authentication > Sign-in method. Click Google and toggle the Enable switch. Firebase auto-generates the OAuth client ID — copy the Web client ID shown. Now open Google Cloud Console > APIs & Services > OAuth consent screen. Set the App name, user support email, and developer contact email. Under Scopes, ensure email and profile are listed. Under Test users, add your own email for development testing (the app is in testing mode until you publish the consent screen). Back in FlutterFlow, open Settings > Firebase Auth > Sign-In Providers > Google and ensure it is enabled. FlutterFlow reads the google-services.json (Android) and GoogleService-Info.plist (iOS) files you linked during Firebase setup — the SHA-1 fingerprint in your Android app must match what is registered in Firebase Project Settings.
**Expected result:** Google sign-in button in FlutterFlow preview opens the Google account selector and signs in successfully.
### 2. Configure Sign in with Apple — required for iOS
Apple sign-in setup has three parts. First, in Apple Developer console (developer.apple.com), open Certificates, Identifiers & Profiles > Identifiers. Find your App ID, click it, scroll to Capabilities, and enable Sign in with Apple. Second, create a Services ID under Identifiers — this is the OAuth client identifier. Enter your app's domains and return URLs; the return URL for Firebase is https://[your-project-id].firebaseapp.com/__/auth/handler. Third, create a Key under Keys > Add a new key, check Sign in with Apple, and download the .p8 key file (save it — you cannot download it again). In Firebase console > Authentication > Sign-in method > Apple, paste the Services ID, Team ID (10-character ID from your account), Key ID, and the contents of the .p8 file. In FlutterFlow, enable Apple under Sign-In Providers. Apple sign-in only works on real iOS devices — it will not function in the FlutterFlow web preview.
**Expected result:** On a real iOS device, tapping Sign in with Apple shows Apple's native authentication sheet and signs in to Firebase.
### 3. Set up Facebook Login in Firebase and Facebook Developer console
In Facebook Developer console (developers.facebook.com), create a new App of type Consumer. In the App Dashboard, go to Add a Product > Facebook Login > Set Up (Web). In Settings > Basic, copy the App ID and App Secret. In Firebase console > Authentication > Sign-in method > Facebook, paste the App ID and App Secret, then copy the OAuth redirect URI Firebase provides (e.g., https://[project-id].firebaseapp.com/__/auth/handler). Back in Facebook Developer console > Facebook Login > Settings, paste this URI into Valid OAuth Redirect URIs. Also add your app's domain to App Domains in Settings > Basic. In FlutterFlow, enable Facebook under Sign-In Providers and enter the App ID. For iOS, you must also add your Facebook App ID and Client Token to the info.plist via FlutterFlow's Custom Info Plist section.
```
CFBundleURLTypes
CFBundleURLSchemes
fb[YOUR_FACEBOOK_APP_ID]
FacebookAppID
[YOUR_FACEBOOK_APP_ID]
FacebookClientToken
[YOUR_FACEBOOK_CLIENT_TOKEN]
LSApplicationQueriesSchemes
fbapi
fb-messenger-share-api
```
**Expected result:** Facebook login button opens the Facebook OAuth flow and returns a signed-in Firebase user.
### 4. Handle account linking for same-email providers
When a user first signs in with Google using alice@gmail.com, then later tries to sign in with Facebook using the same email, Firebase throws an auth/account-exists-with-different-credential error. In FlutterFlow, handle this in the Sign-In Action Flow: after the social sign-in action, add a conditional check on the error code. If the error is account-exists-with-different-credential, store the pending credential in App State, sign the user in with their original provider (show a message explaining the situation), then use a Custom Action to call FirebaseAuth.instance.currentUser.linkWithCredential(pendingCredential) to merge the accounts. After linking, both providers can sign in to the same account.
```
// custom_actions/link_social_credential.dart
import 'package:firebase_auth/firebase_auth.dart';
Future linkSocialCredential(AuthCredential pendingCredential) async {
try {
final user = FirebaseAuth.instance.currentUser;
if (user == null) return 'not_signed_in';
await user.linkWithCredential(pendingCredential);
return 'success';
} on FirebaseAuthException catch (e) {
return e.code;
}
}
```
**Expected result:** A user who signs in with both Google and Facebook using the same email sees a single merged account in Firebase Authentication console.
### 5. Build the sign-in screen with all three social buttons
In FlutterFlow, create a SignInPage. Add your app logo and a headline. Below it, add three Column-stacked buttons styled as per each platform's branding guidelines: Google (white background, Google logo, dark text), Apple (black background, Apple logo, white text — required by Apple's HIG), Facebook (blue background, Facebook logo, white text). Wire each button to the corresponding Firebase Auth social sign-in action. Add a Divider with 'or' text below the social buttons and place email/password fields below that for users who prefer traditional login. If isLoading page state is true (set before each sign-in action), show CircularProgressIndicator overlaying the buttons.
**Expected result:** Sign-in page displays all three branded social buttons, each triggering the correct authentication flow.
## Complete code example
File: `custom_actions/social_auth_helper.dart`
```dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
/// Returns: 'success' | Firebase error code string
Future signInWithGoogle() async {
try {
final googleUser = await GoogleSignIn().signIn();
if (googleUser == null) return 'cancelled';
final googleAuth = await googleUser.authentication;
final credential = GoogleAuthProvider.credential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
await FirebaseAuth.instance.signInWithCredential(credential);
return 'success';
} on FirebaseAuthException catch (e) {
return e.code;
} catch (_) {
return 'unknown_error';
}
}
/// Links a pending credential to the currently signed-in user.
/// Call this after an account-exists-with-different-credential error.
Future linkProviderCredential(AuthCredential pendingCredential) async {
try {
final user = FirebaseAuth.instance.currentUser;
if (user == null) return 'not_signed_in';
await user.linkWithCredential(pendingCredential);
return 'success';
} on FirebaseAuthException catch (e) {
if (e.code == 'credential-already-in-use') {
// The credential belongs to a different account — switch to it
await FirebaseAuth.instance.signInWithCredential(pendingCredential);
return 'switched';
}
return e.code;
}
}
/// Fetches which sign-in methods are registered for a given email.
/// Returns a list like ['google.com', 'password'] or empty list.
Future> getSignInMethodsForEmail(String email) async {
try {
return await FirebaseAuth.instance.fetchSignInMethodsForEmail(email);
} catch (_) {
return [];
}
}
/// Signs out from all providers including Google.
Future fullSignOut() async {
await GoogleSignIn().signOut();
await FirebaseAuth.instance.signOut();
}
```
## Common mistakes
- **Enabling Google and Facebook sign-in on iOS without also enabling Sign in with Apple** — Apple's App Store Review Guidelines (Guideline 4.8) mandate that any iOS app using third-party social login must also offer Sign in with Apple. Apple rejects apps that omit it — this is an automatic rejection, not a warning. Fix: Always enable Sign in with Apple alongside any other social provider on iOS. Configure it in Apple Developer console, Firebase, and FlutterFlow before submitting to App Store.
- **Not handling the account-exists-with-different-credential error** — When a user signs in with Google (alice@gmail.com), then tries Facebook (same email), Firebase throws this error and the sign-in fails with no explanation. The user thinks the app is broken. Fix: Catch this specific error code in your Action Flow, explain to the user which provider they used originally, sign them in with that provider, and then call linkWithCredential to link the new provider.
- **Testing Apple sign-in in the FlutterFlow web preview** — Sign in with Apple requires iOS native APIs and a real Apple Developer provisioning profile. The web preview cannot authenticate against Apple's servers. Fix: Test Apple sign-in exclusively on a real iOS device using FlutterFlow's Test Mode with a connected device, or by running the exported project in Xcode.
- **Forgetting to add the SHA-1 fingerprint for Google Sign-In on Android** — Google Sign-In on Android verifies the app's signing certificate against the SHA-1 registered in Firebase. Without it, sign-in silently fails or shows a configuration error. Fix: In Firebase Project Settings > Your Apps > Android app, add both the debug SHA-1 (from keytool -list -v -keystore ~/.android/debug.keystore) and the release SHA-1 from your upload keystore.
## Best practices
- Always include Sign in with Apple when shipping to the iOS App Store — Apple will reject your app without it if other social providers are present.
- Use a consistent button style per platform branding guidelines — Google requires the white button with Google logo, Apple requires black text on white or white text on black.
- Handle the account-exists-with-different-credential error gracefully with a user-friendly message rather than a raw error code.
- Store the user's linked provider list on their Firestore profile document so you can show which accounts are connected in a profile settings screen.
- Set Firebase Authentication email enumeration protection to prevent attackers from discovering which emails are registered.
- Test all social login flows on real devices before App Store submission — simulator testing misses provisioning and keychain issues.
- Add a loading overlay during sign-in to prevent double-taps from triggering multiple concurrent auth requests.
- Use Firebase Security Rules to ensure users can only read/write their own data, using auth.uid to scope access.
## Frequently asked questions
### Does Sign in with Apple work on Android and web?
Yes, Apple provides a JavaScript SDK for web and Firebase supports Apple sign-in on Android via the web-based OAuth flow. However, Apple only mandates it for iOS apps in the App Store. If your app is Android-only or web-only, Sign in with Apple is optional, though many apps include it for cross-platform consistency.
### Why does Google Sign-In work in FlutterFlow preview but fail after export?
The FlutterFlow preview uses a shared signing certificate. After export, your app uses your own keystore, and the SHA-1 fingerprint changes. Add your release keystore's SHA-1 to Firebase Project Settings > Android app > Add fingerprint. For Play Store distribution, also add the SHA-1 from Google Play's App Signing key.
### Can users sign in with Apple on a device that does not have an Apple ID?
No. Sign in with Apple requires the user to have an Apple ID and be signed in to iCloud on their device. If they are not, iOS prompts them to set up an Apple ID before the sign-in flow can proceed.
### Does Apple share the user's real email address?
Apple gives users the choice to share their real email or to use a private relay email (e.g., xyz@privaterelay.appleid.com). Your app must handle both. If you send emails, configure your sender domain in Apple's Private Email Relay settings to ensure relay emails are delivered.
### How do I let users unlink a social provider from their account?
Use a Custom Action that calls FirebaseAuth.instance.currentUser.unlink(providerId). For Google the providerId is 'google.com', for Apple 'apple.com', for Facebook 'facebook.com'. Only allow unlinking if the user has at least one other sign-in method (email/password or another social provider) so they are not locked out of their account.
### Why is Facebook Login showing a blank white screen on iOS?
This is almost always a missing Info.plist entry. iOS requires the fb[APP_ID] URL scheme and the LSApplicationQueriesSchemes entries to open the Facebook app for authentication. Without them, the SDK falls back to a web view that sometimes renders blank. Add the Info.plist entries shown in Step 3 via FlutterFlow's Custom Info Plist feature.
---
Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-implement-social-media-authentication-in-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-implement-social-media-authentication-in-flutterflow