Connect your app to Firebase Cloud Messaging

1. 1

   Go to your Firebase project settings and find the 'Service accounts' section.

   You need to get a special key that allows Lovable to securely send messages through your Firebase project.

2. 2

   Generate a new private key for a service account that has the 'Firebase Cloud Messaging API Admin' role, and download the JSON file.

   This JSON file contains the credentials Lovable will use. Make sure it has the correct permissions to send messages.

3. 3

   Keep this JSON file safe and private, as it acts like a password for your Firebase project.

   Anyone with this file could send messages from your Firebase project, so it's important to protect it.

4. 4

   In Lovable, go to 'Connectors' and select 'Firebase Cloud Messaging', then click 'Add connection'.

   This starts the process of setting up the connection between Lovable and your Firebase project.

5. 5

   Give your connection a display name (e.g., 'FCM Prod') and upload the JSON key file you downloaded earlier.

   The display name helps you identify this connection, and the JSON key provides the necessary access.

6. 6

   Choose 'Server or native only' if you're only sending to phone apps, or 'Include web push' if you also want to send notifications to web browsers.

   This setting tells Lovable how to configure the connection for different types of devices.

7. 7

   If you chose 'Include web push', also provide your Firebase API key, Firebase App ID, and Web Push VAPID key from your Firebase web app settings.

   These extra details are needed for Lovable to properly set up web browser notifications.

8. 8

   Decide who in your Lovable workspace can use this connection.

   You can control access to this connection, allowing only specific people or your entire team to use it.

9. 9

   Click 'Connect' to finalize the setup.

   Lovable will verify your settings and save the connection, making it ready for use in your apps.

10. 10

    Once connected, ask Lovable in chat to link this Firebase Cloud Messaging connection to your project.

    Linking the connection makes it available for your specific project, allowing your app to start sending notifications.

I need to connect my Lovable app to Firebase Cloud Messaging. I have my Firebase service account JSON key ready. I want to send notifications to both mobile devices and web browsers. Can you help me set up the connection and link it to my project?

Firebase Cloud Messaging (FCM)

A free service from Google that lets you send messages (like push notifications) to people's phones, tablets, or web browsers, even when they're not actively using your app.

Push notifications

Small messages or alerts that pop up on a user's device (like a phone or computer) even when they're not actively using your app.

Service account

A special type of Google account that apps and services use to interact with Google services, instead of a human user. It has its own credentials (like a key file) to prove its identity.

Registration token

A unique identifier for a specific device or web browser that allows FCM to send notifications directly to it.

Topic

A way to group devices together. You can send a single message to a topic, and all devices subscribed to that topic will receive it.

Data payload

Extra information (like text) that you can send along with a notification, which your app can then use for various purposes.

VAPID key

A special security key used for web push notifications to ensure that only authorized servers can send messages to web browsers.

• Do not paste your service account JSON key into chat or commit it to your code, as it acts like a password.
• Ensure your service account has the 'Firebase Cloud Messaging API Admin' role, or the connection will fail.
• If testing browser push, open your app in a new browser tab, not within the Lovable editor's preview iframe, because browsers block notification prompts in iframes.
• If you initially set up for 'Server or native only' and later need web push, remember to update the connection settings and provide the additional web push details.