From b0fe321adb691a43ad61c0fe576d504d41098116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kvasnic=CC=8Ca=CC=81k?=
 <michal.kvasnicak@gmail.com>
Date: Tue, 7 Jan 2025 13:04:16 +0100
Subject: [PATCH] fix: load dev env variables from backend

---
 packages/debugger/app/client-info/route.ts    | 17 ++++++++++++
 .../app/components/frame-app-debugger.tsx     | 27 ++++++++++++++-----
 2 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 packages/debugger/app/client-info/route.ts

diff --git a/packages/debugger/app/client-info/route.ts b/packages/debugger/app/client-info/route.ts
new file mode 100644
index 00000000..c4727827
--- /dev/null
+++ b/packages/debugger/app/client-info/route.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export function GET() {
+  return Response.json(
+    {
+      fid: z.coerce
+        .number()
+        .int()
+        .parse(process.env.FARCASTER_DEVELOPER_FID || "-1"),
+    },
+    {
+      headers: {
+        "Cache-Control": "no-store",
+      },
+    }
+  );
+}
diff --git a/packages/debugger/app/components/frame-app-debugger.tsx b/packages/debugger/app/components/frame-app-debugger.tsx
index 7149fb44..a3ed8a21 100644
--- a/packages/debugger/app/components/frame-app-debugger.tsx
+++ b/packages/debugger/app/components/frame-app-debugger.tsx
@@ -25,6 +25,7 @@ import type {
 } from "@frames.js/render/frame-app/types";
 import { useConfig } from "wagmi";
 import type { EIP6963ProviderInfo } from "@farcaster/frame-sdk";
+import { z } from "zod";
 
 type TabValues = "events" | "console" | "notifications";
 
@@ -82,8 +83,20 @@ export function FrameAppDebugger({
   );
   const resolveClient: ResolveClientFunction = useCallback(async () => {
     try {
+      const clientInfoResponse = await fetch("/client-info");
+
+      if (!clientInfoResponse.ok) {
+        throw new Error("Failed to fetch client info");
+      }
+
+      const parseClientInfo = z.object({
+        fid: z.number().int(),
+      });
+
+      const clientInfo = parseClientInfo.parse(await clientInfoResponse.json());
+
       const { manager } = await frameAppNotificationManagerPromiseRef.current;
-      const clientFid = parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1");
+      const clientFid = clientInfo.fid;
 
       if (!manager.state || manager.state.frame.status === "removed") {
         return {
@@ -93,7 +106,7 @@ export function FrameAppDebugger({
       }
 
       return {
-        clientFid: parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1"),
+        clientFid,
         added: true,
         notificationDetails:
           manager.state.frame.notificationDetails ?? undefined,
@@ -107,12 +120,12 @@ export function FrameAppDebugger({
           "Failed to load notifications settings. Check the console for more details.",
         variant: "destructive",
       });
-    }
 
-    return {
-      clientFid: parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1"),
-      added: false,
-    };
+      return {
+        clientFid: -1,
+        added: false,
+      };
+    }
   }, [toast]);
   const frameApp = useFrameAppInIframe({
     debug: true,