updated to cover client (#508)

Author: soheimam

docs/mini-apps/core-concepts/notifications.mdx

@@ -5,47 +5,70 @@ description: Regularly re-engage users by sending in-app notifications through t
 
 ## Overview
 
-When a user enables notifications for your Mini App, the Base App generates a unique notification `token` and `url` which is sent to your server via webhook.
+When a user enables notifications for your Mini App, the Base app generates a unique notification `token` and `url` which is sent to your server via webhook.
 
 This `token` grants your app permission to send in-app notifications to that specific user.
 
 To send a notification, make a `POST` request to the `url` with the user's notification `token` and your content.
 
 You will receive webhook events when users enable or disable notifications for your app. When disabled, the notification token becomes invalid and should no longer be used.
+
+
 <Panel>
 ![notification-image-iphone](/images/minikit/notifications-sample.png)
-
+<Info>
+Notification tokens are unique to each client app. This means a user can have separate notification preferences for your Mini App across different clients (e.g., Farcaster, the Base app). Removing your Mini App in one client does not affect its status in other clients.
+</Info>
 </Panel>
 ## Implementation
 <Steps>
   <Step title="Create a webhook server">
-    Create a webhook server to handle webhook events. 
+    Create a webhook server to handle webhook events.
+
+    <Info>
+    The `data` object returned by `parseWebhookEvent` contains three key fields:
+    - **`fid`**: The user's FID
+    - **`appFid`**: The client's FID (the Base app is 309857)
+    - **`event`**: The event payload with type and notification details
+  
+    Always use both `fid` and `appFid` together to identify a unique user-client combination.
+    </Info> 
 
     ```ts app/api/webhook/route.ts expandable highlight={20-50}
+
+  import {
+      parseWebhookEvent,
+      verifyAppKeyWithNeynar,
+    } from "@farcaster/miniapp-node";
+
     export async function POST(request: NextRequest) {
       const requestJson = await request.json();
 
       // Parse and verify the webhook event
       let data;
       try {
-        data = await validateWebhookEventSignature(requestJson);
+        data = await parseWebhookEvent(requestJson, verifyAppKeyWithNeynar);
         // Events are signed by the app key of a user with a JSON Farcaster Signature.
       } catch (e: unknown) {
         // Handle verification errors (invalid data, invalid app key, etc.)
         // Return appropriate error responses with status codes 400, 401, or 500
       }
 
+      // Extract webhook data
+
       const fid = data.fid;
+      const appFid = data.appFid; // The FID of the client app that the user added the Mini App to
       const event = data.event;
 
       // Handle different event types
       switch (event.event) {
         case "miniapp_added":
           // Save notification details and send welcome notification
           if (event.notificationDetails) {
-            await setUserNotificationDetails(fid, event.notificationDetails);
+            await setUserNotificationDetails(fid, appFid, event.notificationDetails);
             await sendMiniAppNotification({
               fid,
+              appFid,
               title: "Welcome to Base Mini Apps",
               body: "Mini app is now added to your client",
             });
@@ -54,22 +77,23 @@ You will receive webhook events when users enable or disable notifications for y
 
         case "miniapp_removed":
           // Delete notification details
-          await deleteUserNotificationDetails(fid);
+          await deleteUserNotificationDetails(fid, appFid);
           break;
 
         case "notifications_enabled":
           // Save new notification details and send confirmation
-          await setUserNotificationDetails(fid, event.notificationDetails);
+          await setUserNotificationDetails(fid, appFid, event.notificationDetails);
           await sendMiniAppNotification({
             fid,
+            appFid,
             title: "Ding ding ding",
             body: "Notifications are now enabled",
           });
           break;
 
         case "notifications_disabled":
           // Delete notification details
-          await deleteUserNotificationDetails(fid);
+          await deleteUserNotificationDetails(fid, appFid);
           break;
       }
 
@@ -161,14 +185,16 @@ You will receive webhook events when users enable or disable notifications for y
     ```ts sendNotification.ts highlight={15-28}
     export async function sendMiniAppNotification({
       fid,
+      appFid,
       title,
       body,
     }: {
       fid: number;
+      appFid: number;
       title: string;
       body: string;
     }): Promise<sendMiniAppNotificationResult> {
-      const notificationDetails = await getUserNotificationDetails(fid);
+      const notificationDetails = await getUserNotificationDetails(fid, appFid);
       if (!notificationDetails) {
         return { state: "no_token" };
       }
@@ -263,7 +289,7 @@ Mini App events use the following object structure:
 
 * **`type`**: notification event type
 * **`notificationDetails.url`**: URL that the app should call to send a notification.
-* **`notificationDetails.token`**: A secret token generated by the Base App and shared with the Notification Server. A token is unique for each (Farcaster Client, Mini App, user Fid) tuple.
+* **`notificationDetails.token`**: A secret token generated by the Base app and shared with the Notification Server. A token is unique for each (Farcaster Client, Mini App, user Fid) tuple.
 
 <Note>If users are not seeing the option to enable notifications when they call `addMiniApp()`, verify that your manifest file contains a valid `webhookUrl`.</Note>