How to Integrate Firebase Cloud Messaging with V0

Start in V0 and describe the UI components that will handle push notification opt-in and display. A well-designed permission prompt dramatically increases opt-in rates — browsers only let you ask for permission once, so the UI should clearly explain the value before triggering the native browser dialog. Ask V0 to generate a dismissible banner or modal that explains what kinds of notifications the user will receive, with a clear call-to-action button. Also ask V0 to generate a notification preferences panel (perhaps in settings) where users can toggle different notification categories on and off. For the navigation, ask for a bell icon with an unread badge counter and a dropdown list of recent notifications. Design these components with realistic placeholder data so you can see exactly how they will look when real notifications arrive. Use V0's Design Mode to refine colors, spacing, and typography until the notification UI matches your app's visual design. The components should accept props for notification data so they are easy to wire up to real state in later steps.

FCM web push requires a service worker file that runs in the background and handles incoming messages even when your app is not open. In Next.js, place this file at public/firebase-messaging-sw.js — the public directory serves files at the root path, so the browser can register it at /firebase-messaging-sw.js which is the path FCM expects. The service worker imports the Firebase messaging scripts from the CDN using importScripts, then initializes Firebase with your project config and sets up a background message handler. The background message handler runs when a notification arrives while your app tab is not in focus or is closed — it displays the notification using the Notification API. Next, create a lib/firebase-messaging.ts file that initializes the Firebase Messaging SDK on the client side. This file exports a function to get the FCM registration token, which requires your VAPID key. The VAPID key is a Web Push protocol credential that proves your server is authorized to send notifications — find it in Firebase Console under Project Settings → Cloud Messaging → Web Push certificates → Generate key pair. This key is safe to expose as a NEXT_PUBLIC_ variable because it is part of the public VAPID standard.

1// public/firebase-messaging-sw.js
2importScripts('https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js');
3importScripts('https://www.gstatic.com/firebasejs/10.8.0/firebase-messaging-compat.js');
4
5firebase.initializeApp({
6  apiKey: self.FIREBASE_API_KEY,
7  authDomain: self.FIREBASE_AUTH_DOMAIN,
8  projectId: self.FIREBASE_PROJECT_ID,
9  storageBucket: self.FIREBASE_STORAGE_BUCKET,
10  messagingSenderId: self.FIREBASE_MESSAGING_SENDER_ID,
11  appId: self.FIREBASE_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-192x192.png',
21  });
22});

Now wire the notification permission UI you generated in V0 to the actual browser Notification API and FCM token retrieval. Create a custom hook called useNotifications that manages the full permission and token flow. When the user clicks 'Enable Notifications', the hook calls Notification.requestPermission(). If the browser returns 'granted', it calls your getRegistrationToken function to retrieve the FCM token. This token is a long string that uniquely identifies this user's browser on this device. You must save this token to your database — store it alongside the user's ID so your backend can look up which tokens belong to which user when sending targeted notifications. Use a Next.js server action or a POST request to /api/fcm/register to save the token. The hook should also handle the case where permission is 'denied' — show a message explaining how the user can re-enable notifications in their browser settings (chrome://settings/content/notifications on Chrome). Subscribe the useNotifications hook into your notification permission banner component so the 'Enable Notifications' button triggers the real permission flow. Also use the Firebase onMessage listener (foreground messages) to show in-app toast notifications when the app is open and a push arrives.

1'use client';
2
3import { useEffect, useState, useCallback } from 'react';
4import { getMessaging, getToken, onMessage } from 'firebase/messaging';
5import { app } from '@/lib/firebase';
6
7const VAPID_KEY = process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY;
8
9export function useNotifications() {
10  const [permission, setPermission] = useState<NotificationPermission>('default');
11  const [token, setToken] = useState<string | null>(null);
12  const [isLoading, setIsLoading] = useState(false);
13  const [error, setError] = useState<string | null>(null);
14
15  useEffect(() => {
16    if (typeof window !== 'undefined') {
17      setPermission(Notification.permission);
18    }
19  }, []);
20
21  useEffect(() => {
22    if (typeof window === 'undefined' || !('serviceWorker' in navigator)) return;
23    const messaging = getMessaging(app);
24    const unsubscribe = onMessage(messaging, (payload) => {
25      console.log('Foreground message:', payload);
26      // Trigger your toast/notification display here
27    });
28    return () => unsubscribe();
29  }, []);
30
31  const requestPermission = useCallback(async () => {
32    setIsLoading(true);
33    setError(null);
34    try {
35      const result = await Notification.requestPermission();
36      setPermission(result);
37      if (result !== 'granted') {
38        setError('Notification permission denied.');
39        return;
40      }
41      const messaging = getMessaging(app);
42      const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
43      const fcmToken = await getToken(messaging, {
44        vapidKey: VAPID_KEY,
45        serviceWorkerRegistration: registration,
46      });
47      setToken(fcmToken);
48      await fetch('/api/fcm/register', {
49        method: 'POST',
50        headers: { 'Content-Type': 'application/json' },
51        body: JSON.stringify({ token: fcmToken }),
52      });
53    } catch (err) {
54      setError(err instanceof Error ? err.message : 'Failed to enable notifications');
55    } finally {
56      setIsLoading(false);
57    }
58  }, []);
59
60  return { permission, token, requestPermission, isLoading, error };
61}

Build two Next.js API routes: one that saves FCM tokens to your database, and one that sends notifications using the firebase-admin SDK. The token registration route (app/api/fcm/register/route.ts) receives a token from the client, associates it with the current user's ID, and upserts it in your database — this way you always have a fresh token per user. The send notification route (app/api/fcm/send/route.ts) uses the firebase-admin SDK to send a message. Initialize firebase-admin with your service account credentials stored as a server-only environment variable. Never use the NEXT_PUBLIC_ prefix for service account credentials — they must stay on the server. The service account JSON contains a private key, so store the entire JSON as a single environment variable. When you initialize firebase-admin, parse the JSON string from process.env.FIREBASE_SERVICE_ACCOUNT. The send route accepts a token (for targeting one device), a topic (for broadcasting), a title, and a body. It then calls admin.messaging().send() and returns the message ID. This route can be called from anywhere in your backend — other API routes, scheduled jobs, or webhook handlers — to trigger notifications.

1// app/api/fcm/send/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import * as admin from 'firebase-admin';
4
5function getFirebaseAdmin() {
6  if (admin.apps.length > 0) return admin.app();
7  const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT ?? '{}');
8  return admin.initializeApp({
9    credential: admin.credential.cert(serviceAccount),
10  });
11}
12
13export async function POST(req: NextRequest) {
14  try {
15    const { token, topic, title, body } = await req.json();
16
17    if (!title || !body) {
18      return NextResponse.json({ error: 'title and body are required' }, { status: 400 });
19    }
20
21    if (!token && !topic) {
22      return NextResponse.json({ error: 'Either token or topic is required' }, { status: 400 });
23    }
24
25    const firebaseAdmin = getFirebaseAdmin();
26    const messaging = firebaseAdmin.messaging();
27
28    const message: admin.messaging.Message = {
29      notification: { title, body },
30      ...(token ? { token } : { topic }),
31    };
32
33    const messageId = await messaging.send(message);
34    return NextResponse.json({ success: true, messageId });
35  } catch (error) {
36    console.error('FCM send error:', error);
37    return NextResponse.json(
38      { error: 'Failed to send notification' },
39      { status: 500 }
40    );
41  }
42}

Before deploying, configure all environment variables in Vercel. Open your Vercel project, go to Settings → Environment Variables, and add each variable. The client-side Firebase config values must use the NEXT_PUBLIC_ prefix so Next.js includes them in the browser bundle — without this prefix, they are undefined on the client. The FIREBASE_SERVICE_ACCOUNT variable must NOT have the NEXT_PUBLIC_ prefix, keeping your service account private key server-only. To get your VAPID key, go to Firebase Console → Project Settings → Cloud Messaging → scroll to Web Push certificates → Generate key pair. Copy the public key string. For the service account, go to Project Settings → Service accounts → Generate new private key — this downloads a JSON file. Copy the entire contents of that JSON file and paste it as the value of FIREBASE_SERVICE_ACCOUNT in Vercel. Vercel handles multi-line and JSON values correctly. After saving all variables, trigger a new deployment by pushing to your connected GitHub branch. Once deployed, test by visiting your app, clicking 'Enable Notifications', granting permission, and then calling your /api/fcm/send route from the Vercel dashboard's API test tool or from your admin UI. For complex notification architectures or if you need help setting up topic subscriptions and user segmentation, RapidDev's team can configure the full FCM pipeline including token management and delivery analytics.

1# .env.local (development only — never commit this file)
2NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
3NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
4NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
5NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
6NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
7NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123
8NEXT_PUBLIC_FIREBASE_VAPID_KEY=BL9qG...
9
10# Server-only (no NEXT_PUBLIC_ prefix)
11FIREBASE_SERVICE_ACCOUNT={"type":"service_account","project_id":"your-project","private_key_id":"...","private_key":"-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n","client_email":"...@your-project.iam.gserviceaccount.com"}