Configure Google, Apple, and Facebook sign-in providers in Firebase Authentication and enable them in FlutterFlow Settings. Build branded social login buttons with provider-specific colors and icons. After each social sign-in, check whether a Firestore user profile document exists and create one if it does not, ensuring every social login user has a complete profile in your database.
Adding Social Login to Your FlutterFlow App
Social login reduces sign-up friction by letting users authenticate with existing Google, Apple, or Facebook accounts. This tutorial walks through configuring each provider in Firebase, enabling them in FlutterFlow, designing properly branded buttons, and handling the post-login profile creation flow that Firebase Auth does not do automatically.
Prerequisites
- A FlutterFlow project with Firebase authentication enabled
- Access to Firebase Console for your project
- A Google Cloud project (created automatically with Firebase)
- An Apple Developer account for Sign in with Apple (iOS apps)
- A Facebook Developer account with a Facebook App created
Step-by-step guide
Enable Google Sign-In in Firebase Console and FlutterFlow
Enable Google Sign-In in Firebase Console and FlutterFlow
Go to Firebase Console → Authentication → Sign-in method → Add new provider → Google. Click Enable, set a public-facing project name and support email, then Save. For Android, download the updated google-services.json from Firebase Project Settings and upload it to FlutterFlow under Settings → Firebase. For iOS, download the GoogleService-Info.plist and upload it. In FlutterFlow, go to Settings → Authentication → toggle ON the Google provider. The SHA-1 fingerprint for Android is auto-generated by FlutterFlow — verify it matches in Firebase Console under Project Settings → Your apps.
Expected result: Google is listed as an enabled sign-in provider in both Firebase Console and FlutterFlow Settings.
Configure Apple Sign-In for iOS users
Configure Apple Sign-In for iOS users
In your Apple Developer account, go to Certificates, Identifiers & Profiles → Identifiers → your app → enable Sign in with Apple capability. Then go to Firebase Console → Authentication → Sign-in method → Add new provider → Apple. Enable it and add your Services ID and the OAuth code flow configuration (Team ID, Key ID, private key file downloaded from Apple). In FlutterFlow, go to Settings → Authentication → toggle ON the Apple provider. Apple Sign-In requires an Apple Developer account ($99/year) and only works on iOS devices and macOS — it will not appear on Android.
Expected result: Apple Sign-In is enabled in Firebase and FlutterFlow, ready for iOS authentication.
Set up Facebook Login with the Facebook Developer Console
Set up Facebook Login with the Facebook Developer Console
Go to developers.facebook.com → My Apps → Create App → Consumer. In the app dashboard, add Facebook Login as a product. Copy the App ID and App Secret. In Firebase Console → Authentication → Sign-in method → Add new provider → Facebook. Paste the App ID and App Secret, then copy the OAuth redirect URI shown by Firebase. Go back to the Facebook app → Facebook Login → Settings → paste the redirect URI in Valid OAuth Redirect URIs. In FlutterFlow, go to Settings → Authentication → toggle ON Facebook and enter the App ID. For Android, add your key hash to the Facebook app settings.
Expected result: Facebook Login is configured with the correct redirect URI in both Facebook Developer Console and Firebase, and enabled in FlutterFlow.
Design branded social login buttons on the sign-in page
Design branded social login buttons on the sign-in page
On your login page, below the existing email/password form, add a Container with a centered Text 'or continue with' and a thin Divider on each side (use a Row with Expanded-Divider-Text-Divider-Expanded). Below that, add three Button widgets stacked vertically with 12px spacing. Google button: white background, black text 'Sign in with Google', Google logo icon on the left. Apple button: black background, white text 'Sign in with Apple', Apple logo icon. Facebook button: #1877F2 blue background, white text 'Continue with Facebook', Facebook logo icon. Set each button's width to fill the parent. Use Conditional Visibility to hide the Apple button on Android devices.
Expected result: Three properly branded social login buttons appear below the email form, each matching the provider's official branding guidelines.
Wire up sign-in actions and create user profile on first login
Wire up sign-in actions and create user profile on first login
On the Google button, add an Action Flow: Sign In with Google. On the Apple button: Sign In with Apple. On the Facebook button: Sign In with Facebook. After each sign-in action, add a second action: Query Collection on the users collection where documentId equals the authenticated user's UID. Add a Conditional action: if the query returns 0 documents (first-time social login), create a new user document with documentId set to the UID, displayName from the auth profile, email from auth, photoUrl from the auth provider's avatar, and createdAt as the current timestamp. Finally, navigate to the home page. This ensures every social login user has a Firestore profile.
Expected result: Tapping any social login button authenticates the user, creates a Firestore profile if this is their first login, and navigates to the home page.
Complete working example
1// Firebase Auth Providers Configuration2// Firebase Console → Authentication → Sign-in method3// Enabled: Google, Apple, Facebook45// Firestore Schema: users collection6// Document ID = Firebase Auth UID7// - displayName: String (from social provider)8// - email: String (from social provider)9// - photoUrl: String (from social provider avatar)10// - authProvider: String (google | apple | facebook)11// - createdAt: Timestamp12// - bio: String (empty, user fills later)13// - onboardingComplete: Boolean (false)1415// Login Page Layout16// Column:17// → Email TextField18// → Password TextField19// → Button "Sign In" (email/password)20// → Row: Divider + Text "or continue with" + Divider21// → Button "Sign in with Google"22// Style: bg=#FFFFFF, text=#000000, icon=Google logo23// Action: Sign In with Google24// → Button "Sign in with Apple" (Conditional: iOS only)25// Style: bg=#000000, text=#FFFFFF, icon=Apple logo26// Action: Sign In with Apple27// → Button "Continue with Facebook"28// Style: bg=#1877F2, text=#FFFFFF, icon=FB logo29// Action: Sign In with Facebook3031// Post-Login Action Flow (same for all 3 providers):32// 1. Auth action completes → user is authenticated33// 2. Query Collection: users where docId == currentUser.uid34// 3. Conditional: if result count == 035// → Create Document in users:36// docId: currentUser.uid37// displayName: currentUser.displayName38// email: currentUser.email39// photoUrl: currentUser.photoURL40// authProvider: 'google' | 'apple' | 'facebook'41// createdAt: serverTimestamp()42// onboardingComplete: false43// 4. Navigate to HomePage (replace route)4445// Apple Sign-In Notes:46// - Requires Apple Developer account ($99/yr)47// - Only available on iOS/macOS48// - Apple only sends user's name on FIRST login49// → must save displayName immediately50// - Use Conditional Visibility to hide on Android5152// Facebook Login Notes:53// - OAuth redirect URI from Firebase must be added54// to Facebook App → Facebook Login → Settings55// - Android requires debug/release key hash56// - Test with Facebook test users during developmentCommon mistakes
Why it's a problem: Not creating a Firestore user document after social login
How to avoid: After every social sign-in action, check if a user document exists. If not, create one with the UID as the document ID and populate it from the auth provider's profile data.
Why it's a problem: Not saving the display name from Apple Sign-In on first login
How to avoid: Immediately save the displayName from the Apple auth result to Firestore on the first login. If null on subsequent logins, read it from Firestore.
Why it's a problem: Offering Google and Facebook login on iOS without adding Sign in with Apple
How to avoid: Always add Sign in with Apple alongside Google and Facebook on iOS. Use Conditional Visibility to show it only on iOS/macOS devices.
Best practices
- Follow each provider's official branding guidelines for button colors, icons, and text
- Always create a Firestore user profile after social sign-in to store app-specific data
- Use Conditional Visibility to show Apple Sign-In only on iOS devices
- Save the display name and photo URL from the social provider as defaults in the user profile
- Add an OR divider between email/password and social login buttons for clear visual separation
- Test social login on real devices since emulators may not support all providers correctly
- Handle the case where a user signs in with email first, then tries social login with the same email
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm setting up social login in FlutterFlow with Firebase Auth. I need Google, Apple, and Facebook sign-in buttons with correct branding, and a post-login Action Flow that creates a Firestore user profile document if it's the user's first time. Show me the full configuration steps and Action Flow logic.
Create a login page with email/password fields, an OR divider, and three social login buttons: Google (white with Google icon), Apple (black with Apple icon, iOS only), and Facebook (blue with FB icon). Wire each to the correct sign-in action.
Frequently asked questions
What happens if a user signs up with email and later tries Google login with the same email?
Firebase Auth may link the accounts automatically or throw an 'account-exists-with-different-credential' error depending on your settings. Enable account linking in Firebase Console under Authentication → Settings to handle this gracefully.
Does Apple Sign-In work on Android?
No. Sign in with Apple is only available on iOS and macOS. Use Conditional Visibility in FlutterFlow to hide the Apple button on Android devices.
Why does Apple only provide the user's name on the first login?
This is Apple's privacy design. After the first authentication, Apple no longer sends the name or email in subsequent login responses. You must save these values to Firestore immediately on the first sign-in.
Do I need to handle token refresh for social login?
Firebase handles token refresh automatically for all social providers. FlutterFlow's built-in auth system manages the Firebase session, so tokens are refreshed transparently without any custom code.
Can I add more social providers like Twitter or GitHub?
Yes. Firebase Auth supports many providers including Twitter, GitHub, Microsoft, and Yahoo. Enable them in Firebase Console and add corresponding sign-in buttons in FlutterFlow, though FlutterFlow has built-in support for Google, Apple, and Facebook specifically.
Can RapidDev help implement a multi-provider authentication system?
Yes. RapidDev can build a complete authentication system with multiple social providers, account linking, role-based access, multi-factor authentication, and custom onboarding flows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation