How to Integrate Retool with Firebase Cloud Messaging

Open your Retool instance and navigate to the Resources tab in the left sidebar. Click the blue Add Resource button in the top-right corner. In the resource type picker, scroll to the Google section and click Firebase. Retool will open the Firebase resource configuration form. In the 'Resource name' field enter a descriptive name such as 'Firebase Production' or 'FCM Admin'. This name appears in the query editor's resource dropdown, so choose something that clearly identifies the environment. For authentication, paste the entire contents of your Google service account JSON key file into the 'Service Account Key' text area. The JSON key looks like a large block starting with '{ "type": "service_account", "project_id": "...'. Retool encrypts this credential immediately on save and it is never exposed to end users or browser-side JavaScript. Leave the 'Database URL' field populated with your project's Realtime Database URL (format: https://your-project-id-default-rtdb.firebaseio.com) even if you primarily intend to use Cloud Messaging — Retool uses this value to identify the Firebase project. Click Save Changes. Retool will verify the connection by testing the service account credentials. If verification fails, double-check that the JSON key has not been truncated when pasting and that the service account has the Firebase Admin SDK Admin Service Agent role in your Google Cloud IAM console.

Open your Retool app (or create a new one from the Apps tab). In the bottom Code panel, click the + New query button. In the query editor that opens, select your Firebase resource from the Resource dropdown. Retool will display a Firebase-specific query form. You will see a 'Service' dropdown near the top — click it and select 'Cloud Messaging'. The query form updates to show FCM-specific actions. From the 'Action type' dropdown, choose 'Send Message'. The form now presents input fields for the message payload. Fill in: - 'Registration tokens': Enter `{{ tokenInput.value }}` to bind to a text input component, or a raw token string for testing. - 'Title': Enter `{{ titleInput.value }}` to reference a title text input. - 'Body': Enter `{{ bodyInput.value }}` to reference a body text area. - 'Data' (optional): Add custom key-value pairs as a JSON object — for example, `{ "screen": "order_detail", "order_id": "{{ table1.selectedRow.id }}" }` to deep-link the notification to a specific screen. Set 'Run query on page load' to Off. This query should fire only when a user clicks a Send button, not automatically. In the 'On success' event handler, add a Show notification action with message 'Notification sent successfully' to give the operator confirmation. Click the Save button, then rename the query to 'sendFCMMessage' using the pencil icon next to its name.

1// FCM Message payload structure (shown in Retool's Data field for custom payloads)
2{
3  "notification": {
4    "title": "{{ titleInput.value }}",
5    "body": "{{ bodyInput.value }}"
6  },
7  "data": {
8    "screen": "{{ screenInput.value }}",
9    "record_id": "{{ table1.selectedRow.id }}"
10  },
11  "android": {
12    "priority": "high"
13  },
14  "apns": {
15    "headers": {
16      "apns-priority": "10"
17    }
18  }
19}

With your query configured, switch to the Canvas view to build the UI that operators will use. From the Component panel on the right, drag the following components onto the canvas and arrange them in a logical form layout: 1. A Text Input component — rename it 'titleInput'. Set its label to 'Notification Title' and placeholder to 'e.g., Your order has shipped'. In the Validation section, mark it as Required. 2. A Text Area component — rename it 'bodyInput'. Set its label to 'Message Body' and placeholder to 'Enter notification message text'. Mark as Required. 3. A Text Input component — rename it 'tokenInput'. Set its label to 'Device Registration Token(s)' and placeholder to 'Paste FCM token or use table selection'. For production use, you will replace this with dynamic binding from a user table query. 4. A Select component — rename it 'platformSelect'. Set its label to 'Target Platform' and populate Options with: All Platforms, Android Only, iOS Only, Web Only. This value can be passed into the FCM query's condition fields. 5. A Button component — set its label to 'Send Notification'. In the button's Event Handlers section, click + Add event handler, choose the Click trigger, select 'Trigger query', and pick 'sendFCMMessage'. Add a second event handler on Click to open a Confirmation modal component before firing, so operators cannot accidentally send notifications. Group the form inputs inside a Container component with a gray background to visually separate the send form from any data tables on the same page.

FCM topics allow you to send a single message to all devices subscribed to a named channel — for example, 'breaking_news', 'order_updates_region_eu', or 'maintenance_alerts'. Retool's Firebase Resource exposes topic subscribe and unsubscribe operations as separate action types. Create a second query: click + New query in the Code panel, select your Firebase resource, set Service to 'Cloud Messaging', and set Action type to 'Subscribe to topic'. Name this query 'subscribeToTopic'. Set the 'Registration tokens' field to `{{ topicTokenInput.value }}` and the 'Topic name' field to `{{ topicSelect.value }}`. Create a third query with Action type 'Unsubscribe from topic', named 'unsubscribeFromTopic', binding the same component values. Create a fourth query with Action type 'Send Message', but this time set the 'Topic' field (instead of 'Registration tokens') to `{{ topicSelect.value }}`. Name it 'sendToTopic'. On the canvas, add a new section below the device-token form: - A Select component 'topicSelect' populated with your topic names (or bound to a Firestore query reading a 'fcm_topics' collection). - A Text Area 'topicTokenInput' for bulk token entry (one per line). - Two Button components: 'Subscribe' wired to the subscribeToTopic query, and 'Unsubscribe' wired to unsubscribeFromTopic. - A separate mini-form with title and body inputs ('topicTitleInput', 'topicBodyInput') and a 'Send to Topic' button wired to the sendToTopic query. Both subscribe/unsubscribe operations accept arrays, so you can bulk-manage topic membership. Parse newline-separated tokens in a transformer: `topicTokenInput.value.split('\n').map(t => t.trim()).filter(Boolean)`.

1// Transformer: parse newline-separated tokens into an array
2const raw = topicTokenInput.value || '';
3return raw.split('\n').map(t => t.trim()).filter(Boolean);

Production notification systems need an audit log showing who sent what, to whom, and when. Since FCM does not store send history itself, you will write a log record to a Firestore collection immediately after each successful send. Create a new query: click + New query, select your Firebase resource, set Service to 'Firestore', and set Action type to 'Add document'. Set 'Collection' to 'notification_logs'. In the 'Document data' field, enter a JSON object that captures the event: `{ "sent_at": {{ new Date().toISOString() }}, "sent_by": "{{ current_user.email }}", "title": "{{ titleInput.value }}", "body": "{{ bodyInput.value }}", "recipient_type": "device", "token_count": {{ tokenInput.value ? 1 : 0 }}, "status": "sent" }` Name this query 'logNotificationSend'. Set 'Run query on page load' to Off. Now chain the queries: go back to the 'sendFCMMessage' query, open its 'On success' Event Handler section, click + Add event handler, choose 'Trigger query', and select 'logNotificationSend'. This means the Firestore log write happens automatically every time a notification is successfully dispatched. Do the same for the 'sendToTopic' query, updating the 'recipient_type' field to 'topic' and including the topic name. Finally, add a Table component to the app bound to a Firestore query that reads recent notification_logs documents ordered by sent_at descending. This gives operators a live view of send history directly in the panel.

1// Firestore document data for notification log entry
2{
3  "sent_at": "{{ new Date().toISOString() }}",
4  "sent_by": "{{ current_user.email }}",
5  "title": "{{ titleInput.value }}",
6  "body": "{{ bodyInput.value }}",
7  "recipient_type": "device",
8  "platform_target": "{{ platformSelect.value }}",
9  "status": "sent"
10}

Push notification panels carry real operational risk — a single mis-targeted blast can damage user trust. Before deploying the app to your team, apply Retool's access controls to prevent unauthorized sends. Go to the Apps tab, find your notification panel, click the three-dot menu, and select Share. In the Permissions panel, restrict the app to specific Retool groups (e.g., 'ops-team' or 'growth-managers'). Engineers who need read-only access to the log table but should not trigger sends can be given Viewer permissions — in Viewer mode, buttons are visible but non-interactive. For an additional safeguard, edit the 'Send Notification' and 'Send to Topic' buttons: open each button's Event Handlers, check the 'Only show if' Condition box, and enter `{{ current_user.groups.includes('notification-senders') }}`. This conditionally hides the send controls for users who are not in the designated group. With permissions set, perform an end-to-end test: 1. Enter a test device token (use the FCM token from a development build of your app). 2. Fill in a test title and body. 3. Click Send Notification and confirm the modal. 4. Check the target device — the notification should arrive within a few seconds. 5. Verify the Firestore log table shows the new entry with your email as sent_by. For complex multi-audience notification campaigns involving multiple Resources, custom transformer logic, and Retool Workflows for scheduled sends, RapidDev's team can help architect and build your full notification operations system.