From ec77dea850e3fcf311f97f692916e71af2b2aff3 Mon Sep 17 00:00:00 2001
From: Jun-te Kim <junte.kim@mealcraft.com>
Date: Sun, 18 Jan 2026 11:49:40 +0000
Subject: [PATCH] save

---
 .../app/auth/callback/AuthCallbackClient.tsx  | 40 ++++++++++++++++++
 stripe_to_invoice/app/auth/callback/page.tsx  | 41 ++++---------------
 2 files changed, 47 insertions(+), 34 deletions(-)
 create mode 100644 stripe_to_invoice/app/auth/callback/AuthCallbackClient.tsx

diff --git a/stripe_to_invoice/app/auth/callback/AuthCallbackClient.tsx b/stripe_to_invoice/app/auth/callback/AuthCallbackClient.tsx
new file mode 100644
index 0000000..b8cc1ea
--- /dev/null
+++ b/stripe_to_invoice/app/auth/callback/AuthCallbackClient.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+
+export default function AuthCallbackClient() {
+  const params = useSearchParams();
+  const router = useRouter();
+  const ran = useRef(false);
+
+  useEffect(() => {
+    if (ran.current) return;
+    ran.current = true;
+
+    const token = params.get("token");
+    if (!token) {
+      router.replace("/login");
+      return;
+    }
+
+    fetch("/api/auth/callback", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token }),
+    })
+      .then(async (res) => {
+        if (!res.ok) throw new Error(await res.text());
+        router.replace("/app");
+      })
+      .catch(() => {
+        router.replace("/login");
+      });
+  }, [params, router]);
+
+  return (
+    <main className="min-h-screen flex items-center justify-center">
+      <p className="text-sm text-gray-500">Signing you in…</p>
+    </main>
+  );
+}
diff --git a/stripe_to_invoice/app/auth/callback/page.tsx b/stripe_to_invoice/app/auth/callback/page.tsx
index 1f76a57..3945658 100644
--- a/stripe_to_invoice/app/auth/callback/page.tsx
+++ b/stripe_to_invoice/app/auth/callback/page.tsx
@@ -1,40 +1,13 @@
-"use client";
+import { Suspense } from "react";
 
-import { useEffect, useRef } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
+export const dynamic = "force-dynamic";
+
+import AuthCallbackClient from "./AuthCallbackClient";
 
 export default function AuthCallbackPage() {
-  const params = useSearchParams();
-  const router = useRouter();
-  const ran = useRef(false);
-
-  useEffect(() => {
-    if (ran.current) return;
-    ran.current = true;
-
-    const token = params.get("token");
-    if (!token) {
-      router.replace("/login");
-      return;
-    }
-
-    fetch("/api/auth/callback", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ token }),
-    })
-      .then(async (res) => {
-        if (!res.ok) throw new Error(await res.text());
-        router.replace("/app");
-      })
-      .catch(() => {
-        router.replace("/login");
-      });
-  }, [params, router]);
-
   return (
-    <main className="min-h-screen flex items-center justify-center">
-      <p className="text-sm text-gray-500">Signing you in…</p>
-    </main>
+    <Suspense fallback={null}>
+      <AuthCallbackClient />
+    </Suspense>
   );
 }