feat(api): migrate login and logout to API routes (#1703)

* feat(auth): migrate login and logout to API routes

- Replaced form-based login/logout with fetch-based API routes
- Updated hooks and components to use new `/api/login` and `/api/logout` endpoints

* fix: invalidate on logout

* refactor: move `/api/login` routes back to `/login` and `/api/logout` to `/logout`

remove breaing change to connected apps

Author: nsarrazin

src/lib/components/DisclaimerModal.svelte

@@ -55,20 +55,25 @@
 				{/if}
 			</button>
 			{#if page.data.loginEnabled}
-				<form action="{base}/login" target="_parent" method="POST" class="w-full">
-					<button
-						type="submit"
-						class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					>
-						Sign in
-						{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
-							<span class="flex items-center">
-								&nbsp;with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging
-								Face
-							</span>
-						{/if}
-					</button>
-				</form>
+				<button
+					onclick={async () => {
+						const response = await fetch(`${base}/login`, {
+							method: "POST",
+						});
+						if (response.ok) {
+							window.location.href = await response.text();
+						}
+					}}
+					class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+				>
+					Sign in
+					{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
+						<span class="flex items-center">
+							&nbsp;with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging
+							Face
+						</span>
+					{/if}
+				</button>
 			{/if}
 		</div>
 	</div>

src/lib/components/LoginModal.svelte

@@ -27,10 +27,15 @@
 		</p>
 
 		<form
-			action="{base}/{page.data.loginRequired ? 'login' : 'settings'}"
-			target="_parent"
-			method="POST"
 			class="flex w-full flex-col items-center gap-2"
+			onsubmit={async () => {
+				const response = await fetch(`${base}/login`, {
+					method: "POST",
+				});
+				if (response.ok) {
+					window.location.href = await response.text();
+				}
+			}}
 		>
 			{#if page.data.loginRequired}
 				<button

src/lib/components/NavMenu.svelte

@@ -13,6 +13,7 @@
 	import InfiniteScroll from "./InfiniteScroll.svelte";
 	import type { Conversation } from "$lib/types/Conversation";
 	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+	import { goto } from "$app/navigation";
 
 	interface Props {
 		conversations: ConvSidebar[];
@@ -141,34 +142,43 @@
 	class="mt-0.5 flex touch-none flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
 >
 	{#if user?.username || user?.email}
-		<form
-			action="{base}/logout"
-			method="post"
+		<button
+			onclick={async () => {
+				await fetch(`${base}/logout`, {
+					method: "POST",
+				});
+				await goto(base + "/", { invalidateAll: true });
+			}}
 			class="group flex items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 dark:hover:bg-gray-700"
 		>
 			<span
 				class="flex h-9 flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
 				>{user?.username || user?.email}</span
 			>
 			{#if !user.logoutDisabled}
-				<button
-					type="submit"
+				<span
 					class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
 				>
 					Sign Out
-				</button>
+				</span>
 			{/if}
-		</form>
+		</button>
 	{/if}
 	{#if canLogin}
-		<form action="{base}/login" method="POST" target="_parent">
-			<button
-				type="submit"
-				class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
-			>
-				Login
-			</button>
-		</form>
+		<button
+			onclick={async () => {
+				const response = await fetch(`${base}/login`, {
+					method: "POST",
+					credentials: "include",
+				});
+				if (response.ok) {
+					window.location.href = await response.text();
+				}
+			}}
+			class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			Login
+		</button>
 	{/if}
 	<button
 		onclick={switchTheme}

src/routes/login/+page.server.ts

@@ -0,0 +1,28 @@
+import { getOIDCAuthorizationUrl } from "$lib/server/auth";
+import { base } from "$app/paths";
+import { env } from "$env/dynamic/private";
+
+export async function POST({ request, url, locals }) {
+	const referer = request.headers.get("referer");
+	let redirectURI = `${(referer ? new URL(referer) : url).origin}${base}/login/callback`;
+
+	// TODO: Handle errors if provider is not responding
+
+	if (url.searchParams.has("callback")) {
+		const callback = url.searchParams.get("callback") || redirectURI;
+		if (env.ALTERNATIVE_REDIRECT_URLS.includes(callback)) {
+			redirectURI = callback;
+		}
+	}
+
+	const authorizationUrl = await getOIDCAuthorizationUrl(
+		{ redirectURI },
+		{ sessionId: locals.sessionId }
+	);
+
+	return new Response(authorizationUrl, {
+		headers: {
+			"Content-Type": "text/html",
+		},
+	});
+}

src/routes/login/+server.ts

@@ -1,10 +1,10 @@
-import { redirect, error } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import { getOIDCUserData, validateAndParseCsrfToken } from "$lib/server/auth";
 import { z } from "zod";
 import { base } from "$app/paths";
-import { updateUser } from "./updateUser";
 import { env } from "$env/dynamic/private";
 import JSON5 from "json5";
+import { updateUser } from "./updateUser.js";
 
 const allowedUserEmails = z
 	.array(z.string().email())
@@ -18,7 +18,7 @@ const allowedUserDomains = z
 	.default([])
 	.parse(JSON5.parse(env.ALLOWED_USER_DOMAINS));
 
-export async function load({ url, locals, cookies, request, getClientAddress }) {
+export async function GET({ url, locals, cookies, request, getClientAddress }) {
 	const { error: errorName, error_description: errorDescription } = z
 		.object({
 			error: z.string().optional(),
@@ -27,7 +27,7 @@ export async function load({ url, locals, cookies, request, getClientAddress })
 		.parse(Object.fromEntries(url.searchParams.entries()));
 
 	if (errorName) {
-		error(400, errorName + (errorDescription ? ": " + errorDescription : ""));
+		throw error(400, errorName + (errorDescription ? ": " + errorDescription : ""));
 	}
 
 	const { code, state, iss } = z
@@ -43,7 +43,7 @@ export async function load({ url, locals, cookies, request, getClientAddress })
 	const validatedToken = await validateAndParseCsrfToken(csrfToken, locals.sessionId);
 
 	if (!validatedToken) {
-		error(403, "Invalid or expired CSRF token");
+		throw error(403, "Invalid or expired CSRF token");
 	}
 
 	const { userData } = await getOIDCUserData(
@@ -55,19 +55,19 @@ export async function load({ url, locals, cookies, request, getClientAddress })
 	// Filter by allowed user emails or domains
 	if (allowedUserEmails.length > 0 || allowedUserDomains.length > 0) {
 		if (!userData.email) {
-			error(403, "User not allowed: email not returned");
+			throw error(403, "User not allowed: email not returned");
 		}
 		const emailVerified = userData.email_verified ?? true;
 		if (!emailVerified) {
-			error(403, "User not allowed: email not verified");
+			throw error(403, "User not allowed: email not verified");
 		}
 
 		const emailDomain = userData.email.split("@")[1];
 		const isEmailAllowed = allowedUserEmails.includes(userData.email);
 		const isDomainAllowed = allowedUserDomains.includes(emailDomain);
 
 		if (!isEmailAllowed && !isDomainAllowed) {
-			error(403, "User not allowed");
+			throw error(403, "User not allowed");
 		}
 	}
 
@@ -79,5 +79,5 @@ export async function load({ url, locals, cookies, request, getClientAddress })
 		ip: getClientAddress(),
 	});
 
-	redirect(302, `${base}/`);
+	return redirect(302, `${base}/`);
 }

src/routes/login/callback/+page.server.ts src/routes/login/callback/+server.ts

@@ -0,0 +1,18 @@
+import { dev } from "$app/environment";
+import { base } from "$app/paths";
+import { env } from "$env/dynamic/private";
+import { collections } from "$lib/server/database";
+import { redirect } from "@sveltejs/kit";
+
+export async function POST({ locals, cookies }) {
+	await collections.sessions.deleteOne({ sessionId: locals.sessionId });
+
+	cookies.delete(env.COOKIE_NAME, {
+		path: "/",
+		// So that it works inside the space's iframe
+		sameSite: dev || env.ALLOW_INSECURE_COOKIES === "true" ? "lax" : "none",
+		secure: !dev && !(env.ALLOW_INSECURE_COOKIES === "true"),
+		httpOnly: true,
+	});
+	return redirect(302, `${base}/`);
+}