How to Subscribe a User to an FCM Topic in Firebase

1import { getMessaging, getToken, onMessage } from "firebase/messaging";
2import { initializeApp } from "firebase/app";
3
4const app = initializeApp({ /* your config */ });
5const messaging = getMessaging(app);
6
7async function requestNotificationPermission(): Promise<string | null> {
8  const permission = await Notification.requestPermission();
9  if (permission !== "granted") {
10    console.log("Notification permission denied");
11    return null;
12  }
13
14  const token = await getToken(messaging, {
15    vapidKey: "your-vapid-key-from-firebase-console",
16  });
17
18  console.log("FCM token:", token);
19  return token;
20}
21
22// Listen for foreground messages
23onMessage(messaging, (payload) => {
24  console.log("Message received:", payload);
25});

1// Client-side: send token to server
2async function subscribeToTopic(token: string, topic: string) {
3  const response = await fetch("/api/subscribe", {
4    method: "POST",
5    headers: { "Content-Type": "application/json" },
6    body: JSON.stringify({ token, topic }),
7  });
8  return response.json();
9}
10
11// Server-side: Cloud Function (v2)
12import { onRequest } from "firebase-functions/v2/https";
13import { getMessaging } from "firebase-admin/messaging";
14import { initializeApp } from "firebase-admin/app";
15
16initializeApp();
17const messaging = getMessaging();
18
19export const subscribe = onRequest(async (req, res) => {
20  const { token, topic } = req.body;
21
22  if (!token || !topic) {
23    res.status(400).json({ error: "token and topic are required" });
24    return;
25  }
26
27  // Validate topic name: alphanumeric, hyphens, underscores, dots
28  if (!/^[a-zA-Z0-9_.-]+$/.test(topic)) {
29    res.status(400).json({ error: "Invalid topic name" });
30    return;
31  }
32
33  const result = await messaging.subscribeToTopic([token], topic);
34  res.json({
35    success: result.successCount,
36    errors: result.errors,
37  });
38});

1import { getMessaging } from "firebase-admin/messaging";
2
3const messaging = getMessaging();
4
5// Send a notification message to a topic
6async function sendTopicNotification(
7  topic: string,
8  title: string,
9  body: string,
10  data?: Record<string, string>
11) {
12  const message = {
13    topic,
14    notification: {
15      title,
16      body,
17    },
18    data: data || {},
19    webpush: {
20      notification: {
21        icon: "/icon-192x192.png",
22        badge: "/badge-72x72.png",
23      },
24      fcmOptions: {
25        link: "https://your-app.com/notifications",
26      },
27    },
28  };
29
30  const messageId = await messaging.send(message);
31  console.log("Sent to topic:", topic, "messageId:", messageId);
32  return messageId;
33}
34
35// Usage
36await sendTopicNotification(
37  "product-updates",
38  "New Feature Released",
39  "Check out our latest update with improved performance.",
40  { url: "/changelog" }
41);

1// Server-side: unsubscribe endpoint
2import { onRequest } from "firebase-functions/v2/https";
3import { getMessaging } from "firebase-admin/messaging";
4
5const messaging = getMessaging();
6
7export const unsubscribe = onRequest(async (req, res) => {
8  const { token, topic } = req.body;
9
10  if (!token || !topic) {
11    res.status(400).json({ error: "token and topic are required" });
12    return;
13  }
14
15  const result = await messaging.unsubscribeFromTopic([token], topic);
16  res.json({
17    success: result.successCount,
18    errors: result.errors,
19  });
20});
21
22// Track subscriptions in Firestore for UI state
23import { getFirestore, FieldValue } from "firebase-admin/firestore";
24
25const db = getFirestore();
26
27async function updateSubscription(
28  userId: string,
29  topic: string,
30  subscribed: boolean
31) {
32  const userRef = db.collection("users").doc(userId);
33  if (subscribed) {
34    await userRef.update({ topics: FieldValue.arrayUnion(topic) });
35  } else {
36    await userRef.update({ topics: FieldValue.arrayRemove(topic) });
37  }
38}

1import { getMessaging, getToken } from "firebase/messaging";
2
3const messaging = getMessaging();
4
5// Check for token refresh on each app load
6async function refreshTokenAndResubscribe(userId: string) {
7  const currentToken = await getToken(messaging, {
8    vapidKey: "your-vapid-key",
9  });
10
11  // Compare with stored token
12  const response = await fetch("/api/check-token", {
13    method: "POST",
14    headers: { "Content-Type": "application/json" },
15    body: JSON.stringify({ userId, token: currentToken }),
16  });
17
18  const { tokenChanged, topics } = await response.json();
19
20  if (tokenChanged && topics.length > 0) {
21    // Re-subscribe new token to all user's topics
22    await fetch("/api/resubscribe", {
23      method: "POST",
24      headers: { "Content-Type": "application/json" },
25      body: JSON.stringify({
26        token: currentToken,
27        topics,
28      }),
29    });
30  }
31}
32
33// Server-side: batch re-subscribe
34// import { getMessaging } from "firebase-admin/messaging";
35// const messaging = getMessaging();
36// for (const topic of topics) {
37//   await messaging.subscribeToTopic([token], topic);
38// }