How to Integrate Bolt.new with Firebase Cloud Messaging

1# .env file — add these to your project root
2# Client-side Firebase config (safe to expose, use NEXT_PUBLIC_ prefix)
3NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
4NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
5NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
6NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
7NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
8NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef
9NEXT_PUBLIC_FIREBASE_VAPID_KEY=your_vapid_public_key
10
11# Server-side firebase-admin (NEVER expose these — no NEXT_PUBLIC_ prefix)
12FIREBASE_PROJECT_ID=your-project-id
13FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@your-project.iam.gserviceaccount.com
14# Copy private_key exactly from JSON, including \n escape sequences
15FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvAIBAD...\n-----END PRIVATE KEY-----\n"

1// lib/firebase.ts — client-side initialization
2import { initializeApp, getApps, getApp } from 'firebase/app';
3import { getMessaging, type Messaging } from 'firebase/messaging';
4
5const firebaseConfig = {
6  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
8  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
9  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
10  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
11  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
12};
13
14const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
15
16export function getFirebaseMessaging(): Messaging | null {
17  // Messaging is only available in browser environments
18  if (typeof window === 'undefined') return null;
19  try {
20    return getMessaging(app);
21  } catch {
22    return null;
23  }
24}
25
26export { app };

1// components/NotificationPermission.tsx
2'use client';
3import { useState } from 'react';
4import { getToken } from 'firebase/messaging';
5import { getFirebaseMessaging } from '@/lib/firebase';
6
7export function NotificationPermission() {
8  const [status, setStatus] = useState<'idle' | 'loading' | 'granted' | 'denied'>('idle');
9
10  async function requestPermission() {
11    setStatus('loading');
12    try {
13      const permission = await Notification.requestPermission();
14      if (permission !== 'granted') {
15        setStatus('denied');
16        return;
17      }
18      const messaging = getFirebaseMessaging();
19      if (!messaging) {
20        // Service Worker not available — running in WebContainer preview
21        console.warn('FCM not available: Service Worker cannot register in WebContainer. Deploy to test push notifications.');
22        setStatus('denied');
23        return;
24      }
25      const token = await getToken(messaging, {
26        vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY,
27      });
28      if (token) {
29        await fetch('/api/save-fcm-token', {
30          method: 'POST',
31          headers: { 'Content-Type': 'application/json' },
32          body: JSON.stringify({ token }),
33        });
34        setStatus('granted');
35      }
36    } catch (error) {
37      console.error('Error requesting notification permission:', error);
38      setStatus('denied');
39    }
40  }
41
42  if (status === 'granted') return <p className="text-green-600">Notifications enabled</p>;
43  if (status === 'denied') return <p className="text-red-500">Notifications blocked or unavailable</p>;
44
45  return (
46    <button
47      onClick={requestPermission}
48      disabled={status === 'loading'}
49      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
50    >
51      {status === 'loading' ? 'Requesting...' : 'Enable Notifications'}
52    </button>
53  );
54}

1// app/api/send-notification/route.ts
2import { NextResponse } from 'next/server';
3import { initializeApp, getApps, cert } from 'firebase-admin/app';
4import { getMessaging } from 'firebase-admin/messaging';
5
6// Initialize firebase-admin once
7if (!getApps().length) {
8  initializeApp({
9    credential: cert({
10      projectId: process.env.FIREBASE_PROJECT_ID,
11      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
12      // Replace escaped \n with real newlines — required for env var format
13      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
14    }),
15  });
16}
17
18export async function POST(request: Request) {
19  try {
20    const { token, title, body, data } = await request.json();
21
22    if (!token || !title) {
23      return NextResponse.json(
24        { error: 'token and title are required' },
25        { status: 400 }
26      );
27    }
28
29    const messaging = getMessaging();
30    const messageId = await messaging.send({
31      token,
32      notification: { title, body },
33      data: data ?? {},
34      webpush: {
35        notification: {
36          icon: '/icon-192x192.png',
37          badge: '/badge-72x72.png',
38        },
39        fcmOptions: {
40          link: process.env.NEXT_PUBLIC_APP_URL ?? '/',
41        },
42      },
43    });
44
45    return NextResponse.json({ success: true, messageId });
46  } catch (error) {
47    console.error('FCM send error:', error);
48    return NextResponse.json(
49      { error: 'Failed to send notification' },
50      { status: 500 }
51    );
52  }
53}

1// public/firebase-messaging-sw.js — REQUIRED file in public/ folder
2// This Service Worker handles background push notifications
3// Must be at the root of your domain for FCM to register it
4importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js');
5importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-compat.js');
6
7firebase.initializeApp({
8  apiKey: 'REPLACE_WITH_YOUR_API_KEY',
9  authDomain: 'REPLACE_WITH_YOUR_AUTH_DOMAIN',
10  projectId: 'REPLACE_WITH_YOUR_PROJECT_ID',
11  storageBucket: 'REPLACE_WITH_YOUR_STORAGE_BUCKET',
12  messagingSenderId: 'REPLACE_WITH_YOUR_SENDER_ID',
13  appId: 'REPLACE_WITH_YOUR_APP_ID',
14});
15
16const messaging = firebase.messaging();
17
18// Handle background messages
19messaging.onBackgroundMessage((payload) => {
20  console.log('Background message received:', payload);
21  const { title, body } = payload.notification ?? {};
22  self.registration.showNotification(title ?? 'New notification', {
23    body: body ?? '',
24    icon: '/icon-192x192.png',
25  });
26});
27
28// Handle notification click — open app when user taps notification
29self.addEventListener('notificationclick', (event) => {
30  event.notification.close();
31  event.waitUntil(
32    clients.openWindow(event.notification.data?.link ?? '/')
33  );
34});