Firebase

In your FlutterFlow project, find the Firebase flame icon in the left navigation toolbar and click it. This opens the Firebase integration panel. Click 'Connect' and sign in with the Google account that has Owner or Editor access to your Firebase project — Viewer access will fail silently when FlutterFlow tries to generate config files. FlutterFlow fetches a list of all Firebase projects under that account. Click the project you want to use. If you do not have a project yet, open a new browser tab, go to console.firebase.google.com, click 'Add Project,' follow the three-step wizard, then come back to FlutterFlow and refresh the project list. Once you select the project, click 'Auto-generate Config Files.' FlutterFlow calls the Firebase Management API and downloads google-services.json (for Android) and GoogleService-Info.plist (for iOS), embedding them in your build automatically. A green 'Connected' indicator appears in the panel when this succeeds. You should also see the list of Firebase services you can enable become active.

In the Firebase panel, click 'Authentication.' FlutterFlow opens an Auth setup wizard. First, enable the login providers your app needs: toggle on Email/Password for the most common case. If you want Google Sign-In, toggle it on — FlutterFlow adds the required dependency and configuration automatically. For Apple Sign-In (required on iOS for apps that use third-party login), toggle it on and note that you will need to configure the Sign in with Apple capability in your Apple Developer account. For phone OTP (SMS) authentication, be aware that this requires the Blaze plan because Google charges for SMS delivery. Once you choose your providers, the wizard generates a login page and a signup page in your FlutterFlow project and wires them together with route logic. It also creates a 'Logged In' conditional that you can attach to any page to redirect unauthenticated users to login. The current authenticated user's data (UID, email, display name) becomes available as a global variable throughout your app under 'currentUserReference' and 'currentUserData.'

Back in the Firebase panel in FlutterFlow, click 'Firestore' to enable the database. Choose a region (pick one geographically close to your primary users — you cannot change the region after creation). This activates the Firestore schema editor where you can define your data structure (see the dedicated Firestore integration page for the full schema setup walkthrough). Click 'Storage' to enable Firebase Storage for file and media uploads. Both Firestore and Storage start with test-mode Security Rules that expire after 30 days and leave your data world-readable until then. Go to the 'Firestore Settings' tab in FlutterFlow (or directly in the Firebase console under Firestore → Rules) and replace the test-mode rule with auth-based rules before you share the app. A minimal safe rule: `allow read, write: if request.auth != null;` restricts access to logged-in users. For per-user data isolation, check the Firestore-specific page in this content library for the full rule pattern using request.auth.uid. For Storage, set a similar rule under Firebase console → Storage → Rules. These two Security Rules steps are the most common launch mistake — do not skip them.

1// Minimal Firestore rule — logged-in users only
2rules_version = '2';
3service cloud.firestore {
4  match /databases/{database}/documents {
5    match /{document=**} {
6      allow read, write: if request.auth != null;
7    }
8  }
9}
10
11// Minimal Storage rule — logged-in users only
12rules_version = '2';
13service firebase.storage {
14  match /b/{bucket}/o {
15    match /{allPaths=**} {
16      allow read, write: if request.auth != null;
17    }
18  }
19}

Any time your app needs to call a third-party service that has a secret API key — Stripe secret key, OpenAI API key, SendGrid API key, etc. — you must never place that key in your FlutterFlow project. FlutterFlow compiles to a client app, and any value you store in an API Call header or a Dart constant is shipped to every user's device. The solution is a Firebase Cloud Function. In the Firebase console, go to Functions and click 'Get Started.' You will write the Function in Node.js (JavaScript) using the Firebase Functions SDK. Create an HTTPS callable function that accepts a request from your app, uses the secret key from the function's environment (set via `firebase functions:config:set` or through the Firebase console's 'Secret Manager' integration), calls the third-party API, and returns the result. Back in FlutterFlow, add a button action: Action Flow Editor → + Add Action → Backend/Database → Call Cloud Function. Select the function name, pass any parameters your function needs, and handle the response. This pattern means the secret key lives only inside Google's infrastructure, never in the compiled app.

1// Firebase Cloud Function — secure proxy for a secret API key
2// Deploy via Firebase console → Functions or Firebase CLI
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5
6exports.callSecretApi = functions.https.onCall(async (data, context) => {
7  // Reject unauthenticated calls
8  if (!context.auth) {
9    throw new functions.https.HttpsError(
10      'unauthenticated',
11      'You must be logged in to call this function.'
12    );
13  }
14
15  // Secret key from Firebase environment config — never hardcoded
16  const apiKey = process.env.SECRET_API_KEY;
17  const userInput = data.inputText;
18
19  const response = await fetch('https://api.example.com/endpoint', {
20    method: 'POST',
21    headers: {
22      'Authorization': `Bearer ${apiKey}`,
23      'Content-Type': 'application/json'
24    },
25    body: JSON.stringify({ input: userInput })
26  });
27
28  const result = await response.json();
29  return { output: result.data };
30});

If your app uses Firebase Cloud Messaging (FCM) for push notifications on iOS, you must upload an Apple Push Notification service (APNs) key to Firebase — FlutterFlow does not do this automatically. Go to the Firebase console → Project Settings → Cloud Messaging → Apple app configuration section. Click 'Upload' next to APNs Authentication Key. To get this key, log in to developer.apple.com, go to Certificates, Identifiers & Profiles → Keys, and create a new key with the Apple Push Notifications Service (APNs) capability enabled. Download the .p8 file. Back in Firebase, upload the .p8 file, enter your Key ID (shown in the Apple Developer portal), and your Team ID (top right of the Apple Developer portal). Without this step, push notifications will not be delivered to iOS devices even if your FlutterFlow setup looks correct. Android FCM works without this extra step — it is iOS-specific. Also make sure the Bundle ID in your FlutterFlow project settings matches the App ID registered in the Apple Developer portal exactly.