From ff22add4245fab76f4f8e54ce436e638a79dc81e Mon Sep 17 00:00:00 2001
From: "XPS\\Micro" <Rainer Wieland>
Date: Sat, 31 Jan 2026 17:44:51 +0100
Subject: [PATCH] fix: wrap useSearchParams in Suspense boundary for verify
 pages

- Extract VerifySignupContent and VerifyLoginContent components
- Wrap components in Suspense boundary to avoid static generation errors
- Add loading spinner fallback during hydration
- Fixes 'useSearchParams() should be wrapped in a suspense boundary' error in Next.js 14
---
 frontend/src/app/verify-login/page.tsx  | 18 ++++++++++++++++--
 frontend/src/app/verify-signup/page.tsx | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/verify-login/page.tsx b/frontend/src/app/verify-login/page.tsx
index 7837b59..6e33878 100644
--- a/frontend/src/app/verify-login/page.tsx
+++ b/frontend/src/app/verify-login/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
 
-export default function VerifyLoginPage() {
+function VerifyLoginContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { verifyLogin } = useAuth();
@@ -121,3 +121,17 @@ export default function VerifyLoginPage() {
     </div>
   );
 }
+
+export default function VerifyLoginPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
+          <Loader2 className="h-12 w-12 animate-spin text-primary" />
+        </div>
+      }
+    >
+      <VerifyLoginContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/verify-signup/page.tsx b/frontend/src/app/verify-signup/page.tsx
index 7cd52f3..da4311d 100644
--- a/frontend/src/app/verify-signup/page.tsx
+++ b/frontend/src/app/verify-signup/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
 
-export default function VerifySignupPage() {
+function VerifySignupContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { verifySignup } = useAuth();
@@ -121,3 +121,17 @@ export default function VerifySignupPage() {
     </div>
   );
 }
+
+export default function VerifySignupPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center bg-muted/50 p-4">
+          <Loader2 className="h-12 w-12 animate-spin text-primary" />
+        </div>
+      }
+    >
+      <VerifySignupContent />
+    </Suspense>
+  );
+}