FlutterFlow Push Notifications Setup without Firebase Auth — Low Code — Part 1

In this article, I will explain how I managed to enable push notifications in my FlutterFlow project without enabling Firebase Auth. For those who are looking for a no-code solution, full disclosure, this probably won’t work for them, but I promise I have tried to minimize the coding as much as possible, and for the most part, it is copy and paste, and you can still deploy your app from FlutterFlow! This solution is production-ready; proof: check my app 😎

If you are using Firebase Auth in your FlutterFlow project, this article is not for you; FlutterFlow’s push notification integration in settings is the best solution for you! But if you are using Supabase (that is my case) for authentication, this article may help you.

Requirements

• Firebase Project (Free)
• Firebase CLI
• Flutter SDK
• (iOS) Xcode

TL;DR

1. (iOS) Integrate GitHub in FlutterFlow and push your project to a repository
2. Setup a Firebase Project
3. (iOS) Upload APNs authentication key
4. (iOS Optional) For notifications with images, add [BUNDLE ID].ImageNotification identifier
5. Install Flutter and FlutterFire CLI, then generate the configuration file
6. Setup Firebase Messaging in FlutterFlow using Custom Actions
7. (iOS) Push from FlutterFlow > Enable app capabilities in Xcode locally > Push changes > Deploy from GitHub repo
8. Test!
9. (Optional) Send messages with Supabse edge functions

Steps 1–6 are one-time setups, but step 7 has to be repeated before every iOS deployment

1 — GitHub Setup in FlutterFlow

[If you are not going to deploy in the App Store (iOS), this step is optional, and you can simply only download the code from FlutterFlow for step (3). Instructions on how to download the code here]

Follow the instructions here to connect your project to GitHub and push your code.

Clone the code on your computer. If you are looking for a no/low code instruction, follow these steps using the GitHub Desktop application.

This step is necessary for iOS deployment since you must deploy from the git repository once changes are done locally on Xcode.

2 — Setup a Firebase Project

Set up a Firebase account if you don’t have one already, and create a project. Yes, you still need a Firebase account since we will rely on Firebase Cloud Messaging (FCM) to send push notifications. That’s the only service you need from Firebase; however, once you set up the Firebase in your project, you can use other Firebase services as you please.

3&4 — (iOS) Upload APNs authentication key and adjust configurations

if you plan to deploy your app on the App Store, follow the “Only for iOS ” steps from the FlutterFlow guide. Step 3 (“Adding identifier”) in the guide is optional only if you want to include images in your iOS push notifications.

Note that if you have a brand new Firebase project, you must add the iOS+ app to your project to change its settings.

5 — Install Flutter and FlutterFire CLI, then generate the configuration file

We will use FlutterFire CLI to generate the config file for the FlutterFlow project and use the configurations generated for iOS, Android, and Web in the project. If you are comfortable accessing these configurations from the Firebase account or other ways, feel free to do so.

• Install Flutter using this official guide.
• Install Firebase CLI using their official instructions here.
• Open the terminal and go to where you have cloned your FlutterFlow project from step (2) in this article. If you are not planning to deploy an iOS version and haven’t set up GitHub, simply download your FlutterFlow code and go to that directory in your terminal.
• Run this command and log into the account associated with the project you created in step (2).

firebase login

• Run this command to install FlutterFire

dart pub global activate flutterfire_cli

• As instructed, run this command

export PATH="$PATH":"$HOME/.pub-cache/bin"

• Run the following command and select the Firebase project you created in step 2.

flutterfire configure 

• Select platforms that your FlutterFlow project will support. This should generate the firebase_options.dart configurations file and add it to your project's lib folder. We will use the contents of this file in the next step.

6 — Setup Firebase Messaging in FlutterFlow using Custom Actions

To initialize your Firebase project in your FlutterFlow project, you need to create the following custom action in your FlutterFlow project and name it initializeFirebase. Edit the Firebase config section using the firebase_options.dart file you generated in step (5).

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart'
    show kIsWeb, defaultTargetPlatform, TargetPlatform;

Future<void> initializeFirebase() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: _getFirebaseOptions(),
  );
}

FirebaseOptions _getFirebaseOptions() {
  if (kIsWeb) {
    return FirebaseOptions(
      apiKey: '// Replace from firebase_options.dart',
      appId: '// Replace from firebase_options.dart',
      messagingSenderId: '// Replace from firebase_options.dart',
      projectId: '// Replace from firebase_options.dart',
      authDomain: '// Replace from firebase_options.dart',
      storageBucket: '// Replace from firebase_options.dart',
    );
  }
  switch (defaultTargetPlatform) {
    case TargetPlatform.android:
      return FirebaseOptions(
        apiKey: '// Replace from firebase_options.dart',
        appId: '// Replace from firebase_options.dart',
        messagingSenderId: '// Replace from firebase_options.dart',
        projectId: '// Replace from firebase_options.dart',
        storageBucket: '// Replace from firebase_options.dart',
      );
    case TargetPlatform.iOS:
      return FirebaseOptions(
        apiKey: '// Replace from firebase_options.dart',
        appId: '// Replace from firebase_options.dart',
        messagingSenderId: '// Replace from firebase_options.dart',
        projectId: '// Replace from firebase_options.dart',
        storageBucket: '// Replace from firebase_options.dart',
        iosBundleId: '// Replace from firebase_options.dart',
      );
    default:
      throw UnsupportedError(
        'FirebaseOptions are not supported for this platform.',
      );
  }
}

After creating and saving the initializeFirebase custom action, go to main.dart in FlutterFlow and add initializeFirebase to your Initial Actions.

Next, we need to create two more custom functions to first ask for push notifications permission and then get the device’s FCM token.

Create the following custom action getPushPermission in the FlutterFlow and call it in your app wherever you would like to ask for push notifications permission from the user. Don’t forget to add firebase_messaging: ^14.7.10 to Pubspec Dependencies.

import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> getPushPermission() async {
  await FirebaseMessaging.instance.requestPermission();
}

Create another custom action to get the FCM token, called getFCMToken. Note that this action returns a value, so adjust the action settings accordingly.

import 'package:firebase_messaging/firebase_messaging.dart';

Future<String?> getFCMToken() async {
  NotificationSettings settings =
    await FirebaseMessaging.instance.getNotificationSettings();
  if (settings.authorizationStatus != AuthorizationStatus.authorized) {
    return null;
  }
  String? fcmToken = await FirebaseMessaging.instance.getToken();
  return fcmToken;
}

You can call this action in the app and store the returned FCM token somewhere that you can access in order to send a push notification to that user. For example, if you use Supabase, you can update the user’s profile row.

Congratulations 🎉 Your FlutterFlow project is set up now to receive push notifications and be deployed to the Play Store but only on Android. For iOS, you must repeat step (7) every time before deployment! Otherwise, skip to step (8) for testing.

7 — (iOS) Xcode configurations and deploy from GitHub repository

Since you are not enabling push notifications through the FlutterFlow settings, the Xcode project workspace is not configured to allow push notifications for your iOS app. Follow the steps below to make these changes in Xcode before every deployment; I repeat it again before every deployment!

• Go to Mobile Deployment in FlutterFlow settings and change the version if necessary (no need to enter bundle number). You can’t deploy the same version number if that version is already released on the App Store.
• Push your project code to the GitHub repository from FlutterFlow.
• Pull the project code into your local Mac. Note that FlutterFlow creates a branch called “flutterflow” in Github.
• Open ios/Runner.xcworkspace and add the “Push Notifications” capability.

• Also add “Background Modes” and Enable the Background fetch and the Remote notifications.

• You also have to sign the app with the proper team ID. Choose the team right team for this project in Signing section.

At this point, the app is ready to receive notifications but if you like to also receive notifications with images, continue:

• Got to File > New > Target and select Notification Service Extension and click Next.

• Set product name to ImageNotification, set the language to Objective-C, and click Finish. Click Activate when the alert asks to activate the
• Open NotificationService.m and replace the content of the file with:

#import "NotificationService.h"
#import "FirebaseMessaging.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];

    // Modify the notification content here...
    [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}

@end

• open ios/Podfile and add this code before traget Runner

target 'ImageNotification' do
  use_frameworks!
  pod 'Firebase/Messaging'
end

• Now you are done with local changes, and you can git commit and push. In this guide, we will be pushing to the same “flutterflow” branch to keep things simple. For better flow, use this guide.
• In FlutterFlow, go to Mobile Deployment, and under Deployment Source, enable use GitHub repo. You can always turn this off for Play Store deployment and enable it for App Store after pushing the Xcode changes to GitHub.
• Enter the branch name. If you have followed this guide, it should be “flutterflow”.
• That’s it! You can now click on Deploy to App Store.

8 — Testing

Push notifications can’t be tested in Test Mode or Run Mode within FlutterFlow, but there are a few options to test push notifications. I have been able to test push notifications both on Android Emulator and iOS Simulator using Flutter SDK and running it locally. However, you can also test push notifications without compiling and building locally. Here is how:

• Install Android Studio
• Open Android Studio > open Virtual Device Manager > select and run an emulator from the next screen

• Download the APK from the FlutterFlow developer menu.
• Drag and drop the downloaded APK on the emulator. Your app should be installed on that emulator.
• If you have followed the guide, you should be able to get push notification permission and FCM token for this device. Copy that FCM token.
• Go to Firebase console’s Messaging page.
• Create a new campaign and choose Firebase Notification messages
• Fill out the fields as you like and click on send test messages
• Add the copied FCM token here and send the test message 📨 Note: notification will only be delivered if the app is in the background.

9 — Send push notifications with Supabase

Many of you have created your apps with Supabase auth and database, and that’s why you are reading this guide: FlutterFlow hasn’t offered a push notification solution without using Firebase Auth. This was the case for my project too and I managed to send the push notifications using the official guide by Supabase here with some modifications that matched my app.

There is an advantage in sending push notifications from the cloud versus the client which is that you can change the notifications logic without having to release a new update.

Check out part 2 of this guide for the following push notification features:

• Notification Badge 🔴
• Handle FCM token refresh
• Direct to a specific page when opening a notification

FlutterFlow Push Notifications Setup without Firebase Auth — Low Code — Part 2