refactor(push): load VAPID key from server at runtime

Dockerfile

@@ -11,6 +11,7 @@ RUN npm install
 COPY . .
 # Use a temporary DB for generation
 ENV DATABASE_URL="file:./temp.db"
+
 RUN npx prisma generate
 RUN npm run build
 

app/actions/subscription.ts

@@ -43,3 +43,7 @@ export async function unsubscribeUser(endpoint: string) {
 
     return { success: true };
 }
+
+export async function getVapidPublicKey() {
+    return process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY;
+}

components/push-manager.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react"
 import { Bell, BellOff, Loader2, AlertTriangle } from "lucide-react"
 import { toast } from "sonner"
-import { subscribeUser, unsubscribeUser } from "@/app/actions/subscription"
+import { subscribeUser, unsubscribeUser, getVapidPublicKey } from "@/app/actions/subscription"
 import { Button } from "@/components/ui/button"
 
 function urlBase64ToUint8Array(base64String: string) {
@@ -31,20 +31,34 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
     const [subscription, setSubscription] = useState<PushSubscription | null>(null)
     const [loading, setLoading] = useState(false)
     const [debugInfo, setDebugInfo] = useState<string | null>(null)
+    const [vapidKey, setVapidKey] = useState<string | null>(null)
 
     useEffect(() => {
-        const checks = []
+        async function checkSupport() {
-        if (!('serviceWorker' in navigator)) checks.push("No Service Worker support")
+            const checks = []
-        if (!('PushManager' in window)) checks.push("No PushManager support")
+            if (!('serviceWorker' in navigator)) checks.push("No Service Worker support")
-        if (!process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY) checks.push("Missing VAPID Key")
+            if (!('PushManager' in window)) checks.push("No PushManager support")
 
-        if (checks.length === 0) {
+            try {
-            setIsSupported(true)
+                const key = await getVapidPublicKey()
-            registerServiceWorker()
+                if (!key) {
-        } else {
+                    checks.push("Missing VAPID Key (Server)")
-            console.warn("Push not supported:", checks.join(", "))
+                } else {
-            setDebugInfo(checks.join(", "))
+                    setVapidKey(key)
+                }
+            } catch (e) {
+                checks.push("Failed to fetch VAPID Key")
+            }
+
+            if (checks.length === 0) {
+                setIsSupported(true)
+                registerServiceWorker()
+            } else {
+                console.warn("Push not supported:", checks.join(", "))
+                setDebugInfo(checks.join(", "))
+            }
         }
+        checkSupport()
     }, [])
 
     async function registerServiceWorker() {
@@ -59,6 +73,10 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
     }
 
     async function subscribe() {
+        if (!vapidKey) {
+            toast.error("VAPID Key missing")
+            return
+        }
         setLoading(true)
         setDebugInfo(null)
         try {
@@ -84,7 +102,7 @@ export function PushSubscriptionSettings({ planId }: { planId: string }) {
 
             const sub = await registration.pushManager.subscribe({
                 userVisibleOnly: true,
-                applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!)
+                applicationServerKey: urlBase64ToUint8Array(vapidKey)
             })
 
             console.log("Subscribed locally:", sub)