How to Integrate Lovable with Firebase Cloud Messaging

Start by setting up your Firebase project for web push notifications. Open a new browser tab and go to console.firebase.google.com. Click 'Add project', give it a name that matches your Lovable app, and follow the setup wizard. You can disable Google Analytics for this project unless you plan to use Firebase Analytics separately — it is not required for FCM. Once the project is created, click the web icon ('< />') on the project overview page to add a web app. Give the app a nickname. You do not need to set up Firebase Hosting. After registering the app, Firebase shows you a firebaseConfig object containing your apiKey, projectId, messagingSenderId, and appId. Copy these values — you will need them for the frontend service worker configuration. Now go to Project Settings (gear icon in the left sidebar) → Cloud Messaging tab. This page shows two important values: your Server Key (legacy) and VAPID key. The VAPID key is what your frontend service worker uses to subscribe users to web push. Copy the VAPID key (click 'Generate key pair' if none exists) and keep it accessible. Finally, go to Project Settings → Service Accounts tab. Click 'Generate new private key'. Firebase downloads a JSON file containing your service account credentials. This file includes the private_key, client_email, and project_id needed to authenticate FCM API calls from your Edge Function. Store this file securely — do not commit it to GitHub. You will extract specific fields from it in the next step.

The service account JSON file contains sensitive credentials that must be stored in Lovable's encrypted Secrets panel, never in frontend code or Git commits. You will store three values extracted from the service account JSON: the private key, the client email, and the project ID. These are the only values needed to authenticate FCM API calls. To access the Secrets panel in Lovable, click the '+' icon next to the Preview label at the top of the editor. In the Cloud panel that opens, click the 'Secrets' tab. Click 'Add new secret' and add the following three secrets: - Name: FIREBASE_PRIVATE_KEY — Value: the private_key field from the service account JSON. This is a multi-line string starting with '-----BEGIN RSA PRIVATE KEY-----'. Paste the entire value including the header and footer lines. - Name: FIREBASE_CLIENT_EMAIL — Value: the client_email field from the service account JSON (looks like firebase-adminsdk-xxxxx@your-project.iam.gserviceaccount.com) - Name: FIREBASE_PROJECT_ID — Value: the project_id field from the service account JSON (same as your Firebase project ID, e.g., 'my-app-12345') Also add your VAPID key as a non-secret environment variable if you plan to use it in Edge Functions, though the VAPID key is also used on the frontend. For the frontend VAPID key, you can include it in your React code directly since it is a public key by design — the web push specification is built around public/private key pairs where the VAPID public key is safe to expose. After saving, verify all three secrets appear in the Secrets list. The private key value will be masked — if it shows as a short masked string, the full multi-line value was likely truncated. Test it by invoking the Edge Function in the next step.

The Edge Function handles the server-side authentication with Firebase and dispatches push notifications. FCM's HTTP v1 API requires OAuth 2.0 authentication using a Google access token, which is obtained by signing a JWT with your service account private key and exchanging it for a short-lived access token. This is more complex than a simple API key, but the Edge Function below handles the full flow. The function accepts a request body containing the FCM device token (the registration token from the user's browser), a notification title, body text, and an optional click URL. It constructs the Google OAuth JWT, exchanges it for an access token, and then calls the FCM v1 messages.send endpoint. Ask Lovable to create this Edge Function by pasting the prompt below into chat. Alternatively, use the code snippet directly in the Code panel by navigating to supabase/functions/ and creating a new file. The function uses only Deno's built-in crypto API for JWT signing — no external libraries required.

1// supabase/functions/send-push-notification/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7async function getGoogleAccessToken(): Promise<string> {
8  const privateKeyPem = (Deno.env.get('FIREBASE_PRIVATE_KEY') ?? '').replace(/\\n/g, '\n');
9  const clientEmail = Deno.env.get('FIREBASE_CLIENT_EMAIL')!;
10  const now = Math.floor(Date.now() / 1000);
11
12  const header = { alg: 'RS256', typ: 'JWT' };
13  const payload = {
14    iss: clientEmail,
15    scope: 'https://www.googleapis.com/auth/firebase.messaging',
16    aud: 'https://oauth2.googleapis.com/token',
17    iat: now,
18    exp: now + 3600,
19  };
20
21  const encode = (obj: unknown) =>
22    btoa(JSON.stringify(obj)).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
23
24  const signingInput = `${encode(header)}.${encode(payload)}`;
25
26  const pemBody = privateKeyPem.replace(/-----[^-]+-----/g, '').replace(/\s/g, '');
27  const keyBuffer = Uint8Array.from(atob(pemBody), c => c.charCodeAt(0));
28
29  const cryptoKey = await crypto.subtle.importKey(
30    'pkcs8', keyBuffer,
31    { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
32    false, ['sign']
33  );
34
35  const signature = await crypto.subtle.sign(
36    'RSASSA-PKCS1-v1_5',
37    cryptoKey,
38    new TextEncoder().encode(signingInput)
39  );
40
41  const signatureB64 = btoa(String.fromCharCode(...new Uint8Array(signature)))
42    .replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
43
44  const jwt = `${signingInput}.${signatureB64}`;
45
46  const tokenRes = await fetch('https://oauth2.googleapis.com/token', {
47    method: 'POST',
48    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
49    body: `grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer&assertion=${jwt}`,
50  });
51
52  const tokenData = await tokenRes.json();
53  if (!tokenData.access_token) throw new Error(`OAuth error: ${JSON.stringify(tokenData)}`);
54  return tokenData.access_token;
55}
56
57Deno.serve(async (req) => {
58  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
59
60  try {
61    const { fcmToken, title, body, clickUrl } = await req.json();
62    const projectId = Deno.env.get('FIREBASE_PROJECT_ID')!;
63    const accessToken = await getGoogleAccessToken();
64
65    const message: Record<string, unknown> = {
66      token: fcmToken,
67      notification: { title, body },
68      webpush: {
69        fcm_options: clickUrl ? { link: clickUrl } : undefined,
70        notification: { icon: '/icon-192.png' },
71      },
72    };
73
74    const fcmRes = await fetch(
75      `https://fcm.googleapis.com/v1/projects/${projectId}/messages:send`,
76      {
77        method: 'POST',
78        headers: {
79          Authorization: `Bearer ${accessToken}`,
80          'Content-Type': 'application/json',
81        },
82        body: JSON.stringify({ message }),
83      }
84    );
85
86    const fcmData = await fcmRes.json();
87    return new Response(JSON.stringify(fcmData), {
88      status: fcmRes.ok ? 200 : fcmRes.status,
89      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
90    });
91  } catch (error) {
92    console.error('FCM error:', error);
93    return new Response(JSON.stringify({ error: String(error) }), {
94      status: 500,
95      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
96    });
97  }
98});

Web push notifications require a service worker — a JavaScript file running in the browser background that displays notifications even when the app tab is not focused. The service worker file must be accessible at the root of your domain (e.g., yourdomain.com/firebase-messaging-sw.js), which means it needs to be placed in Lovable's public/ directory so Vite includes it as a static asset. The service worker imports the Firebase Messaging SDK from a CDN URL that is compatible with service worker environments. It initializes Firebase with your project's config values and listens for background messages, displaying them using the browser's native Notification API. To add the service worker file, open Lovable's chat and provide the prompt below. Lovable will create the file in the public/ directory and modify your React app to request notification permission on load and store the resulting FCM registration token in Supabase. IMPORTANT: Replace the placeholder config values (VITE_FIREBASE_API_KEY, etc.) with your actual Firebase web app config values. These values are public and safe to include in frontend code — they are not the service account credentials you stored in Secrets. You can add them as VITE_ prefixed environment variables in Lovable's Cloud → Secrets panel if you prefer to keep them out of the code directly (VITE_ prefix makes them available at build time to the frontend).

1// public/firebase-messaging-sw.js
2importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js');
3importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-compat.js');
4
5firebase.initializeApp({
6  apiKey: self.FIREBASE_API_KEY || 'YOUR_API_KEY',
7  authDomain: 'YOUR_PROJECT.firebaseapp.com',
8  projectId: 'YOUR_PROJECT_ID',
9  storageBucket: 'YOUR_PROJECT.appspot.com',
10  messagingSenderId: 'YOUR_SENDER_ID',
11  appId: 'YOUR_APP_ID',
12});
13
14const messaging = firebase.messaging();
15
16messaging.onBackgroundMessage((payload) => {
17  const { title, body, icon } = payload.notification ?? {};
18  self.registration.showNotification(title ?? 'New notification', {
19    body: body ?? '',
20    icon: icon ?? '/icon-192.png',
21    data: payload.data,
22  });
23});

With the Edge Function deployed and the frontend service worker registered, you can test the full notification flow. First, deploy your Lovable app by clicking the Publish button in the top-right corner of the editor. Web push requires a live HTTPS URL — it does not work in the Lovable preview iframe due to service worker scope restrictions. Open your deployed app URL in a browser. You should see a browser permission prompt asking if you allow notifications. Click 'Allow'. Open your browser's developer tools, go to the Console tab, and look for a log message showing your FCM registration token. Copy this token (it is a long string, typically 100-200 characters). Now test the Edge Function directly using Lovable's Cloud → Logs panel or by invoking it from a temporary button in your app. In Lovable's chat, prompt: 'Add a temporary test button to the admin page that calls the send-push-notification Edge Function with my FCM token. Use the token I'll provide and send a notification with title Test Notification and body This is working correctly.' Replace the placeholder token with the one you copied from the console. Click the test button in your deployed app. Within 1-3 seconds you should see a browser push notification appear, even if the app is in the background. If the notification does not appear, check Cloud → Logs for Edge Function errors and verify the FCM token was stored correctly in the device_tokens table in your Supabase database. For production use, remove the test button and implement proper notification triggers — for example, calling the Edge Function from a Supabase database trigger when a new order is placed, or from a user action like sending a message.