gitea-admin/gh-christianlouis-inboxconverge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wrap useSearchParams in Suspense boundary in /auth/callback page

Browse Source 
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
This commit is contained in:
copilot-swe-agent[bot]
2026-03-23 23:28:44 +00:00
parent 5b71a3903d
commit d3c183ae74
2 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -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`
frontend/src/app/auth/callback/page.tsx
+46 -28
View File
@@ -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>
);