How to Integrate Push Notifications Into Your Applications Using Strapi and Firebase Cloud Messaging

Push notifications are interactive clickable pop-up dialog messages. They made their debut in 2009 when Apple integrated them into some of their devices. Over the coming years, major tech players such as Google and Windows launched their implementations for their platforms.

In 2010, Google launched Google Cloud-to-Device messaging service(C2DM), which introduced notifications to Android devices. Two years later, Google Cloud Messaging was unveiled to replace C2DM. Developers were encouraged to use the new service as it brought about a larger messaging payload, improved authentication flows, and removed API rate limits. C2DM was officially shut down in July 2015.

Push notifications are based on a PubSub (Publish/Subscribe) communication model. A server that acts as a publisher sends information(notifications) to clients that have subscribed to a specific channel.

Whenever new information is available at a channel, all clients subscribed to it receive and display it on the device’s screen. In addition, some even play sounds and flash LEDs depending on the device’s hardware features. Mobile devices are the most popular client devices, but desktops have recently been able to receive notifications mainly through web browsers such as Google Chrome and Mozilla Firefox.

There are two types of push notifications: local and remote. Local notifications are triggered from within the device’s operating system, while remote notifications are triggered through HTTP requests. This tutorial will walk you through developing remote notifications using Google’s Firebase Cloud Messaging Platform.

Prerequisites

• NodeJS installation
• Beginner Flutter Knowledge
• An Integrated Development Environment, I use Vscode, but you are free to use others.
• Prior Strapi knowledge is helpful but not required - Learn the basics of Strapi v4.
• Basic JSON Web Token Authentication Knowledge.

The stack: Strapi, Flutter, and Firebase Notifications

Strapi is a headless Content Management System(CMS). This means it handles all the logic needed to transform and store data in a database without a user interface. Strapi exposes API endpoints that can manipulate data stored in a database. Furthermore, it handles authentication and provides numerous methods to plugin third-party authentication systems like Google and Facebook Auth. Such features shorten project development timelines enabling developers to focus on the User Interfaces instead of the back-end logic and process.

Flutter is a cross-platform framework built on the dart programming language. It gets to benefit from features such as Just-in-time(JIT) and Ahead of time(AOT) compilation which are brought about by dart. These attributes help improve the overall start-up time of a flutter application. In addition, Flutter uses the Skia Graphics engine to render User interface components called widgets on a target platform. Like the Strapi development server, Flutter has a hot reload feature, which makes the app development process extremely fast since code changes are reflected as soon as edits are saved.

Finally, we will use Firebase, which is Google’s platform that enables programmers to build serverless applications that can be released and monitored easily. It can also start user engagement campaigns through its cloud messaging plugins. Firebase can also be set up to real-time application stack analytics, which functions similarly to Sentry. A Strapi server can be configured to log all bugs recorded from Firebase analytics.

The stack we will use enables us to code once and build for many platforms. Strapi handles authentication, authorization, and permissions needed to manipulate the data we will generate from our Flutter application. Flutter supports iOS, Android, Mac OS, Windows, Web, and Google Fuchsia out of the box. This speeds up our development time. We will use Firebase’s cloud messaging plugin to send push notifications to all platforms by triggering functions from our Strapi backend.

Initializing a Strapi Project

To get started, we will have to set up our project folder, consisting of the Strapi instance(back-end) and the Flutter application(front-end). Since Strapi is based on JavaScript, it depends on Node. Make sure your development machine has the appropriate Node version installed for Strapi to build and run. Node enables us to run JavaScript code outside of a browser.

Run the following command to create a scaffold of the Strapi server.

    npx create-strapi-app@latest backend --quickstart

The command creates a bare-bone Strapi system, fetches and installs necessary dependencies from the package.json file then finally initializes an SQLite Database. Other database management systems can be used using the following guide.

Once every dependency has been installed, your default browser will open and render the admin registration page for Strapi. Create your administrator account then you will see the welcome page.

Creating Collections

We will use Strapi’s content-type builder plugin to define a schema that will guide the database on how we want our records stored. We will have three schemas, two of which we will generate ourselves. The create-strapi-app command generated the user schema, it contains the necessary fields needed to identify a user of the system.

Quote Collection

This collection will store a user’s quote(post).

1. Click on Content-type Builder under plugins in the side navigation bar.
2. Click on Create new collection type.
3. Type Quote for the Display name and click Continue.
4. Click the Text field button.
5. Type d``e``scription in the Name field.
6. Click on Add another field**, **then click the relation button
7. Type owner in the field name text field.

The relation field is used to create an association between two database tables. In our case, we are associating each post with a user. We can get all the user’s details from the user-permissions plugin.

The relation we have created ensures that each quote belongs to only one user. It can also be expressed as a user can have many quotes. The owner column in the quote table will be used to store the foreign key, the user’s id.

8. Click the Save button and wait for the changes to be applied.

Like Collection

We will create another schema that will represent the likes of a quote. We will create a relational field to ensure that each quote can have many likes and that each like is associated with only one user. Follow the steps below to implement that.

1. Click on Content-type Builder under plugins in the side navigation bar.
2. Click on Create new collection type.
3. Type Like for the Display Name and click Continue.
4. Click the Relation field button.

The relation above ensures that each like is associated with a quote. A single quote can have many likes. The field name likes will create a link visible from the Quote collection.

5. Click on Add another field, then the relation field button.

The field name owner links to the Users table and stores the user’s id. We can identify which user has liked a specific post through our created relations. In addition, we can get the number of likes a specific post has.

Extending the User Collection

When we generated the Strapi project, a schema was generated to allow us to identify the different users that will be using our application. The schema describes fields such as username, email, and password. It also has a relational field that is used to assign roles. Roles are essential when creating applications with different user types that require various permissions to manipulate records in a database.

Since we will send personalized push notifications to our users, we need to add a field that will store a unique string that identifies the user’s device. Follow the steps below to create it.

1. Click on Content-type Builder under plugins in the side navigation bar.
2. Click on User, the last collection under the collection types list.
3. On the top right, click on Add another field.
4. Click on the Text field button.
5. Enter fcm as the field’s name. Do not change the default short text option.
6. Click the Save button and wait for the changes to be applied.

The final configuration of the user’s collection should have a quotes relation field which was automatically added when we created an association while setting up the quote collection. The fcm field will store the Firebase Cloud Messaging(FCM) token. Each device has a unique token used to receive push notifications.

We will be invalidating that token every time the user logs out. If we fail to do so, when a different user logs in, they will receive the previously logged user’s notifications. So will have to send a new token immediately after a user has signed in. This will automatically update the fcm value stored if it exists on the database.

Extending the users-permission plugin.

The users-permission plugin handles authentication in all Strapi projects. It supports different authentication providers like Google Auth, Facebook, Twitter, and GitHub. Once a user has successfully logged in or registered, the plugin generates a JSON Web Token (jwt), bundles it with some helpful info such as the email, username, and id then sends it to the client.

The client then uses the token to access secured requests by appending the token to the request header. For each protected HTTP route, the plugin checks whether the token is valid and if it is associated with a user with the necessary access permissions. If you want to view how exactly it achieves this, you can view the source code on GitHub or by navigating within the node_modules/@strapi/plugin-users-permissions folder with the project directory.

We need to extend this plugin to enable us to save the Firebase messaging token. We will create a new POST route specifically for this action. Follow the steps below to get started.

1. Create a file called strapi-server.js within extensions/users-permissions. This file will hold all the logic we want to add to the plugin.
2. Finally, we will add the code below.

1    //./src/extensions/user-permissions/strapi-server.js
2    
3    module.exports = (plugin) => {
4    /**
5    Appends a function that saves the messaging token from a client device to the plugin's controller
6    **/
7    plugin.controllers.auth.saveFCM = async (ctx) => {
8    var res = await strapi.entityService.update('plugin::users-permissions.user', ctx.state.user.id, { data: { fcm: ctx.request.body.token } });
9            ctx.body = res;
10        };
11    /**
12    Adds a POST method route that is handled by the saveFCM function above.
13    **/
14    plugin.routes['content-api'].routes.push({
15            method: 'POST',
16            path: '/auth/local/fcm',
17            handler: 'auth.saveFCM',
18            config: {
19                prefix: '',
20                policies: []
21            }
22    });
23    
24    return plugin;
25    
26    };

The code block declares a module that exports a modified version of the users-permissions plugin. The first function within it adds a function called saveFCM to the auth controller. This function will be invoked when a POST request is made at the endpoint /auth/local/fcm. We are using the user identified from the jwt token to update the fcm field. The plugin parsed the request body from a JSON string to a JavaScript object. This makes it easy to fetch the value associated with the key called token. The value populates the fcm field in the User collection. Once the token has been saved, we return the user’s details.

The following function registers the /auth/local/fcm in the plugin. We specified it is a POST request, and its request parameters and response will be handled by the saveFCM function we had defined. After modifying the plugin, we return it to apply our changes.

To confirm whether the new route has been successfully added run strapi routes:list on your console. The command outputs all valid routes that the Strapi server has exposed.

We need to make our newly created route accessible to all HTTP clients. We must specify whether the route is protected or a publicly accessible HTTP endpoint.

1. On the side navigation menu of the administration panel, click on Settings
2. Click on Roles under the Users & Permissions Plugin menu.
3. Click on Authenticated then expand the users-permissions section by clicking on it.
4. Click on saveFCM and ensure it is checked.

The authenticated section will let us know with which user we will associate the FCM token. After the user-permissions plugin has identified the user and saved it in the connection, we can access the user’s details and create an association between the user and Firebase Cloud messaging token retrieved from the POST request body params.

Firebase Setup

We need to create a Firebase project and register our target platforms so that we may be able to get the messaging tokens and send notifications by triggering actions from the Strapi server.

1. Open the firebase console on your default web browser and ensure you are signed into your Google account.

2. Click on Add Project and enter Quotes as the name, then click continue.

3. The next screen displays some benefits of enabling Google analytics on the project. We will leave the default option selected. Click continue to proceed.

4. Select Default Account For Firebase on the drop-down then finally click Create Project.

Once the project has been created successfully, we need to create a Firebase service account, a JSON file containing details required to authenticate to Firebase Servers. The file will configure Firebase on the Strapi server through the Firebase admin SDK npm library.

1. On the top left, click the Settings icon, then select Project settings.
2. On the Project settings home page, click on the Service accounts tab.

3. Make sure Node.js is selected, then click Generate new private key. A dialog will pop up explaining the importance of keeping the key private. Confirm by clicking the Generate Key button.

4. Once the file has been downloaded move it to the src folder in our Strapi project directory.

5. We need to install the Firebase admin library so that our server can authenticate with Firebase private key we have just downloaded. On your console, make sure you are within the project’s directory then run the command below to install firebase-admin.

    $ npm install firebase-admin --save
    # Or using yarn
    $ yarn add firebase-admin 

The command will add the Firebase admin SDK library in the package.json file. Once it lists it as a dependency, we can import it and initialize it with the private key JSON file.

Firebase has two pricing models: blaze plan and pay-as-you-go. The blaze plan is the default one. It is sufficient for our project because Cloud messaging invocations are not capped to a specific number; this enables us to use the feature without ever paying.

Firebase Functions

The Firebase admin library enables us to trigger notifications and manage Firebase sessions, users, tokens, storage, and databases. We will create several functions interacting with Firebase’s cloud messaging features. We will also make the authenticated Firebase instance available from anywhere within the Strapi server by saving it in a Strapi object. To start, open the index.js file in the src folder within the project directory. Add the code blocks below.

1    // ./src/index.js
2    'use strict';
3    var admin = require("firebase-admin");
4    var serviceAccount = require("./yourPrivateKeyFile.json");
5    module.exports = {
6      /**
7       * An asynchronous register function that runs before
8       * your application is initialized.
9       */
10       register({ strapi }) {},
11      /**
12       * An asynchronous bootstrap function that runs before
13       * your application gets started.
14       *
15       */
16      bootstrap({ strapi }) {
17        let firebase = admin.initializeApp({
18          credential: admin.credential.cert(serviceAccount),
19        });
20        //Make Firebase available everywhere
21        strapi.firebase = firebase;
22        let messaging = firebase.messaging();
23    
24        let sendNotification = (fcm, data) => {
25          let message = {
26            ...data,
27            token: fcm
28          }
29          messaging.send(message).then((res) => {
30            console.log(res);
31          }).catch((error) => {
32            console.log(error);
33          });
34        }
35        let sendNotificationToTopic = (topic_name, data) => {
36          let message = {
37            ...data,
38            topic: topic_name
39          }
40          messaging.send(message).then((res) => {
41            console.log(res);
42          }).catch((error) => {
43            console.log(error);
44          });
45        }
46        let subscribeTopic = (fcm, topic_name) => {
47          messaging.subscribeToTopic(fcm, topic_name).then((res) => {
48            console.log(res);
49          }).catch((error) => {
50            console.log(error);
51          });
52        }
53        //Make the notification functions available everywhere
54        strapi.notification = {
55          subscribeTopic,
56          sendNotificationToTopic,
57          sendNotification
58        }
59      },
60    };
61    

The index.js file is used to extend default Strapi functions. The file contains two asynchronous functions invoked before the Strapi server starts. We initialized the Firebase SDK within the bootstrap function and passed the private key as a parameter in the admin.credential.cert function. We then create a key firebase in the Strapi object, which will make all Firebase functions available in all controllers.

The functions sendNotification, subscribeTopic and sendNotificationToTopic are also added to the Strapi object within the key name notification. The sendNotification function takes an FCM token and data as parameters. The data parameter is a custom object with all information needed to send it as a notification. The object is then appended to the message variable containing a token key with the user’s target device messaging token.

The sendNotificationToTopic takes two parameters: a data object and a target topic. A topic is a notification channel that links to many tokens. We could send a single notification to users subscribed to a topic. The last function, subcribeTopic associates a messaging token to a specific topic. It takes two parameters, the name of the topic and the messaging token, passed to Firebase's subscribeToTopic function.

Saving relations between collections

Both the quote collection and like collections are associated with a user. By default, those relationships are not added automatically; therefore, we need to override Strapi’s default functions to add that functionality.

Thanks to the users-permission plugin, it will be easy since the user making the request is already saved in the connection. We just need to extract and link it to the data we want to save. All these actions will be done within the respective collection’s controller.

Each route is mapped to a controller function. We will extend the create function invoked when a POST request is made. In our case, the controller functions that handle POST requests made to /api/quotes/ and /api/likes/

1. Quotes Open src/api/quotes/controllers/quote.js and modify it to the code block below.

1    //./src/api/quotes/controllers/quotes.js
2    'use strict';
3    const { createCoreController } = require('@strapi/strapi').factories;
4    module.exports = createCoreController('api::quote.quote', ({ strapi }) => ({
5      create(ctx) {
6          return strapi.service('api::quote.quote').createQuote({
7                data: {
8                    ...ctx.request.body.data,
9                    owner: ctx.state.user.id
10                }
11            });
12      },
13      async find(ctx) {
14        //Get Quotes with loaded relations
15        let entities = await strapi.service('api::quote.quote').loadQuotes();
16        entities = entities.map((entity) => {
17        //Check if the authenicated User has liked the quote
18        var result = entity.likes.find(like => like.owner.id === ctx.state.auth.credentials.id);
19                return { ...entity, liked: result ? true : false }
20            });
21            return entities;
22        }
23    }));

The create function is the default function when a POST request is made on /api/quote. The request body parameters are already parsed and converted into a JavaScript object making it castable to the params required by createQuote . We also appended the user id under the owner key, which links the quote to a user.

The find function is invoked when a GET request is sent on the route /api/quote. By default, it returns a list of all quotes. However, we extended it to add a boolean field(liked) whose value is based on whether the authenticated user has liked the quote. We use the field to render Icon widgets on our flutter-powered front-end conditionally.

2. Likes

Open the file ./src/api/like/controllers/like.js``, then modify it to the code block below.

1    'use strict';
2    /**
3     *  like controller
4     */
5    const { createCoreController } = require('@strapi/strapi').factories;
6    module.exports = createCoreController('api::like.like', ({ strapi }) => ({
7        async create(ctx) {
8            let result = await strapi.service('api::like.like').createLike({
9                ...ctx.request.body.data,
10                owner: ctx.state.user.id
11            });
12            var quote = await strapi.service('api::quote.quote').findQuote(ctx.request.body.data.quote);
13            var owner = await strapi.entityService.findOne(
14                'plugin::users-permissions.user', quote.owner.id);
15            strapi.notification.sendNotification(owner.fcm, {
16                notification: {
17                    title: `${ctx.state.user.username} liked your quote`,
18                    body: `${quote.description}`
19                }
20            });
21            ctx.body = result;
22        }
23    }));
24    

We only updated the create function invoked when a POST request is made to the route /api/like. We ensured that a like is associated with the authenticated user. We then use the quote id from the request body param to get a quote. The returned quote contains the owner field which is used to fetch user details of the quote's author.

We then used the FCM field from the found user to send a notification to the author using the functions we made global in ./src/index.js file. We composed a notification body that shows the name of the person who liked the quote and the description of the quote. After the notification is sent, we return the details of the newly created like to the user.

The create function is called on POST requests made at /api/collection_name/ The find function is called on GET requests made at /api/collection_name/

That’s all that’s required from the Strapi-powered back-end. We can now consume the APIs through HTTP requests and send notifications to any client platform.

Initializing the Flutter project

To get started with flutter, you need to have your Android SDK and Flutter CLI configured in your path. A chromium-based browser is advantageous since it will enable us to test our application on the web. Flutter can detect Google Chrome and Microsoft Edge as target devices since they are built on the chromium platform.

To confirm whether your flutter is correctly configured run the command below on your console.

    flutter doctor

The command generates a report of your flutter installation. Known issues will be displayed if they are detected. Use this guide to configure your flutter for your development platform.

Initialize the project by running flutter create quotes on your console. The command will create a simple application that uses Material Design components and fetch basic dependencies needed to run the app on any platform. We will not be focusing too much on the user interface but feel free to add animations and drawable assets to make the final application look more appealing. Once the command has run successfully, the project structure should be as shown below.

The flutter create command generated a simple stateful counter application, an equivalent of a basic hello world application. To run the application, execute flutter run on your console. Suppose you have an Android emulator running or a developer mode to enable an Android device connected to your development machine.

In that case, the application should start after some time, depending on the specifications of your machine. The first run and build are usually longer compared to other consecutive runs. Flutter will select an appropriate platform to run on if you do not have an Android device linked to your machine. However, if you have more than one device connected at a time, the console should give you the option to select your target platform.

We will add a screens folder to our flutter project. The folder will hold all the pages needed. Each page will handle its logic. Feel free to use any architecture to structure your application logically. You could play around with Model-View-Controller(MVC) while following this tutorial.

Within the screen folder, add the following files: form.dart, home.dart and login.dart. Immediately after the application starts, we will check whether a user had logged in before and then render the homepage(home.dart). We will render the login page(login.dart) if not authenticated.

Dependencies

There are additional flutter dart libraries needed to make our application. We have to install Firebase, the client-side SDK that will communicate with the Strapi back-end to display notifications and some analytics in the Firebase console. We also need an HTTP library to send HTTP requests to our Strapi server. Lastly, we need a way to persist an authenticated user’s details locally.

We will use a key-value database library called Hive. It is relatively faster compared to other methods of saving data locally. Even though our application is small, it is important to consider performance. Proper planning will ease scaling tasks later when the number of users increases. Run the command below to install the dependencies.

    flutter pub add flutter_local_notifications hive

Firebase Setup

To start using Firebase client SDKs in flutter, we need to have the firebase-tools npm library installed globally. Make sure you have Node.js( v14.18.0 or later) installed, then run npm install -g firebase-tools. The -g flag ensures that the library is installed globally. Installing a node library globally enables us to access it from any directory in the command console. Follow the steps below once the command has successfully run.

1. We must log into the account we used to create the project in the Firebase console. Run the command firebase login to initiate the login process. Your default browser will be opened and render the Google Accounts login page.
2. Once logged in, run the command dart pub global activate flutterfire_cli on the console. The global command argument works the same way as the -g flag in the npm install command. We can run any flutterfire command from any directory.
3. After installing the FlutterFire CLI, we will connect our flutter application to Firebase. Run flutterfire configure on your console.

• Select the Project you had created in the Firebase console.

• Select your target platforms.

• Completion

The Flutterfire configure command guides you through associating a Firebase project to a flutter application. Furthermore, it modifies the application’s file structure by adding a configuration file called firebase_options.dart, within the lib directory. The config file contains details in the Private Key JSON file we downloaded from the Firebase console. Within the android directory, a JSON file has also been created. It contains authentication details required by our android build to communicate with the Firebase server.

Once we run our application after setting the Firebase client SDK app using the flutterfire configure, the target platforms we selected will be listed on our Firebase Project Settings page.

Notifications Configuration

After successfully setting up the Firebase using flutterfire configure, we need to register Firebase in the app’s entry point named main.dart. The file will initialize our application each time it is loaded into a device’s memory. We will also check the authentication state to render the appropriate initial page. If the authentication state is null, the first page will be the login screen; else, the home page containing all quotes will be loaded.

Firstly we must import the necessary dependencies and two screens: the login and home screens. We will then define an asynchronous function responsible for handling our background notifications. Within it, we will initialize a Firebase instance passing default platform configurations. The main function is the first function that will be invoked after the application has been loaded to a platform’s memory.

1    import 'package:flutter/material.dart';
2    import 'package:hive_flutter/hive_flutter.dart';
3    import 'package:firebase_core/firebase_core.dart';
4    import 'package:firebase_messaging/firebase_messaging.dart';
5    import 'package:quotes/screens/home.dart';
6    import 'package:quotes/screens/login.dart';
7    import 'firebase_options.dart';
8    import 'package:flutter_local_notifications/flutter_local_notifications.dart';
9    import 'package:flutter/foundation.dart';
10    import 'dart:async';
11    
12    Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
13      await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
14      print('Handling a background message ${message.messageId}');
15    }
16    
17    late AndroidNotificationChannel channel;
18    late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
19    
20    Future<void> main() async {
21      await Hive.initFlutter();
22      await Hive.openBox('authToken');
23      WidgetsFlutterBinding.ensureInitialized();
24    
25      await Firebase.initializeApp(
26        options: DefaultFirebaseOptions.currentPlatform,
27      );
28    
29      FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
30      if (!kIsWeb) {
31        channel = const AndroidNotificationChannel(
32          'high_importance_channel', // id
33          'High Importance Notifications', // title
34          description:
35              'This channel is used for important notifications.', // description
36          importance: Importance.high,
37        );
38        flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
39        await flutterLocalNotificationsPlugin
40            .resolvePlatformSpecificImplementation<
41                AndroidFlutterLocalNotificationsPlugin>()
42            ?.createNotificationChannel(channel);
43        await FirebaseMessaging.instance
44            .setForegroundNotificationPresentationOptions(
45          alert: true,
46          badge: true,
47          sound: true,
48        );
49      }
50      runApp(const MyApp());
51    }

Within the main function, we initialize a hive box responsible for storing the value of our JWT authentication token. We then call the WidgetsFlutterBinding.ensureIntialized() function to ensure that an instance of the widget binding class is created to use our target platform channels to call native code. The function interacts with the flutter engine to achieve native platform code invocation.

The Firebase.initializeApp() function also calls native code to initialize Firebase. It interacts with the config file(./app/google-services.json) generated by the flutterfire configure command with the android directory. We then initialize notification settings for non-Web platforms using the flutter_local_notification library we installed. This ensures that platform-specific notification APIs can be accessed.

Since we are using the stateful widgets, we will be able to use the initState function to listen for Firebase notification events while the application runs in the foreground of the device.

1    class MyApp extends StatefulWidget {
2      const MyApp({Key? key}) : super(key: key);
3      @override
4      State<MyApp> createState() => _MyAppState();
5    }
6    class _MyAppState extends State<MyApp> {
7      @override
8      void initState() {
9        super.initState();
10        FirebaseMessaging.instance
11            .getInitialMessage()
12            .then((RemoteMessage? message) {
13          if (message != null) {
14            print(message);
15          }
16        });
17        FirebaseMessaging.onMessage.listen((RemoteMessage message) {
18          RemoteNotification? notification = message.notification;
19          AndroidNotification? android = message.notification?.android;
20          if (notification != null && android != null && !kIsWeb) {
21            flutterLocalNotificationsPlugin.show(
22              notification.hashCode,
23              notification.title,
24              notification.body,
25              NotificationDetails(
26                android: AndroidNotificationDetails(
27                  channel.id,
28                  channel.name,
29                  channelDescription: channel.description,
30                  icon: 'launch_background',
31                ),
32              ),
33            );
34          }
35        });
36        FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
37          print('A new onMessageOpenedApp event was published!');
38          print("Notification Opened");
39        });
40      }
41      @override
42      Widget build(BuildContext context) {
43        return MaterialApp(
44          theme: ThemeData(
45            primarySwatch: Colors.blue,
46          ),
47          home: ValueListenableBuilder(
48            valueListenable: Hive.box('authToken').listenable(),
49            builder: (context, Box box, _) {
50              if (box.isEmpty) {
51                return Login(
52                  box: box,
53                );
54              } else {
55                return Home(
56                  box: box,
57                );
58              }
59            },
60          ),
61        );
62      }
63    }

Login Screen

This page will be rendered if Hive fails to return a saved user. This contains a login and registration form. We will use stateful flutter widgets to switch between these two forms based on a state value.

We will begin by importing the necessary dependencies into the file. Then define a class named Login that extends the stateful widget class. The class’ constructor will expect a hive box to be passed to it. A hive box is a named data store that saves data in key-value pairs. We will pass the hive box from the parent, the main.dart. View the code block below.

1    import 'dart:convert';
2    import 'dart:io';
3    import 'package:flutter/foundation.dart';
4    import 'package:flutter/material.dart';
5    import 'package:hive/hive.dart';
6    import 'package:http/http.dart' as http;
7    class Login extends StatefulWidget {
8      const Login({Key? key, required this.box}) : super(key: key);
9      final Box box;
10      @override
11      State<Login> createState() => _LoginState();
12    }
13    class _LoginState extends State<Login> {
14      bool newAccount = false;
15      String get hostname {
16        if (kIsWeb) {
17          return 'http://localhost:1337';
18        } else {
19          return 'http://10.0.3.2:1337';
20        }
21      }
22      Map<String, String> headers = {
23        'Content-Type': 'application/json',
24        'Accept': 'application/json',
25      };
26      TextEditingController usernameController = TextEditingController();
27      TextEditingController emailController = TextEditingController();
28      TextEditingController passwordController = TextEditingController();
29      @override
30      Widget build(BuildContext context) {
31        return Scaffold(
32            body: Container(
33                padding: const EdgeInsets.all(10),
34                child: newAccount ? registerView() : loginView()));
35      }
36    }

We defined a class named _LoginState that extends the state class, which expects a class extending the stateful widget class. A boolean variable named newAccount was initialized to false and is used to render the login and register form. The hostname function returns the URL, which will be used to send requests to the server depending on the platform running the application.

The kIsWeb variable is defined within the foundation library we imported. Its value is true if the current platform is web. Else false when the application runs on Mobile, Linux, Windows, and macOS. We will be sending requests to the Strapi server through the host addresses localhost or 127.0.0.1 on the web. 10.0.3.2 will be used by Genymotion Emulators, and 10.0.2.2 for Android Studio Based emulators. Those addresses are mapped to the host computer while emulating an android device. You can read more about it here.

All requests we send will be in JSON format; therefore, we must set the appropriate request headers through a map. We used text editing controllers to get string values from the material UI text fields. The scaffold widget is the root widget for our screen; it contains a container child that sets a padding value. This prevents the forms from touching the edges of the screen. The padding widget creates spaces on all edges(top, bottom, right, and left).

Login Form

This widget function is invoked conditionally depending on the value of the newAccount variable. The parent widget is a column that ensures that child widgets are arranged vertically. It contains two text fields: the email text field, which captures the username/email entered, and the password text field. Each text field is assigned its respective text editing controller.

The next widget is a text button responsible for calling the post function from the HTTP library we had imported. The last widget is a text button that changes the state of the screen. It modifies the value of the newAccount variable, which determines which widget function will be called. Each time the state changes, the screen renders with the appropriate state.

1    Widget loginView() {
2        return Column(
3          mainAxisAlignment: MainAxisAlignment.center,
4          children: [
5            TextField(
6              controller: emailController,
7              decoration: const InputDecoration(
8                  border: InputBorder.none,
9                  labelText: 'Username/Email Address',
10                  hintText: 'example@example.com'),
11            ),
12            TextField(
13              obscureText: true,
14              controller: passwordController,
15              decoration: const InputDecoration(
16                  border: InputBorder.none,
17                  labelText: 'Password',
18                  hintText: 'Enter your password'),
19            ),
20            TextButton(
21                onPressed: () async {
22                  try {
23                    final response = await http.post(
24                      Uri.parse('$hostname/api/auth/local/'),
25                      headers: headers,
26                      body: jsonEncode(<String, String>{
27                        'password': passwordController.text,
28                        'identifier': emailController.text,
29                      }),
30                    );
31                    var responseData = json.decode(response.body);
32                    widget.box.put("token", responseData["jwt"]);
33                    widget.box.put("username", responseData\["user"\]["username"]);
34                  } on Exception catch (e) {
35                    print(e);
36                  }
37                },
38                child: const Text("Login")),
39            TextButton(
40                onPressed: () {
41                  setState(() {
42                    newAccount = true;
43                  });
44                },
45                child: const Text("Register")),
46          ],
47        );
48    }

The email and password values are retrieved from the text editing controllers the converted into a JSON string using the jsonEncode function from the converted library. Once a request is sent to /api/auth/local/ , and we change the JSON response to a map object and then access the values using their respective keys. The expected response contains the jwt token and user details. We save these details in the hive box because we will use them on other screens. The jwt token is the most important response value because it will authenticate requests to other HTTP endpoints.

Register Form

This widget function is rendered when the value of the newAccount variable is true. It is structured the same way as the login form but has an additional text field that captures a username. Strapi allows us to sign in with either an email or username. The last text button modifies the value of the newAccount variable. When set to false the login form is rendered.

1    Widget registerView() {
2        return Column(
3          mainAxisAlignment: MainAxisAlignment.center,
4          children: [
5            TextField(
6              controller: usernameController,
7              decoration: const InputDecoration(
8                  border: InputBorder.none,
9                  labelText: 'Username',
10                  hintText: 'Enter Your Username'),
11            ),
12            TextField(
13              controller: emailController,
14              decoration: const InputDecoration(
15                  border: InputBorder.none,
16                  labelText: 'Email Address',
17                  hintText: 'example@example.com'),
18            ),
19            TextField(
20              controller: passwordController,
21              decoration: const InputDecoration(
22                  border: InputBorder.none,
23                  labelText: 'Password',
24                  hintText: 'Enter Your Password'),
25            ),
26            TextButton(
27                onPressed: () async {
28                  try {
29                    final response = await http.post(
30                      Uri.parse('$hostname/api/auth/local/register'),
31                      headers: headers,
32                      body: jsonEncode(<String, String>{
33                        'username': usernameController.text,
34                        'password': passwordController.text,
35                        'email': emailController.text,
36                      }),
37                    );
38                    var responseData = json.decode(response.body);
39                    widget.box.put("token", responseData["jwt"]);
40                    widget.box.put("username", responseData\["user"\]["username"]);
41                  } on Exception catch (e) {
42                    print(e);
43                  }
44                },
45                child: const Text("Create account")),
46            TextButton(
47                onPressed: () {
48                  setState(() {
49                    newAccount = false;
50                  });
51                },
52                child: const Text("Login")),
53          ],
54        );
55    }

Home screen

This screen is responsible for loading and rendering all quotes from the Strapi server. This page is only rendered when a user is authenticated. It also fetches the Firebase cloud messaging token and sends it to the server.

Before the screen loads, we will send an authenticated GET request to the Strapi server and get a list of quotes. The initState function is called before the widget is rendered on the device screen.

We will override it and add some logic to fetch the Firebase messaging token and fetch the quotes. In addition, we will check whether the messaging token value has been set on hive. If not, we fetch the token using Firebase's getToken function. A web push certificate key is needed if the current platform is Web. It is found on the cloud messaging tab in the project’s settings on the Firebase console. Add the code below within your ./lib/screens/home.dart

1    //./lib/screens/home.dart
2    @override
3    void initState() {
4        super.initState();
5        if (!widget.box.containsKey("fcm")) {
6          if (kIsWeb) {
7            //TODO: Get your Web Push Certificate Key from Firebase
8            FirebaseMessaging.instance
9                .getToken(
10                    vapidKey:
11                        'INSERT YOUR WEB PUSH CERTIFICATE KEY HERE')
12                .then(setToken);
13          } else {
14            //If Running android
15            FirebaseMessaging.instance.getToken().then(setToken);
16          }
17        }
18        setState(() {
19          username = widget.box.get("username");
20        });
21        _tokenStream = FirebaseMessaging.instance.onTokenRefresh;
22        _tokenStream.listen(setToken);
23        fetchQuotes();
24    }
25    
26    void setToken(String? token) async {
27        if (token != null) {
28          await http.post(
29            Uri.parse('$hostname/api/auth/local/fcm'),
30            headers: headers(),
31            body: jsonEncode(<String, String>{
32              'token': token,
33            }),
34          );
35          widget.box.put("fcm", token);
36        }
37    }

Displaying the Quotes

The quotes will be rendered within a ListView widget, each being embedded within a dismissible widget. This enables the user to swipe horizontally to delete a specific quote. Once the swipe gesture has been detected on a quote, a dialog asking for confirmation will be displayed. If the action is confirmed an authenticated DELETE request is sent to the endpoint /api/quote/quote_id. A user can only delete their quotes. We check if the usernames match before displaying the delete dialog.

1    Widget renderQuotes(BuildContext context) {
2        return ListView.builder(
3            itemCount: quotes.length,
4            itemBuilder: ((context, index) {
5              return Dismissible(
6                key: Key(quotes\[index\]["id"].toString()),
7                confirmDismiss: (DismissDirection direction) async {
8                  if (quotes\[index\]["owner"]["username"] == username) {
9                    return await showDialog(
10                      context: context,
11                      builder: (BuildContext context) {
12                        return AlertDialog(
13                          title: const Text("Confirm"),
14                          content: const Text(
15                              "Are you sure you wish to delete this item?"),
16                          actions: [
17                            TextButton(
18                                onPressed: () async {
19                                  var quoteId = quotes\[index\]["id"].toString();
20                                  await http.delete(
21                                      Uri.parse('$hostname/api/quotes/$quoteId'),
22                                      headers: headers());
23                                  fetchQuotes();
24                                  Navigator.of(context).pop(true);
25                                },
26                                child: const Text("Delete")),
27                            TextButton(
28                              onPressed: () => Navigator.of(context).pop(false),
29                              child: const Text("Cancel"),
30                            ),
31                          ],
32                        );
33                      },
34                    );
35                  } else {
36                    return false;
37                  }
38                },
39                onDismissed: (direction) {
40                  ScaffoldMessenger.of(context).showSnackBar(
41                      const SnackBar(content: Text('Successfully Deleted')));
42                },
43                background: Container(color: Colors.red),
44                child: ListTile(
45                  title: Text(quotes\[index\]["description"]),
46                  subtitle: Text(quotes\[index\]["owner"]["username"] == username
47                      ? "Me"
48                      : quotes\[index\]["owner"]["username"]),
49                  trailing: Column(
50                    children: [
51                      GestureDetector(
52                          onTap: (() async {
53                            if (quotes\[index\]["liked"]) {
54                              ScaffoldMessenger.of(context)
55                                  .showSnackBar(const SnackBar(
56                                content: Text("Already liked"),
57                              ));
58                            } else {
59                              var like = jsonEncode(<String, Map<String, String>>{
60                                "data": {"quote": quotes\[index\]["id"].toString()}
61                              });
62                              await http.post(
63                                Uri.parse('$hostname/api/likes'),
64                                headers: headers(),
65                                body: like,
66                              );
67                              fetchQuotes();
68                            }
69                          }),
70                          child: Icon(Icons.favorite,
71                              color: quotes\[index\]["liked"]
72                                  ? Colors.red
73                                  : Colors.blue)),
74                      Text(quotes\[index\]["likes"].length.toString())
75                    ],
76                  ),
77                ),
78              );
79            }));
80      }

Form Screen

This screen is responsible for posting a new quote to the Strapi server. It contains only one form field within a stateless widget class. The screen is an immutable widget because it will not be rebuilt once rendered on the screen.

Like in the login screen, we use the text editing controller to get typed text from the form field. The quote description is sent via an authenticated POST request to the HTTP route /api/quotes. If the quote is successfully posted, we check the response status code and then navigate back to the home screen.

1    import 'dart:convert';
2    import 'dart:io';
3    import 'package:flutter/foundation.dart';
4    import 'package:flutter/material.dart';
5    import 'package:flutter/src/foundation/key.dart';
6    import 'package:flutter/src/widgets/framework.dart';
7    import 'package:hive_flutter/hive_flutter.dart';
8    import 'package:http/http.dart' as http;
9    class AddForm extends StatelessWidget {
10      AddForm({Key? key, required this.box}) : super(key: key);
11      final Box box;
12      TextEditingController quoteController = TextEditingController();
13      String get hostname {
14        if (kIsWeb) {
15          return 'http://localhost:1337';
16        } else {
17          return 'http://10.0.3.2:1337';
18        }
19      }
20      Map<String, String> headers() {
21        var authToken = box.get("token");
22        return {
23          'Content-Type': 'application/json',
24          'Accept': 'application/json',
25          'Authorization': 'Bearer $authToken'
26        };
27      }
28      @override
29      Widget build(BuildContext context) {
30        return Scaffold(
31            appBar: AppBar(
32              title: Text("New Quote"),
33            ),
34            body: Container(
35              padding: EdgeInsets.all(10),
36              child: Column(children: [
37                TextField(
38                  controller: quoteController,
39                  decoration: const InputDecoration(
40                      border: InputBorder.none,
41                      labelText: "What's on your mind?",
42                      hintText: 'Enter Your Name'),
43                ),
44                TextButton(
45                    onPressed: () async {
46                      var quote = jsonEncode(<String, Map<String, String>>{
47                        "data": {"description": quoteController.text.toString()}
48                      });
49                      final response = await http.post(
50                        Uri.parse('$hostname/api/quotes'),
51                        headers: headers(),
52                        body: quote,
53                      );
54                      var responseData = json.decode(response.body);
55                      if (response.statusCode == 200 &&
56                          responseData["description"] ==
57                              quoteController.text.toString() &&
58                          responseData["id"] >= 1) {
59                        Navigator.pop(context);
60                      } else {
61                        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
62                          content: Text(
63                              "Something went wrong while posting your quote!"),
64                        ));
65                      }
66                    },
67                    child: Text("Add Quote"))
68              ]),
69            ));
70      }
71    }

The implementation of Firebase on a Strapi server looks like this:

Conclusion

This tutorial taught us how to add Firebase cloud messaging to our Strapi server. In addition, we figured out how to extend collection functions to create relations and trigger push notifications. We then used a flutter application to test the different functionalities we added to our Strapi server. We got Firebase cloud messaging tokens through the application, made authenticated requests, and received push notifications from the Strapi Server. Flutter enabled us to test our notifications integration on different platforms.

You can view the source code from the following repositories:

1. Flutter front-end
2. Strapi back-end