Firebase Cloud Messaging

Before enabling push notifications, your FlutterFlow project must be connected to a Firebase project. If you have not done this yet, open your project in the FlutterFlow editor and click Settings in the left navigation panel, then scroll to Firebase. Click Connect Firebase and follow the prompts to link your Firebase project — FlutterFlow will auto-generate the google-services.json (Android) and GoogleService-Info.plist (iOS) configuration files and add them to the project. If your project is already connected to Firebase, confirm this by checking Settings → Firebase — it should show your project ID. You should also verify that Firestore is enabled in your Firebase console (Authentication and Firestore Database should be active, as FlutterFlow stores FCM tokens in the users Firestore collection by default). If you do not yet have a users collection set up in Firestore, FlutterFlow will create the token storage automatically when Push Notifications is enabled — but your users must be authenticated (logged in via FlutterFlow's Auth system) for the token to be associated with a user document. If your Firebase project is on the Spark (free) plan, you can still enable Push Notifications for receiving — but you will need to upgrade to Blaze to deploy Cloud Functions for triggered sends later in this guide.

With Firebase connected, enabling FCM is a single toggle in FlutterFlow. Go to Settings in the left navigation panel → Push Notifications → toggle on 'Enable Push Notifications'. FlutterFlow will automatically add the firebase_messaging Flutter package, configure the necessary platform files, and add logic to request notification permissions from the user at app start. When this is enabled, FlutterFlow handles the full FCM token lifecycle: when a user opens the app, FCM generates a unique device token for that device, FlutterFlow receives it, and stores it in the user's document in your Firestore 'users' collection under a field named 'fcm_tokens' (an array, since a user can have multiple devices). You can see this field appear in your Firestore database once a real user logs in and opens the app. FlutterFlow also lets you configure notification behaviors: click the Push Notifications settings to set the foreground behavior (show a notification banner even when the app is open) and the tap action (which page opens when the user taps a notification). Set the tap action to navigate to the relevant page — for example, a chat app might navigate to the Chat page. You can also add data payloads (key-value pairs) to notifications and read them in the tap action to navigate to specific content (e.g., a specific chat thread ID).

This step is iOS-specific and is the single most common failure point for push notifications. If you skip it, Android notifications will work perfectly but iOS will silently fail — notifications will appear delivered in the Firebase console but never arrive on the iPhone or iPad. To get the APNs auth key, you need an Apple Developer account ($99/year). Log in at developer.apple.com → Certificates, Identifiers & Profiles → Keys → + (Create a new key) → enable 'Apple Push Notifications service (APNs)' → name it (e.g., 'FCM Push Key') → click Continue → Register → Download. The downloaded file has a .p8 extension. Also note the Key ID (shown on the key detail page) and your Team ID (shown in the top-right of the Apple Developer portal under your account name). Now go to your Firebase console → your project → Project Settings → Cloud Messaging tab → scroll to 'Apple app configuration'. Click 'Upload' next to APNs Authentication Key, upload the .p8 file, and enter the Key ID and Team ID. Click Upload. This links FCM to your APNs credentials — Firebase uses this to forward notifications to Apple's delivery system, which then delivers them to iOS devices. If you need to use APNs certificates (.p12) instead of auth keys, the process is similar but less preferred — auth keys do not expire, while certificates expire annually.

Before writing any Cloud Function code, confirm the basic setup works by sending a test notification from the Firebase console's Notification Composer. Go to your Firebase console → Engage → Messaging → Send your first message (or + New campaign → Firebase Notification messages). Enter a notification title and body, click 'Send test message', and paste in a device FCM token from your Firestore users collection to target a specific device. To find a test FCM token: run your FlutterFlow app on a real device (or emulator), log in, then go to your Firebase console → Firestore → users collection → find your test user's document → look for the fcm_tokens array. Copy one of the token strings (they are long — about 150 characters) and paste it into the 'Send test message' dialog. Click Test. Within a few seconds, the notification should appear on the device. If it does not appear on iOS, the APNs .p8 key is not set up correctly. If it does not appear on Android, check that the app has notification permission (Android 13+ requires explicit permission). If the Firebase console shows 'Message sent' but the notification never arrives, check the Firebase console → Messaging → More details on recent campaigns for delivery errors. Once the test notification works on both platforms, you have confirmed that the device token storage, APNs key, and FCM delivery chain are all working correctly.

For notifications triggered by app events (new message, new follower, order shipped), you need a Firebase Cloud Function using the FCM Admin SDK. This is where the service account credential lives — server-side, never in your Flutter app. Make sure your Firebase project is on the Blaze plan before proceeding (upgrade in the Firebase console → Project Overview → Spark plan → Upgrade). In the Firebase console, go to Build → Functions → Get started (if this is your first Function). When prompted to initialize the project, use the browser-based approach: click the 'Create function' option rather than following the CLI instructions. If you prefer writing the Function in a code editor and deploying via the CLI, you can do so — but for non-technical founders, the Firebase console's in-browser editor is sufficient for simple notification Functions. Create a Firestore-triggered Cloud Function that fires when a new document is created in your 'messages' collection. The Function reads the recipient's user document from Firestore, retrieves their FCM token(s), and calls the FCM HTTP v1 API via the Admin SDK. The Admin SDK automatically handles service account authentication using the default credentials available in the Cloud Function environment — you do not need to manually configure a service account key inside the Function. Note: the legacy /fcm/send endpoint is deprecated; use admin.messaging().send() from the Admin SDK, which uses the HTTP v1 API internally. If you would rather skip writing Cloud Functions and prefer a visual flow tool, consider using n8n or Zapier to trigger FCM sends via the API — but you will still need to manage the service account credential server-side. RapidDev builds triggered notification Cloud Functions for FlutterFlow apps every week — reach out for a free scoping call at rapidevelopers.com/contact if you hit a wall.

1// Firebase Cloud Function — send FCM on new Firestore message
2const functions = require('firebase-functions/v2');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.sendMessageNotification = functions.firestore
7  .onDocumentCreated('messages/{messageId}', async (event) => {
8    const message = event.data.data();
9    const recipientId = message.recipientId;
10    const senderName = message.senderName;
11    const body = message.text;
12
13    // Get recipient's FCM tokens from Firestore
14    const userDoc = await admin.firestore().collection('users').doc(recipientId).get();
15    const userData = userDoc.data();
16    if (!userData || !userData.fcm_tokens || userData.fcm_tokens.length === 0) {
17      console.log('No FCM tokens for user:', recipientId);
18      return null;
19    }
20
21    // Send to all of the recipient's devices
22    const notifications = userData.fcm_tokens.map(token =>
23      admin.messaging().send({
24        token,
25        notification: { title: `New message from ${senderName}`, body },
26        data: { chatId: message.chatId, type: 'new_message' }
27      })
28    );
29
30    return Promise.allSettled(notifications);
31  });