Agent query: Could you try subscribing to push notifications now? The subscribe button is next to the refresh button at the top of the page.

Fix: Correct base64 decoding for VAPID public key in push notification setup.

Screenshot: https://storage.googleapis.com/screenshot-production-us-central1/9dda30b6-4149-4bce-89dc-76333005952c/1157d77d-871a-40da-b8ba-899ab0d784c9.jpg

client/src/lib/utils.ts

@@ -7,16 +7,17 @@ export function cn(...inputs: ClassValue[]) {
 
 // Convert base64 string to Uint8Array for web push
 export function urlBase64ToUint8Array(base64String: string): Uint8Array {
-  const padding = '='.repeat((4 - base64String.length % 4) % 4);
-  const base64 = (base64String + padding)
-    .replace(/\-/g, '+')
-    .replace(/_/g, '/');
+  // Remove any padding characters from the base64 string
+  const base64 = base64String.replace(/=+$/, '');
 
-  const rawData = window.atob(base64);
+  // Replace URL-safe characters back to standard base64 characters
+  const rawData = atob(base64.replace(/-/g, '+').replace(/_/g, '/'));
+
+  // Convert raw string to Uint8Array
   const outputArray = new Uint8Array(rawData.length);
-
   for (let i = 0; i < rawData.length; ++i) {
     outputArray[i] = rawData.charCodeAt(i);
   }
+
   return outputArray;
 }

client/src/pages/home.tsx

@@ -100,7 +100,8 @@ export default function Home() {
       console.log('VAPID public key available:', vapidPublicKey.slice(0, 10) + '...');
 
       const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
-      console.log('Converted VAPID key to Uint8Array');
+      console.log('Converted VAPID key length:', convertedVapidKey.length);
+      console.log('First few bytes:', Array.from(convertedVapidKey.slice(0, 5)));
 
       console.log('Requesting push subscription...');
       const subscription = await registration.pushManager.subscribe({