# How to Add Authentication to Your FlutterFlow Project

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-30 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `firestore.rules`

```text
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // Users can read and write their own document only
    match /users/{userId} {
      allow read: if request.auth != null
        && request.auth.uid == userId;

      // Allow create during signup
      allow create: if request.auth != null
        && request.auth.uid == userId
        && request.resource.data.uid == userId;

      allow update: if request.auth != null
        && request.auth.uid == userId;

      // Never allow client-side deletion
      allow delete: if false;
    }

    // Example: user-owned resource collection
    match /posts/{postId} {
      // Any signed-in user can read posts (adjust as needed)
      allow read: if request.auth != null;

      // Only post owner can write
      allow create: if request.auth != null
        && request.resource.data.authorId == request.auth.uid;

      allow update, delete: if request.auth != null
        && resource.data.authorId == request.auth.uid;
    }

    // Private user data subcollection
    match /users/{userId}/private/{document} {
      allow read, write: if request.auth != null
        && request.auth.uid == userId;
    }

    // Deny everything not explicitly allowed
    match /{document=**} {
      allow read, write: if false;
    }
  }
}
```

## Common mistakes

- **Forgetting to set the Entry Page and Logged In Page in Authentication Settings** — Without these two settings, FlutterFlow has no auth routing logic. The app always loads the first page in your page list regardless of sign-in state. Unauthenticated users can navigate to any page by knowing the route. Fix: 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.
- **Not clearing user-specific App State variables on Sign Out** — App State variables persist for the lifetime of the app session. If user A signs out and user B signs in on the same device, user A's cached data (name, preferences, subscription status) may still be in App State and could be displayed to user B. Fix: 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.
- **Assuming the auto-created user document contains the user's email and display name** — FlutterFlow's Create Account action creates a Firestore document with only `uid` and `created_time`. Email and display name are stored in Firebase Authentication but are not automatically written to Firestore. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-add-authentication-to-your-flutterflow-project
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-add-authentication-to-your-flutterflow-project