Connect your app to Firebase Cloud Messaging

1. 1

   Open the Firebase console, go to Project settings > Service accounts, click 'Generate new private key', and download the JSON file.

   Lovable needs this secret key to securely send notifications through your Google project.

2. 2

   If you want web push notifications, find your Firebase API key, App ID (under Project settings > General), and public Web Push VAPID key (under Cloud Messaging).

   Web browsers require these specific public keys to ask users for notification permission.

3. 3

   In Lovable, navigate to Connectors, choose Firebase Cloud Messaging, and click Connect.

   This starts the setup wizard to connect Lovable to your Firebase project.

4. 4

   Enter a connection name, upload the downloaded JSON service account file, and select your client setup ('Server or native only' or 'Include web push').

   This configures how Lovable authenticates with Google and prepares support for web browsers if needed.

5. 5

   If you selected 'Include web push', paste your Firebase API key, App ID, and Web Push VAPID key into the matching fields.

   Lovable needs these details to configure the notification prompt in your app's frontend.

6. 6

   Configure sharing settings for your workspace and click Connect.

   This validates the credentials with Google and saves the active connection.

7. 7

   In your Lovable project chat, ask Lovable to link your connection and implement your push notification workflow.

   This instructs Lovable to write the server code that triggers notifications through the connector.

Connect my Firebase Cloud Messaging connection to this project and build an announcement page where an admin can enter a title and message body to broadcast a push notification to all subscribers on the 'news' topic.

Service Account

A special Google account meant for computer systems rather than individual people, using a private file instead of a password.

VAPID key

A public digital certificate that proves a web push notification is genuinely coming from your website.

Device Token

A unique address assigned to a specific phone or browser so you can send alerts straight to that single device.

Topic

A named group or channel that multiple devices subscribe to so you can message all of them at once.

• Never paste the service account JSON key into project chat or commit it to code; treat it like a master password.
• Notification permission prompts fail inside Lovable's preview pane because browsers block them inside embedded frames; open your app preview in its own browser tab to test.
• The connector only sends alerts; it cannot automatically collect device tokens, read open-rate statistics, or connect other Firebase features like database or auth.
• If sending to a token returns an UNREGISTERED error, that device token has expired and should be deleted from your database.