Next.js Firebase Push Notifications: Full Setup With FCM & Service Worker

npm install firebase
npm install firebase-admin   # for sending, on the server

# .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
NEXT_PUBLIC_FIREBASE_VAPID_KEY=...   # Web Push certificate key pair

# Server only (from a service account key)
FIREBASE_PROJECT_ID=your-project
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxx@your-project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"

import { getApp, getApps, initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Reuse the app on hot reloads instead of initializing it twice
export const firebaseApp = getApps().length ? getApp() : initializeApp(firebaseConfig);

importScripts("https://www.gstatic.com/firebasejs/13.0.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/13.0.0/firebase-messaging-compat.js");

// Service workers can't read process.env, so repeat the public config here
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
});

const messaging = firebase.messaging();

// Messages with a `notification` field are shown by the SDK automatically.
// Only build a notification yourself for data-only messages, or users see two.
messaging.onBackgroundMessage((payload) => {
  if (payload.notification) return;

  const { title = "New update", body = "", link = "/" } = payload.data ?? {};
  return self.registration.showNotification(title, {
    body,
    icon: "/icon-192.png",
    data: { link },
  });
});

// Clicks on the notifications created above (the SDK handles its own)
self.addEventListener("notificationclick", (event) => {
  const link = event.notification.data?.link;
  if (!link) return;
  event.notification.close();
  event.waitUntil(clients.openWindow(link));
});

"use client";

import { useEffect, useState } from "react";
import { getMessaging, isSupported, onMessage, onRegistered, register } from "firebase/messaging";
import { firebaseApp } from "@/lib/firebase";

const VAPID_KEY = process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY;

function saveRegistration(fid) {
  return fetch("/api/push/register", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ fid }),
  });
}

export default function PushNotifications() {
  // checking | unsupported | default | granted | denied | error
  const [status, setStatus] = useState("checking");
  const [lastMessage, setLastMessage] = useState(null);

  useEffect(() => {
    let cancelled = false;
    const unsubscribers = [];

    (async () => {
      if (!(await isSupported())) {
        if (!cancelled) setStatus("unsupported");
        return;
      }
      if (cancelled) return;

      const messaging = getMessaging(firebaseApp);
      unsubscribers.push(
        // Called with the Firebase Installation ID (FID) once registration succeeds
        onRegistered(messaging, (fid) => saveRegistration(fid)),
        // Messages that arrive while this page is visible
        onMessage(messaging, (payload) => setLastMessage(payload.notification ?? payload.data))
      );
      setStatus(Notification.permission);

      // Allowed on an earlier visit: refresh the registration without prompting
      if (Notification.permission === "granted") {
        await register(messaging, { vapidKey: VAPID_KEY });
      }
    })().catch(() => !cancelled && setStatus("error"));

    return () => {
      cancelled = true;
      unsubscribers.forEach((unsubscribe) => unsubscribe());
    };
  }, []);

  async function enable() {
    try {
      // Ask only after a click: browsers block or hide prompts that appear on page load
      const permission = await Notification.requestPermission();
      setStatus(permission);
      if (permission === "granted") {
        await register(getMessaging(firebaseApp), { vapidKey: VAPID_KEY });
      }
    } catch {
      setStatus("error");
    }
  }

  if (status === "checking") return null;
  if (status === "unsupported") {
    return <p>Push notifications aren't supported here. On iPhone and iPad, add this site to your Home Screen first.</p>;
  }
  if (status === "denied") {
    return <p>Notifications are blocked. You can allow them in your browser's site settings.</p>;
  }
  if (status === "default" || status === "error") {
    return (
      <div>
        {status === "error" && <p>Couldn't turn on notifications. Please try again.</p>}
        <button onClick={enable}>Turn on notifications</button>
      </div>
    );
  }
  return (
    <div role="status">
      <p>Notifications are on.</p>
      {lastMessage && (
        <p>
          <strong>{lastMessage.title}</strong> {lastMessage.body}
        </p>
      )}
    </div>
  );
}

// app/layout.jsx
import PushNotifications from "@/components/PushNotifications";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <PushNotifications />
      </body>
    </html>
  );
}

// app/api/push/register/route.js
export async function POST(request) {
  const { fid } = await request.json();
  if (typeof fid !== "string" || fid.length === 0) {
    return Response.json({ error: "fid is required" }, { status: 400 });
  }

  // Save the FID with the signed-in user, e.g. in your database:
  // await db.pushRegistrations.upsert({ userId, fid });

  return Response.json({ ok: true });
}

import { cert, getApps, initializeApp } from "firebase-admin/app";
import { getMessaging } from "firebase-admin/messaging";

// Server only: these come from a service account key, never NEXT_PUBLIC_
const app =
  getApps()[0] ??
  initializeApp({
    credential: cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
    }),
  });

export const adminMessaging = getMessaging(app);

export function sendPush(fid, { title, body, link }) {
  return adminMessaging.send({
    fid,
    notification: { title, body },
    webpush: {
      fcmOptions: { link }, // opened on click; must be a URL on your own site
    },
  });
}

import { sendPush } from "@/lib/firebase-admin";

try {
  await sendPush(fid, {
    title: "New post published",
    body: "How to Fix JavaScript Heap Out of Memory",
    link: "https://www.example.com/post/heap-out-of-memory",
  });
} catch (err) {
  if (err.code === "messaging/installation-id-not-registered") {
    // The browser unsubscribed or the registration expired: forget this FID
    // await db.pushRegistrations.delete({ fid });
  } else {
    throw err;
  }
}