Before you dive in, make sure you've got these covered:

• A Supabase project is ready to go.
• Firebase Cloud Messaging (FCM) is set up for push notifications.

1. Head over to the Firebase Console.
2. Either start a new project or pick one you already have.
3. Go to Project Settings > Cloud Messaging.
4. Grab the Server key and Sender ID.

1. Open the Supabase Dashboard.

2. Choose your project.

3. Go to Database > Tables and create a new table to store FCM tokens:

   ```sql
   create table fcm_tokens (
   id serial primary key,
   user_id uuid references auth.users(id),
   fcm_token text not null
   );
   ```

1. Add the Firebase SDK to your client app:

   ```html

   ```

2. Set up Firebase in your client app:

   ```javascript
   const firebaseConfig = {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_PROJECT_ID.appspot.com",
   messagingSenderId: "YOUR_SENDER_ID",
   appId: "YOUR_APP_ID"
   };

   firebase.initializeApp(firebaseConfig);
   const messaging = firebase.messaging();
   ```

3. Get the device token and save it in Supabase:

```javascript
messaging.getToken({ vapidKey: 'YOUR_PUBLIC_VAPID_KEY' }).then((currentToken) => {
if (currentToken) {
// Send token to your server
saveTokenToDatabase(currentToken);
} else {
console.warn('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.error('An error occurred while retrieving token. ', err);
});

function saveTokenToDatabase(token) {
fetch('https://YOUR_SUPABASE_URL/rest/v1/fcm\_tokens', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'apikey': 'YOUR_SUPABASE_ANON_KEY',
'Authorization': Bearer ${SUPABASE_SESSION_TOKEN}
},
body: JSON.stringify({
user_id: YOUR_USER_ID,
fcm_token: token
}),
});
}
```

1. Create a function to fetch FCM tokens from Supabase:

   ```javascript
   async function getFcmTokens() {
   const response = await fetch('https://YOUR_SUPABASE_URL/rest/v1/fcm\_tokens', {
   method: 'GET',
   headers: {
   'Content-Type': 'application/json',
   'apikey': 'YOUR_SUPABASE_ANON_KEY',
   'Authorization': Bearer ${SUPABASE_SESSION_TOKEN}
   },
   });

   return await response.json();
   }
   ```

2. Send notifications using the FCM server key:

   ```javascript
   const fcmTokens = await getFcmTokens();

   fcmTokens.forEach(token => {
   fetch('https://fcm.googleapis.com/fcm/send', {
   method: 'POST',
   headers: {
   'Content-Type': 'application/json',
   'Authorization': key=${YOUR_SERVER_KEY}
   },
   body: JSON.stringify({
   notification: {
   title: 'Notification Title',
   body: 'Notification Body',
   click_action: 'https://your-site.com',
   icon: 'https://your-site.com/icon.png'
   },
   to: token.fcm_token
   }),
   }).then(response => response.json())
   .then(data => console.log('Success:', data))
   .catch((error) => console.error('Error:', error));
   });
   ```

1. Add a background message handler in your client app:

   ```javascript
   messaging.onBackgroundMessage((payload) => {
   console.log('[firebase-messaging-sw.js] Received background message ', payload);
   // Customize and display notification here
   });
   ```

2. Add a click event handler:

   ```javascript
   self.addEventListener('notificationclick', function(event) {
   event.notification.close();
   event.waitUntil(
   clients.openWindow('https://your-site.com')
   );
   });
   ```

This guide walks you through setting up push notifications with Supabase.