Firebase Cloud Messaging

Go to console.firebase.google.com and create a new project (or open an existing one). In the left sidebar, click the gear icon next to 'Project Overview' and select 'Project settings.' Click the 'Service accounts' tab. You will see a section titled 'Firebase Admin SDK.' Click 'Generate new private key' and confirm by clicking 'Generate key.' A JSON file will download to your computer — this file contains your project ID, client email, and the RSA private key. Keep this file secure: it grants admin access to your Firebase project. Do not commit it to GitHub or paste it into a Bubble form field. Also, from the same 'Project settings' page, click the 'General' tab and scroll to 'Your apps.' If you do not have a web app registered, click the web icon (</>) to add one. Copy the `firebaseConfig` object (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId) — you will need this for client-side token registration in Step 5. Finally, click 'Cloud Messaging' in the left sidebar to confirm Cloud Messaging is active for your project.

1// Sample service account JSON structure (do NOT put this in Bubble)
2// Store in your helper endpoint's environment variables
3{
4  "type": "service_account",
5  "project_id": "your-project-id",
6  "private_key_id": "abc123...",
7  "private_key": "-----BEGIN RSA PRIVATE KEY-----\n...",
8  "client_email": "firebase-adminsdk-xxxxx@your-project-id.iam.gserviceaccount.com",
9  "client_id": "123456789",
10  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
11  "token_uri": "https://oauth2.googleapis.com/token"
12}

Open your Bubble app editor and click 'Settings' in the left sidebar, then select 'Environment Variables.' Click 'New variable' and create two entries. First: name it FIREBASE_PROJECT_ID and paste your project ID value (e.g. 'my-app-a1b2c') — this is not sensitive but convenient to store here. Second: name it FIREBASE_SA_CLIENT_EMAIL and paste the client_email from the service account JSON (e.g. 'firebase-adminsdk-xxxxx@my-app-a1b2c.iam.gserviceaccount.com'). Do NOT paste the private_key directly into a Bubble Environment Variable — Bubble's Environment Variables are not encrypted and can be seen by collaborators with editor access. Instead, the private key should stay inside your helper endpoint's secure environment (Lambda environment variables, Google Cloud Function secrets, Supabase Vault, etc.). What you are storing in Bubble is only the non-sensitive identifiers that your helper endpoint needs to be called (or for logging/tracking purposes). The helper endpoint should have the private_key stored in its own secret management system.

1// Bubble Settings → Environment Variables
2// Variable 1:
3Name:  FIREBASE_PROJECT_ID
4Value: your-project-id
5
6// Variable 2:
7Name:  FIREBASE_SA_CLIENT_EMAIL
8Value: firebase-adminsdk-xxxxx@your-project-id.iam.gserviceaccount.com
9
10// Do NOT store private_key here — store it in your
11// helper endpoint's secret manager (AWS Secrets Manager,
12// GCP Secret Manager, Supabase Vault, etc.)

Because Bubble cannot perform RSA JWT signing internally, you need a small server-side helper. The simplest option for Firebase projects is a Google Cloud Function (Node.js), which has access to the same Firebase project environment and can use the official 'firebase-admin' npm package. Alternatively, use a Supabase Edge Function, an AWS Lambda, or any Node.js endpoint on Railway or Render. The helper endpoint should: (1) accept an HTTP POST request with a JSON body containing `{deviceToken, title, body, data}` and an `x-api-key` header for caller authentication; (2) use the service account credentials (loaded from secure environment) to obtain a Google OAuth 2.0 Bearer token using the 'google-auth-library' or 'firebase-admin' package; (3) call `https://fcm.googleapis.com/v1/projects/{projectId}/messages:send` with the Bearer token; (4) return `{success: true, messageId: '...'}` or an error JSON. Deploy this endpoint and note its public HTTPS URL — this is what your Bubble Backend Workflow will call. Set a strong, random x-api-key value as an environment variable in the helper and save it somewhere secure; you will add it as a Private header in Bubble's API Connector in the next step.

1// Google Cloud Function (Node.js 20) — send-fcm-notification/index.js
2// Deploy with: gcloud functions deploy sendFcmNotification --trigger-http
3
4const admin = require('firebase-admin');
5
6// Initialize once (cold start)
7if (!admin.apps.length) {
8  admin.initializeApp(); // auto-picks up credentials in Cloud Functions environment
9}
10
11exports.sendFcmNotification = async (req, res) => {
12  // Verify caller API key
13  const apiKey = req.headers['x-api-key'];
14  if (apiKey !== process.env.BUBBLE_FCM_SECRET) {
15    return res.status(401).json({ error: 'Unauthorized' });
16  }
17
18  const { deviceToken, title, body, data } = req.body;
19
20  if (!deviceToken || !title) {
21    return res.status(400).json({ error: 'Missing deviceToken or title' });
22  }
23
24  try {
25    const message = {
26      token: deviceToken,
27      notification: { title, body: body || '' },
28      data: data || {}
29    };
30
31    const messageId = await admin.messaging().send(message);
32    return res.status(200).json({ success: true, messageId });
33  } catch (error) {
34    console.error('FCM send error:', error);
35    return res.status(500).json({
36      error: error.message,
37      errorCode: error.errorInfo?.code
38    });
39  }
40};

In your Bubble app editor, click 'Plugins' in the left sidebar. If you do not already have the API Connector plugin installed, click 'Add plugins,' search for 'API Connector,' and install the free plugin by Bubble. Back in the Plugins tab, click 'API Connector.' Click 'Add another API' and name this group 'FCM Helper.' In the 'Shared headers across all calls' section, click 'Add a shared header.' Name it 'x-api-key' and paste your helper endpoint's secret API key as the value. Critically: check the 'Private' checkbox next to this header — this ensures the key is processed server-side and never sent to the browser, even when this API call is used in a client-side workflow. Under the 'Authentication' field for this API group, leave it as 'None' since you are handling authentication via the custom header. Click 'Add call.' Name this call 'Send Notification.' Set the method to POST and the endpoint URL to your helper's full HTTPS URL (e.g. `https://us-central1-your-project.cloudfunctions.net/sendFcmNotification`). In the Body section, set type to JSON and add these parameters: `deviceToken` (text, example: 'DEVICE_TOKEN_PLACEHOLDER'), `title` (text, example: 'Test Notification'), `body` (text, example: 'This is a test'), `data` (text, example: '{}'). Click 'Initialize call.' If the helper endpoint is running and returns a success response, Bubble will detect the response schema. Change 'Use as' to 'Action' (since this call triggers a side effect, not a data fetch).

1// API Connector configuration (represented as JSON for reference)
2{
3  "api_group": "FCM Helper",
4  "shared_headers": [
5    {
6      "key": "x-api-key",
7      "value": "your-secret-key-here",
8      "private": true
9    },
10    {
11      "key": "Content-Type",
12      "value": "application/json"
13    }
14  ],
15  "calls": [
16    {
17      "name": "Send Notification",
18      "method": "POST",
19      "url": "https://us-central1-your-project.cloudfunctions.net/sendFcmNotification",
20      "use_as": "Action",
21      "body": {
22        "deviceToken": "<dynamic>",
23        "title": "<dynamic>",
24        "body": "<dynamic>",
25        "data": "<dynamic>"
26      }
27    }
28  ]
29}

Push notifications require the user to grant browser notification permission, and the FCM SDK then returns a unique registration token for that browser/device. In Bubble, the easiest way to collect this token is via the Zeroqode Firebase plugin (a paid plugin — verify current pricing at zeroqode.com). Install it from the Bubble Plugin Marketplace by clicking Plugins → Add plugins and searching for 'Firebase' (look for the one by Zeroqode). In the plugin settings, paste your Firebase web app config: Project ID, API Key, Auth Domain, Storage Bucket, Messaging Sender ID, and App ID (all from the Firebase console under Project settings → General → Your apps). These are client-safe keys. Once installed, the plugin adds 'Firebase' actions to your Bubble workflow editor, including 'Get FCM Token' (or equivalent — check the plugin's action list for the exact name). Create a Bubble data type called 'FCM Token' with fields: User (type: User), Token (type: text), Created Date (type: date). Then, on your main page or dashboard page, add a workflow triggered by 'Page is loaded.' Add the action: Firebase plugin → 'Request notification permission & get token.' After this action succeeds, add another action: 'Create a new FCM Token' with User = Current User and Token = the result of the previous step. The next time the user visits, check if their FCM Token already exists before creating a duplicate. If you prefer not to use the paid Zeroqode plugin, you can load the Firebase JS SDK via a Script tag in the page header (Bubble Settings → SEO/metatags → Script/Meta tags in header) and use a 'Run JavaScript' action (requires the Toolbox plugin) to call `firebase.messaging().getToken()` and store the result in a Bubble custom state, then save it to the database.

1// Option B: Manual Firebase JS SDK approach
2// Paste in Bubble page header (Settings → SEO/metatags → Script in header)
3// REPLACE config values with your actual Firebase project config
4
5// firebase-messaging-sw.js must be served at your app root
6// (requires Bubble Business plan or a CDN workaround for service worker)
7
8// In page header:
9<script type="module">
10import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
11import { getMessaging, getToken } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-messaging.js';
12
13const firebaseConfig = {
14  apiKey: "AIzaSy...",
15  authDomain: "your-project.firebaseapp.com",
16  projectId: "your-project-id",
17  storageBucket: "your-project.appspot.com",
18  messagingSenderId: "123456789",
19  appId: "1:123456789:web:abc123"
20};
21
22const app = initializeApp(firebaseConfig);
23const messaging = getMessaging(app);
24
25// Called when user clicks 'Enable Notifications' button
26window.requestFCMToken = async function() {
27  try {
28    const token = await getToken(messaging, {
29      vapidKey: 'YOUR_VAPID_KEY_FROM_FIREBASE_CONSOLE'
30    });
31    // Store token in Bubble via custom state or element attribute
32    bubble_fn_setFCMToken(token); // Toolbox plugin function
33  } catch (err) {
34    console.error('FCM token error:', err);
35  }
36};
37</script>

Now wire everything together using a Bubble Backend Workflow. In the Bubble editor, click 'Backend workflows' in the left sidebar (if you do not see this, your plan may not include it — check Settings → Plan). Click 'New API workflow' and name it 'Send Push Notification.' Add parameter inputs: 'target_user' (type: User) and optionally 'message_title' (text) and 'message_body' (text). Inside this workflow, add a 'Step 1: Search for FCM Token' action — use 'Search for FCM Tokens' where User = input target_user, and get the first result (most recent token). Add a conditional: 'Only when step 1's FCM Token's Token is not empty.' Add 'Step 2: FCM Helper - Send Notification' (the API Connector action you configured in Step 4). Map the parameters: deviceToken = Step 1's FCM Token's Token, title = message_title input (or hardcode a default), body = message_body input. Save the Backend Workflow. To trigger this workflow from other Bubble workflows: in any regular workflow (button click, data change, scheduled recurring workflow), add the action 'Schedule API Workflow' (paid plan action). Select 'Send Push Notification' and pass the target user and message text. For the 'Run at' time, use 'Current date/time' to fire immediately. For bulk sends, use 'Schedule API Workflow on a List' with a list of users. Test by triggering the Backend Workflow manually from Bubble's workflow editor — click the three-dot menu on the Backend Workflow and select 'Run now' to fire it immediately. Check the result in Bubble's Logs tab → Workflow logs. If the FCM token is valid and the helper endpoint is running, you should receive the push notification in your browser within a few seconds. If RapidDev's team has built hundreds of Bubble apps with push notification pipelines like this and you are hitting issues at this stage, a free scoping call at rapidevelopers.com/contact can save hours of debugging.

1// Backend Workflow: 'Send Push Notification'
2// Parameters: target_user (User), message_title (text), message_body (text)
3//
4// Step 1: Search for FCM Tokens
5//   Type: FCM Token
6//   Constraint: User = input's target_user
7//   Sort by: Created Date (descending)
8//   Count: 1
9//
10// Step 2 (only when Step 1's first item's Token is not empty):
11//   FCM Helper - Send Notification
12//   deviceToken: Step 1's first item's Token
13//   title: input's message_title
14//   body: input's message_body
15//   data: {}
16//
17// Trigger from any workflow:
18//   Action: Schedule API workflow
19//   Workflow: Send Push Notification
20//   target_user: [relevant user]
21//   message_title: "Your order shipped!"
22//   message_body: "Track it here: [order link]"
23//   Run at: Current date/time
24
25// FCM HTTP v1 send payload (handled by your helper endpoint)
26{
27  "message": {
28    "token": "fcm_device_token_here",
29    "notification": {
30      "title": "Your order shipped!",
31      "body": "Track it here: https://yourapp.com/orders/123"
32    },
33    "data": {
34      "order_id": "123",
35      "type": "shipment_update"
36    }
37  }
38}