FlutterFlow – Push Notifications Without Firebase Authentication Using OneSignal

In this post, I will explain how I enabled push notifications in my FlutterFlow project without using the Firebase Authentication.

If your FlutterFlow project uses Firebase Authentication, this article isn’t for you. FlutterFlow’s built-in push notification integration in the settings is the best solution for your needs. However, if you’re using Custom Authentication via API calls, this article might be helpful to you.

Requirements:

1. One Signal Account (for creating a One Signal app)
2. Firebase account (for creating a Firebase project)

Procedure 1: Generate Firebase Service Account Private Key

1. Go to the Google Cloud Console.
2. Create or Select your Firebase project.
3. In the left-hand menu, navigate to Project Settings and select Service Accounts.
4. Click on Generate New Private Key button.
5. A private key file (JSON) will automatically download to your computer.

Procedure 2: Create OneSignal App and Upload Firebase Private Key File

1. Log in to your OneSignal account.
2. Click New App/Website in your dashboard.
3. Enter a name for your app, select a platform (e.g., Android), and click Next: Configure Your Platform.
4. Under Google Android (FCM) Configuration, upload the Firebase Service Account Private Key (JSON file) you generated earlier.
5. Click Save & Continue to select SDK.
6. Select Flutter since we are using FlutterFlow, then click Save & Continue.
7. You will be given a OneSignal App ID, which needs to be used in the FlutterFlow Custom Action code.
8. Copy the OneSignal App ID and open FlutterFlow.io

Procedure 3: Create FlutterFlow Custom Action for Push Notifications

We will use the OneSignal Flutter package from pub.dev to implement push notifications in FlutterFlow.

Steps:

1. Add Custom Action
2. Add Required Package/Dependencies
3. Write the Code
4. Invoke the Custom Action from the main.dart
5. Test the Code

1. Add a Custom Action by going to the Custom Code menu. Create a new action and give it a suitable name, such as oneSignalPushNotification.

2. Add the required package onesignal_flutter to the pubspec.yaml dependencies. More information about the package can be found at https://pub.dev/packages/onesignal_flutter

3. Write the following code and compile it:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/backend/sqlite/sqlite_manager.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:onesignal_flutter/onesignal_flutter.dart';

Future oneSignalPushNotification() async {
  // Add your function code here!

  OneSignal.Debug.setLogLevel(OSLogLevel.verbose);

  // NOTE: Replace with your own app ID from https://www.onesignal.com
  OneSignal.initialize("----- YOUR ONESIGNAL APP ID -----");

  OneSignal.Notifications.requestPermission(true);
}

Note: Copy the code starting from the import (line 12 until 23)

Note 2: Replace the (line 20) —– YOUR ONESIGNAL APP ID —– with your OneSignal App ID

Note 3: It is recommended to store your OneSignal App ID as an App State rather than hardcoding it in the code (security issue).

4. Invoke the oneSignalPushNotification Custom Action from the main.dart

This custom action needs to be invoked directly from the main.dart file. This ensures that all initializations, such as our custom oneSignalPushNotification, occur right when the application starts.

Navigate to Custom Files and open main.dart. On the right-hand side, you’ll find a section called Final Actions.

Click the “+” icon in that section. From the options that appear, select oneSignalPushNotification. This will automatically update the code in main.dart for you.

5. Test the code

To test OneSignal push notifications, you cannot use the FlutterFlow web browser emulator. You need to download the code and run it using the Android Studio emulator or on your physical device.

The push notification message can be sent from the OneSignal platform; however, the app must be installed on the emulator or physical device first to conduct the test. If everything works well, you will receive the push notification.

And that’s a wrap! I hope this helps!