How to Implement Social Media Authentication in FlutterFlow

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.

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.

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.

1<!-- Add to iOS Info.plist via FlutterFlow Custom Info Plist -->
2<key>CFBundleURLTypes</key>
3<array>
4  <dict>
5    <key>CFBundleURLSchemes</key>
6    <array>
7      <string>fb[YOUR_FACEBOOK_APP_ID]</string>
8    </array>
9  </dict>
10</array>
11<key>FacebookAppID</key>
12<string>[YOUR_FACEBOOK_APP_ID]</string>
13<key>FacebookClientToken</key>
14<string>[YOUR_FACEBOOK_CLIENT_TOKEN]</string>
15<key>LSApplicationQueriesSchemes</key>
16<array>
17  <string>fbapi</string>
18  <string>fb-messenger-share-api</string>
19</array>

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.

1// custom_actions/link_social_credential.dart
2import 'package:firebase_auth/firebase_auth.dart';
3
4Future<String> linkSocialCredential(AuthCredential pendingCredential) async {
5  try {
6    final user = FirebaseAuth.instance.currentUser;
7    if (user == null) return 'not_signed_in';
8    await user.linkWithCredential(pendingCredential);
9    return 'success';
10  } on FirebaseAuthException catch (e) {
11    return e.code;
12  }
13}

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.