resolve logout issues

src/app/api/session/route.ts

@@ -1,11 +0,0 @@
-import { requireAuth } from '@/lib/auth/server';
-import { NextResponse } from 'next/server';
-
-export async function GET(): Promise<NextResponse> {
-	const session = await requireAuth(true);
-	return NextResponse.json({ openToken: session.openToken });
-}
-export async function DELETE(): Promise<void> {
-	const session = await requireAuth(true);
-	session.destroy();
-}

src/app/dashboard/page.tsx

@@ -1,10 +1,10 @@
 import { requireAuth } from '@/lib/auth/server';
 import { getServers } from '@/lib/api/server/servers';
 import { hasPermission } from '@/lib/types';
-import { logoutAction } from '@/lib/actions/auth';
 import Link from 'next/link';
 import { ServerListWithActions } from '@/components/server/ServerListWithActions';
 import { SteamCMDNotification } from '@/components/ui/SteamCMDNotification';
+import LogoutButton from '@/components/ui/LogoutButton';
 
 export default async function DashboardPage() {
 	const session = await requireAuth();
@@ -38,25 +38,7 @@ export default async function DashboardPage() {
 								<span className="ml-1 hidden sm:inline">Users</span>
 							</Link>
 						)}
-						<form action={logoutAction}>
+						<LogoutButton />
-							<button type="submit" className="flex items-center text-gray-300 hover:text-white">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									className="h-6 w-6"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth="2"
-										d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-									/>
-								</svg>
-								<span className="ml-1 hidden sm:inline">Logout</span>
-							</button>
-						</form>
 					</div>
 				</div>
 			</header>

src/components/ui/LogoutButton.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { logoutAction } from '@/lib/actions/auth';
+import { useActionState } from 'react';
+
+export default function LogoutButton() {
+	const [_, formAction] = useActionState(logoutAction, null);
+	return (
+		<form action={formAction}>
+			<button type="submit" className="flex items-center text-gray-300 hover:text-white">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					className="h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth="2"
+						d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+					/>
+				</svg>
+				<span className="ml-1 hidden sm:inline">Logout</span>
+			</button>
+		</form>
+	);
+}

src/lib/actions/auth.ts

@@ -43,5 +43,5 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
 }
 
 export async function logoutAction() {
-	logout();
+	await logout();
 }

src/lib/api/client/base.ts

@@ -17,9 +17,6 @@ const getSession = async (): Promise<SessionData | null> => {
 	}
 	return null;
 };
-const destroySession = async (): Promise<void> => {
-	await fetch('/api/session', { method: 'DELETE' });
-};
 
 export async function fetchClientAPI<T>(
 	endpoint: string,
@@ -52,7 +49,6 @@ export async function fetchClientAPI<T>(
 
 	if (!response.ok) {
 		if (response.status === 401) {
-			await destroySession();
 			window.location.href = '/login';
 			return { error: 'unauthorized' };
 		}

src/lib/api/server/base.ts

@@ -6,8 +6,10 @@ type ApiResponse<T> = {
 	message?: string;
 };
 
+import { logout } from '@/lib/auth/server';
+
 const destroySession = async (): Promise<void> => {
-	await fetch('/api/session', { method: 'DELETE' });
+	await logout();
 };
 
 export async function fetchServerAPI<T>(
@@ -31,7 +33,6 @@ export async function fetchServerAPI<T>(
 	if (!response.ok) {
 		if (response.status == 401) {
 			await destroySession();
-			window.location.href = '/login';
 			return { error: 'unauthorized' };
 		}
 		throw new Error(

src/lib/auth/server.ts

@@ -12,7 +12,6 @@ export async function requireAuth(skipRedirect?: boolean) {
 	const session = await getSession();
 
 	if (!skipRedirect && (!session.token || !session.user)) {
-		session.destroy();
 		redirect('/login');
 	}
 
@@ -28,6 +27,7 @@ export async function login(token: string, user: SessionData['user'], openToken?
 }
 
 export async function logout() {
+	'use server';
 	const session = await getSession();
 	session.destroy();
 }