use login?expired=true for unauthorized logout

src/app/login/page.tsx

@@ -1,65 +1,15 @@
-'use client';
+import { Suspense } from 'react';
+import LoginForm from '@/components/login/LoginForm';
+export const dynamic = 'force-dynamic';
 
-import { loginAction, LoginResult } from '@/lib/actions/auth';
+export default function LoginPage({
-import { useActionState } from 'react';
+	searchParams
-
+}: {
-const initialState: LoginResult = {
+	searchParams: Promise<{ expired: boolean | undefined }>;
-	message: '',
+}) {
-	success: true
-};
-
-export default function LoginPage() {
-	const [state, formAction] = useActionState(loginAction, initialState);
 	return (
-		<div className="flex min-h-screen items-center justify-center bg-gray-900 px-4">
+		<Suspense fallback={<div>Loading...</div>}>
-			<div className="w-full max-w-md space-y-8 rounded-lg bg-gray-800 p-8 shadow-lg">
+			<LoginForm searchParams={searchParams} />
-				<div className="text-center">
+		</Suspense>
-					<h1 className="text-3xl font-bold text-white">ACC Server Manager</h1>
-					<p className="mt-2 text-gray-400">Sign in to manage your servers</p>
-				</div>
-				{state?.success ? null : (
-					<div className="rounded-md border border-red-700 bg-red-900/50 p-3 text-sm text-red-200">
-						{state?.message}
-					</div>
-				)}
-
-				<form action={formAction} className="space-y-6">
-					<div>
-						<label htmlFor="username" className="mb-2 block text-sm font-medium text-gray-300">
-							Username
-						</label>
-						<input
-							id="username"
-							name="username"
-							type="text"
-							autoComplete="username"
-							required
-							className="form-input w-full"
-						/>
-					</div>
-
-					<div>
-						<label htmlFor="password" className="mb-2 block text-sm font-medium text-gray-300">
-							Password
-						</label>
-						<input
-							id="password"
-							name="password"
-							type="password"
-							autoComplete="current-password"
-							required
-							className="form-input w-full"
-						/>
-					</div>
-
-					<button
-						type="submit"
-						className="w-full rounded-md bg-blue-600 px-4 py-3 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-none"
-					>
-						Sign in
-					</button>
-				</form>
-			</div>
-		</div>
 	);
 }

src/components/login/LoginForm.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { clearExpiredSessionAction, loginAction, LoginResult } from '@/lib/actions/auth';
+import { use, useActionState, useEffect } from 'react';
+
+const initialState: LoginResult = {
+	message: '',
+	success: true
+};
+
+export default function LoginForm({
+	searchParams
+}: {
+	searchParams: Promise<{ expired: boolean | undefined }>;
+}) {
+	const params = use(searchParams);
+	const expired = params.expired;
+
+	useEffect(() => {
+		if (expired) {
+			clearExpiredSessionAction();
+		}
+	}, [expired]);
+	const [state, formAction] = useActionState(loginAction, initialState);
+	return (
+		<div className="flex min-h-screen items-center justify-center bg-gray-900 px-4">
+			<div className="w-full max-w-md space-y-8 rounded-lg bg-gray-800 p-8 shadow-lg">
+				<div className="text-center">
+					<h1 className="text-3xl font-bold text-white">ACC Server Manager</h1>
+					<p className="mt-2 text-gray-400">Sign in to manage your servers</p>
+				</div>
+				{expired && (
+					<div className="rounded-md border border-yellow-700 bg-yellow-900/50 p-3 text-sm text-yellow-200">
+						Your session has expired. Please sign in again.
+					</div>
+				)}
+				{state?.success ? null : (
+					<div className="rounded-md border border-red-700 bg-red-900/50 p-3 text-sm text-red-200">
+						{state?.message}
+					</div>
+				)}
+
+				<form action={formAction} className="space-y-6">
+					<div>
+						<label htmlFor="username" className="mb-2 block text-sm font-medium text-gray-300">
+							Username
+						</label>
+						<input
+							id="username"
+							name="username"
+							type="text"
+							autoComplete="username"
+							required
+							className="form-input w-full"
+						/>
+					</div>
+
+					<div>
+						<label htmlFor="password" className="mb-2 block text-sm font-medium text-gray-300">
+							Password
+						</label>
+						<input
+							id="password"
+							name="password"
+							type="password"
+							autoComplete="current-password"
+							required
+							className="form-input w-full"
+						/>
+					</div>
+
+					<button
+						type="submit"
+						className="w-full rounded-md bg-blue-600 px-4 py-3 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-none"
+					>
+						Sign in
+					</button>
+				</form>
+			</div>
+		</div>
+	);
+}

src/components/ui/LogoutButton.tsx

@@ -4,7 +4,7 @@ import { logoutAction } from '@/lib/actions/auth';
 import { useActionState } from 'react';
 
 export default function LogoutButton() {
-	const [_, formAction] = useActionState(logoutAction, null);
+	const [, formAction] = useActionState(logoutAction, null);
 	return (
 		<form action={formAction}>
 			<button type="submit" className="flex items-center text-gray-300 hover:text-white">

src/lib/actions/auth.ts

@@ -45,3 +45,7 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 export async function logoutAction() {
 	await logout();
 }
+
+export async function clearExpiredSessionAction() {
+	await logout();
+}

src/lib/api/client/base.ts

@@ -49,7 +49,7 @@ export async function fetchClientAPI<T>(
 
 	if (!response.ok) {
 		if (response.status === 401) {
-			window.location.href = '/login';
+			window.location.href = '/login?expired=true';
 			return { error: 'unauthorized' };
 		}
 		throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);

src/lib/api/server/base.ts

@@ -6,11 +6,7 @@ type ApiResponse<T> = {
 	message?: string;
 };
 
-import { logout } from '@/lib/auth/server';
+import { redirect } from 'next/navigation';
-
-const destroySession = async (): Promise<void> => {
-	await logout();
-};
 
 export async function fetchServerAPI<T>(
 	endpoint: string,
@@ -32,8 +28,7 @@ export async function fetchServerAPI<T>(
 
 	if (!response.ok) {
 		if (response.status == 401) {
-			await destroySession();
+			redirect('/login?expired=true');
-			return { error: 'unauthorized' };
 		}
 		throw new Error(
 			`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint} - ${token}`

src/lib/auth/server.ts

@@ -12,7 +12,7 @@ export async function requireAuth(skipRedirect?: boolean) {
 	const session = await getSession();
 
 	if (!skipRedirect && (!session.token || !session.user)) {
-		redirect('/login');
+		redirect('/login?expired=true');
 	}
 
 	return session;