From d3c183ae74cd7e3f8daa7b5e4c4577a9a651e9b3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 23 Mar 2026 23:28:44 +0000
Subject: [PATCH] fix: wrap useSearchParams in Suspense boundary in
 /auth/callback page

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
Agent-Logs-Url: https://github.com/christianlouis/pop_puller_to_gmail/sessions/b875c9d3-a05d-4a09-87b5-f5f8252a6f3a
---
 CHANGELOG.md                            |  1 +
 frontend/src/app/auth/callback/page.tsx | 74 +++++++++++++++----------
 2 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa22455..66af4bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Fixed
+- Wrapped `useSearchParams()` in a `Suspense` boundary in `frontend/src/app/auth/callback/page.tsx` to fix the Next.js build error: "useSearchParams() should be wrapped in a suspense boundary at page /auth/callback"
 - Fixed TypeScript build error in `frontend/src/app/accounts/page.tsx`: replaced non-existent `account.username` with `account.email_address`, `account.last_checked_at` with `account.last_check_at`, and `account.last_error` with `account.last_error_message` (the backend intentionally excludes `username` from API responses for security)
 - Fixed TypeScript error in `frontend/src/app/auth/callback/page.tsx`: `TokenResponse` doesn't include `user`; now fetches user via `userApi.getCurrentUser()` after OAuth token exchange
 - Fixed TypeScript errors in `frontend/src/app/dashboard/page.tsx`: replaced non-existent `errors_count` with `emails_failed` on `ProcessingRun`
diff --git a/frontend/src/app/auth/callback/page.tsx b/frontend/src/app/auth/callback/page.tsx
index 59aeb3c..0f758d4 100644
--- a/frontend/src/app/auth/callback/page.tsx
+++ b/frontend/src/app/auth/callback/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { authApi, userApi } from '@/lib/api';
 import { useAuthStore } from '@/store/authStore';
 import { Loader2, CheckCircle, XCircle } from 'lucide-react';
 
-export default function AuthCallbackPage() {
+function AuthCallbackContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { setUser } = useAuthStore();
@@ -58,39 +58,57 @@ export default function AuthCallbackPage() {
     handleCallback();
   }, [searchParams, router, setUser]);
 
+  return (
+    <div className="flex flex-col items-center">
+      {status === 'loading' && (
+        <>
+          <Loader2 className="h-12 w-12 text-blue-600 animate-spin mb-4" />
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Authenticating...
+          </h2>
+        </>
+      )}
+      
+      {status === 'success' && (
+        <>
+          <CheckCircle className="h-12 w-12 text-green-600 mb-4" />
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Success!
+          </h2>
+        </>
+      )}
+      
+      {status === 'error' && (
+        <>
+          <XCircle className="h-12 w-12 text-red-600 mb-4" />
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Authentication Failed
+          </h2>
+        </>
+      )}
+      
+      <p className="text-gray-600 text-center">{message}</p>
+    </div>
+  );
+}
+
+export default function AuthCallbackPage() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
-        <div className="flex flex-col items-center">
-          {status === 'loading' && (
-            <>
+        <Suspense
+          fallback={
+            <div className="flex flex-col items-center">
               <Loader2 className="h-12 w-12 text-blue-600 animate-spin mb-4" />
               <h2 className="text-xl font-semibold text-gray-900 mb-2">
                 Authenticating...
               </h2>
-            </>
-          )}
-          
-          {status === 'success' && (
-            <>
-              <CheckCircle className="h-12 w-12 text-green-600 mb-4" />
-              <h2 className="text-xl font-semibold text-gray-900 mb-2">
-                Success!
-              </h2>
-            </>
-          )}
-          
-          {status === 'error' && (
-            <>
-              <XCircle className="h-12 w-12 text-red-600 mb-4" />
-              <h2 className="text-xl font-semibold text-gray-900 mb-2">
-                Authentication Failed
-              </h2>
-            </>
-          )}
-          
-          <p className="text-gray-600 text-center">{message}</p>
-        </div>
+              <p className="text-gray-600 text-center">Processing authentication...</p>
+            </div>
+          }
+        >
+          <AuthCallbackContent />
+        </Suspense>
       </div>
     </div>
   );