Add Firebase Authentication to FlutterFlow in four steps: connect Firebase and enable an auth provider in Settings, create Login and Signup pages using FlutterFlow's Sign In and Create Account actions, set the Entry Page and Logged In Page in Authentication Settings, and add a Sign Out action to your profile page. Without the Entry Page and Logged In Page settings, auth routing does not work — all pages stay accessible without signing in.
FlutterFlow Makes Authentication Fast — If You Configure Routing Correctly
FlutterFlow has deep Firebase Authentication integration. The built-in Sign In, Create Account, and Sign Out actions handle token management, session persistence, and error handling automatically. What FlutterFlow does not do automatically is decide which pages require authentication — that is your configuration responsibility. The single most important setting is the Entry Page (where unauthenticated users land) and the Logged In Page (where authenticated users go after sign-in). Without these two settings, your app has no auth routing — users can navigate directly to any page without signing in by knowing the route. This tutorial covers the full auth setup including routing, the auto-created user document, and handling common errors.
Prerequisites
- A FlutterFlow project (any plan)
- A Firebase project connected to FlutterFlow (Settings > Firebase)
- A Google account to create and manage the Firebase project
- Basic familiarity with FlutterFlow pages and the action editor
Step-by-step guide
Connect Firebase and enable Authentication in FlutterFlow
Connect Firebase and enable Authentication in FlutterFlow
In FlutterFlow, go to Settings > Firebase. If you have not connected a Firebase project yet, click Connect Firebase Project and follow the setup wizard — it creates a Firebase project and links it to FlutterFlow automatically. Once connected, go to Settings > Authentication. Toggle Authentication Enabled to on. Under Auth Provider, select Email/Password (the simplest provider to start with). FlutterFlow automatically enables the Email/Password provider in your Firebase Authentication console. You should also see options for Google Sign-In, Apple Sign-In, and Phone — you can enable additional providers later. Save the settings.
Expected result: The Firebase Authentication console shows Email/Password as an enabled provider under Sign-in methods.
Create the Login page with Sign In action
Create the Login page with Sign In action
In FlutterFlow, create a new page named `LoginPage`. Add a Column with: an app logo Image or Text at the top, a TextField for Email with email keyboard type and email validator enabled, a TextField for Password with obscured text enabled, a Button labeled 'Sign In', a TextButton labeled 'Create an account' (navigates to Signup page), and optionally a TextButton for 'Forgot password'. Select the Sign In button and open the Action Editor. Add action: Authenticate > Log In > Firebase. Set the Email field to the email TextField value and the Password field to the password TextField value. Under On Success, add Navigate To your main authenticated page. Under On Error, add an Alert Dialog action showing `authenticatedUser.errorMessage`.
Expected result: Entering valid credentials on the Login page signs the user in and navigates to the main app page. Invalid credentials show an error message.
Create the Signup page with Create Account action
Create the Signup page with Create Account action
Create a new page named `SignupPage`. Add TextFields for Display Name, Email, and Password (plus optionally a Confirm Password field). Add a Sign Up button. In the Action Editor for the Sign Up button, add: Authenticate > Create Account > Firebase. Map Email and Password to the corresponding TextFields. Under On Success, add two actions in sequence: first, a Firestore Update Document action that writes the user's `displayName` to their auto-created `users/{uid}` document (FlutterFlow creates this document automatically, but it does not include displayName by default). Second, Navigate To your main authenticated page. Add error handling the same way as the Login page.
Expected result: Signing up creates a new user in Firebase Authentication and a corresponding document in the `users` Firestore collection.
Configure Entry Page and Logged In Page for auth routing
Configure Entry Page and Logged In Page for auth routing
This is the most critical step. Go to Settings > Authentication > Authentication Routing. You will see two required fields: Entry Page (where unauthenticated users land — set this to your LoginPage) and Logged In Page (where authenticated users go after sign-in or on app launch if already signed in — set this to your main app page, e.g., HomePage). Save the settings. Now test: sign out, close the app, reopen it — you should land on LoginPage. Sign in — you should go to HomePage. Open the app again while signed in — you should go directly to HomePage, skipping the login screen. If you skip this step, the app will load the first page in your page list regardless of auth state.
Expected result: Unauthenticated app launches land on LoginPage. Authenticated app launches go directly to HomePage. Attempting to navigate directly to a protected page redirects to LoginPage.
Add a Sign Out action to your profile or settings page
Add a Sign Out action to your profile or settings page
Find the page where users should be able to sign out — typically a Profile or Settings page. Add a Button or ListTile labeled 'Sign Out'. In the Action Editor, add: Authenticate > Log Out > Firebase. Under On Success, add Navigate To your LoginPage (or Entry Page). If your app uses App State variables that contain user-specific data (like the current user's name or subscription status), add a Set App State action before navigation to clear those variables to their default values. This prevents stale user data from appearing if a different user signs in.
Expected result: Tapping Sign Out clears the Firebase session, navigates to LoginPage, and clears user-specific App State.
Protect pages with auth checks and understand the auto-created user document
Protect pages with auth checks and understand the auto-created user document
FlutterFlow's auth routing handles the entry point, but individual pages within the authenticated section do not need additional protection — if a user cannot reach the Entry Point without signing in, they cannot reach any sub-page. However, Firestore Security Rules still need to be set correctly so unauthenticated direct API calls cannot read user data. In the Firebase console, go to Firestore > Rules and ensure your `users` collection requires authentication: `allow read, write: if request.auth != null && request.auth.uid == userId`. The auto-created user document (generated when FlutterFlow's Create Account action runs) contains a `uid` field and a `created_time` field. It does not automatically contain email or display name — write those from the Signup On Success action.
Expected result: Firestore Security Rules prevent unauthenticated reads of user documents. The user document in Firestore contains the fields you wrote during signup.
Complete working example
1rules_version = '2';2service cloud.firestore {3 match /databases/{database}/documents {45 // Users can read and write their own document only6 match /users/{userId} {7 allow read: if request.auth != null8 && request.auth.uid == userId;910 // Allow create during signup11 allow create: if request.auth != null12 && request.auth.uid == userId13 && request.resource.data.uid == userId;1415 allow update: if request.auth != null16 && request.auth.uid == userId;1718 // Never allow client-side deletion19 allow delete: if false;20 }2122 // Example: user-owned resource collection23 match /posts/{postId} {24 // Any signed-in user can read posts (adjust as needed)25 allow read: if request.auth != null;2627 // Only post owner can write28 allow create: if request.auth != null29 && request.resource.data.authorId == request.auth.uid;3031 allow update, delete: if request.auth != null32 && resource.data.authorId == request.auth.uid;33 }3435 // Private user data subcollection36 match /users/{userId}/private/{document} {37 allow read, write: if request.auth != null38 && request.auth.uid == userId;39 }4041 // Deny everything not explicitly allowed42 match /{document=**} {43 allow read, write: if false;44 }45 }46}Common mistakes when adding Authentication to Your FlutterFlow Project
Why it's a problem: Forgetting to set the Entry Page and Logged In Page in Authentication Settings
How to avoid: Go to Settings > Authentication > Authentication Routing. Set Entry Page to your LoginPage and Logged In Page to your main authenticated page (e.g., HomePage). Test by running the app signed out — you should land on LoginPage.
Why it's a problem: Not clearing user-specific App State variables on Sign Out
How to avoid: Add Set App State actions before the Log Out action to reset all user-specific variables to their default values. For each App State variable, set it to null, empty string, or its default value.
Why it's a problem: Assuming the auto-created user document contains the user's email and display name
How to avoid: In the Create Account On Success action chain, add a Firestore Update Document action on `users/{uid}` that writes `email`, `displayName`, and any other profile fields from the signup form.
Best practices
- Set both Entry Page and Logged In Page in Authentication Settings immediately after enabling auth — auth routing does not work without both fields.
- Write user profile data (email, displayName, plan) to Firestore in the Create Account On Success action — the auto-created document only has uid and created_time.
- Add Firestore Security Rules requiring `request.auth != null` for all collections that contain user data, even if FlutterFlow's auth routing prevents unauthenticated UI access.
- Clear user-specific App State variables in the Sign Out action chain to prevent data leaks between users on shared devices.
- Use FlutterFlow's built-in email validation on TextFields — it prevents common format errors before the API call is made.
- Add a Password Reset flow using FlutterFlow's Send Password Reset Email action — missing this frustrates users who forget passwords.
- Test auth routing in the FlutterFlow Run Mode (not just the editor preview) since auth state behaves differently in a real device context.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am setting up Firebase Authentication in FlutterFlow for the first time. I have created a Login page and a Signup page with the correct FlutterFlow auth actions. I want to understand how the Entry Page and Logged In Page settings work — specifically, what happens when an already-authenticated user opens the app, when an unauthenticated user tries to visit a protected page, and when a user signs out. Explain the auth routing flow in FlutterFlow and what breaks if either setting is missing.
In FlutterFlow, I set up email/password authentication. When users sign up successfully, I want to write their email, displayName, and a `plan: 'free'` field to their Firestore user document. I also want to show an error dialog if sign-up fails. How do I build the On Success and On Error action chains for the Create Account action, and how do I reference the newly created user's UID in the Firestore document path before the action chain has a `currentUser` to reference?
Frequently asked questions
Why do I land on my homepage instead of the login page when the app starts?
The Entry Page setting in Settings > Authentication > Authentication Routing is not configured or is set to the wrong page. Set Entry Page to your LoginPage. Also verify that Authentication Enabled is toggled on in the same settings panel — auth routing is inactive when authentication is disabled.
How do I stay signed in between app sessions? Does FlutterFlow do this automatically?
Yes. Firebase Authentication persists the user session to device storage by default in FlutterFlow. When the user reopens the app, Firebase automatically restores the session and FlutterFlow's auth routing sends them to the Logged In Page. You do not need to implement any session persistence code.
What is the auto-created user document and where is it in Firestore?
When a user signs up using FlutterFlow's Create Account action, FlutterFlow automatically creates a document in the `users` Firestore collection with the document ID equal to the user's Firebase UID. The document contains only `uid` (String) and `created_time` (Timestamp). To add email, name, or other fields, you must explicitly write them in the Create Account On Success action chain.
How do I protect specific pages from authenticated users with the wrong role?
FlutterFlow's auth routing only distinguishes authenticated vs. unauthenticated. For role-based page access, add an On Page Load action to protected pages that reads the user's `role` field from Firestore, checks if it matches the required role, and navigates away if not. Back this up with Firestore Security Rules that check the role on the server side.
Can I use Google Sign-In and email/password at the same time?
Yes. In Settings > Authentication, you can enable multiple providers simultaneously. FlutterFlow renders a Google Sign-In button automatically when Google auth is enabled. Users who sign in with Google and users who sign in with email/password are separate Firebase accounts unless you implement account linking. Both methods create a user document in Firestore.
What happens if I delete a user from Firebase Authentication? Does their Firestore document also get deleted?
No. Deleting a user from Firebase Authentication removes their auth account but leaves their Firestore document intact. To clean up the Firestore document, create a Cloud Function triggered by the Firebase Auth user deletion event: `functions.auth.user().onDelete(async (user) => { await admin.firestore().doc('users/' + user.uid).delete(); })`. This runs automatically whenever a user is deleted from Firebase Auth.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation