feat: add HTTPOnly Cookie support (#371)

* add

* add

* add

* add

* add

* Update login_form.svelte

* add

* add

* add

* add

* Update login_form.svelte

* add

* add

* ad

* add

* Update config.ts

* add

Author: baseplate-admin

src/backend/app/deps.py

@@ -4,7 +4,7 @@
 import jwt
 import redis.asyncio as redis
 from botocore.exceptions import ClientError
-from fastapi import Depends, HTTPException, status
+from fastapi import Depends, HTTPException, Request, status
 from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
 from jwt import InvalidTokenError
 from pydantic import ValidationError
@@ -18,7 +18,25 @@
 from app.schemas.token import TokenPayload
 from app.settings import settings
 
-bearer_scheme = HTTPBearer(auto_error=True)
+bearer_scheme = HTTPBearer(auto_error=False)
+
+
+async def get_token_from_cookie_or_header(
+    request: Request, credentials: HTTPAuthorizationCredentials = Depends(bearer_scheme)
+) -> HTTPAuthorizationCredentials:
+    token = request.cookies.get("access_token")
+    if token:
+        return HTTPAuthorizationCredentials(scheme="Bearer", credentials=token)
+
+    # Fallback to Authorization header
+    if credentials:
+        return credentials
+
+    # If no token found
+    raise HTTPException(
+        status_code=status.HTTP_403_FORBIDDEN,
+        detail="Could not validate credentials",
+    )
 
 
 async def get_current_user(session: SessionDep, token: TokenDep) -> User:
@@ -27,7 +45,7 @@ async def get_current_user(session: SessionDep, token: TokenDep) -> User:
             token.credentials, settings.SECRET_KEY, algorithms=[security.ALGORITHM]
         )
         token_data = TokenPayload(**payload)
-    except (InvalidTokenError, ValidationError):
+    except InvalidTokenError, ValidationError:
         raise HTTPException(
             status_code=status.HTTP_403_FORBIDDEN,
             detail="Could not validate credentials",
@@ -69,7 +87,7 @@ async def get_redis():
 SessionDep = Annotated[AsyncSession, Depends(get_session)]
 TokenDep = Annotated[
     HTTPAuthorizationCredentials,
-    Depends(bearer_scheme),
+    Depends(get_token_from_cookie_or_header),
 ]
 CurrentUser = Annotated[User, Depends(get_current_user)]
 S3Dep = Annotated[S3Client, Depends(get_s3_client)]

src/backend/app/main.py

@@ -21,6 +21,7 @@
     allow_origins=["*"],
     allow_methods=["*"],
     allow_headers=["*"],
+    allow_credentials=True,
 )
 
 from app.routes.admin.config import router as admin_config_router
@@ -66,3 +67,7 @@
 from app.routes.speedtest import router as speedtest_router
 
 app.include_router(speedtest_router)
+
+from app.routes.token import router as token_router
+
+app.include_router(token_router)

src/backend/app/routes/login.py

@@ -7,7 +7,7 @@
 
 from app import security
 from app.decorators.rate_limit import rate_limit
-from app.deps import SessionDep
+from app.deps import CurrentUser, SessionDep
 from app.models import User
 from app.schemas.token import Token
 from app.settings import settings
@@ -49,3 +49,5 @@ async def login_endpoint(
     )
 
     return Token(access_token=token_string, token_type="bearer")
+
+

src/backend/app/routes/token.py

@@ -0,0 +1,15 @@
+from fastapi import APIRouter
+
+from app.deps import CurrentUser
+
+router = APIRouter()
+
+
+@router.get("/token/validate", response_model=dict)
+async def validate_token(_: CurrentUser):
+    """
+    Validates the JWT and returns the corresponding user info.
+    """
+    return {
+        "valid": True,
+    }

src/frontend/src/lib/consts/backend.ts

@@ -8,6 +8,7 @@ export const USER_URL = `${BACKEND_API}/user`;
 export const CONFIG_URL = `${BACKEND_API}/config`;
 export const FILE_INFO_URL = `${BACKEND_API}/information`;
 export const ONBOARDING_URL = `${BACKEND_API}/onboarding`;
+export const TOKEN_VALIDATE_URL = `${BACKEND_API}/token/validate`;
 
 export const ADMIN_CONFIG_URL = `${BACKEND_API}/admin/config`;
 export const ADMIN_USER_UPDATE_URL = `${BACKEND_API}/admin/user`;

src/frontend/src/lib/queries/auth.ts

@@ -1,4 +1,4 @@
-import { ADMIN_USER_UPDATE_URL, LOGIN_URL, USER_URL } from '#consts/backend';
+import { ADMIN_USER_UPDATE_URL, USER_URL } from '#consts/backend';
 import { browser } from '$app/environment';
 import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 
@@ -10,15 +10,11 @@ const fetchUser = async ({
 	fetch?: typeof globalThis.window.fetch;
 }) => {
 	if (!browser) return null;
-	const token = localStorage.getItem('auth_token');
-	if (!token) return null;
-
 	const res = await fetch(USER_URL, {
-		headers: { Authorization: `Bearer ${token}` }
+		credentials: 'include'
 	});
 
 	if (!res.ok || res.status === 401) {
-		localStorage.removeItem('auth_token');
 		return null;
 	}
 	return res.json();
@@ -42,52 +38,13 @@ export const useAuth = () => {
 		staleTime: Infinity,
 		retry: false
 	}));
-
-	const login = async (username: string, password: string) => {
-		// Build form data using FormData (let the browser set Content-Type)
-		const form = new FormData();
-		form.append('username', username);
-		form.append('password', password);
-
-		const res = await fetch(LOGIN_URL, {
-			method: 'POST',
-			body: form
-		});
-
-		if (!res.ok) {
-			throw new Error('Invalid username or password');
-		}
-
-		const data = await res.json();
-		const token = data.access_token;
-		if (browser && token) {
-			localStorage.setItem('auth_token', token);
-		}
-		await queryClient.invalidateQueries({ queryKey: queryKey });
-
-		return token;
-	};
-
-	const logout = () => {
-		if (!browser) return null;
-		if (!localStorage.getItem('auth_token')) {
-			throw new Error('Not authenticated');
-		}
-		localStorage.removeItem('auth_token');
-		queryClient.setQueryData(queryKey, null);
-		queryClient.clear();
-	};
-
 	const updateUser = async (data: { username?: string; email?: string | null }) => {
 		if (!browser) return;
-		const token = localStorage.getItem('auth_token');
-		if (!token) throw new Error('Not authenticated');
 
 		const res = await fetch(ADMIN_USER_UPDATE_URL, {
 			method: 'PATCH',
 			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${token}`
+				'Content-Type': 'application/json'
 			},
 			body: JSON.stringify(data)
 		});
@@ -101,16 +58,8 @@ export const useAuth = () => {
 		return res.json();
 	};
 
-	const isAuthenticated = () => {
-		if (!browser) return false;
-		return !!localStorage.getItem('auth_token');
-	};
-
 	return {
 		user: query,
-		login,
-		logout,
-		updateUser,
-		isAuthenticated
+		updateUser
 	};
 };

src/frontend/src/lib/queries/config.ts

@@ -7,7 +7,9 @@ const fetchConfig = async ({
 }: {
 	fetch?: typeof globalThis.window.fetch;
 }) => {
-	const res = await fetch(CONFIG_URL);
+	const res = await fetch(CONFIG_URL, {
+		credentials: 'include'
+	});
 
 	return res.json();
 };
@@ -53,19 +55,17 @@ export const useConfigQuery = () => {
 	}));
 
 	const update_config = async (data: Partial<ConfigIn>) => {
-		const token = localStorage.getItem('auth_token');
-		if (!token) return null;
-
 		const res = await fetch(ADMIN_CONFIG_URL, {
 			method: 'PATCH',
 			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${token}`
+				'Content-Type': 'application/json'
 			},
+			credentials: 'include',
 			body: JSON.stringify(data)
 		});
-
-		if (res.ok) await queryClient.invalidateQueries({ queryKey: ['config'] });
+		if (res.ok) {
+			await queryClient.invalidateQueries({ queryKey: ['config'] });
+		}
 	};
 
 	return {

src/frontend/src/lib/queries/files.ts

@@ -17,15 +17,8 @@ export const useFilesQuery = () => {
 	const query = createQuery(() => ({
 		queryKey: ['admin-files'],
 		queryFn: async () => {
-			const token = localStorage.getItem('auth_token');
-			if (!token) {
-				throw new Error('Not authenticated');
-			}
-
 			const res = await fetch(ADMIN_FILES_URL, {
-				headers: {
-					Authorization: `Bearer ${token}`
-				}
+				credentials: 'include'
 			});
 
 			if (!res.ok) {
@@ -41,14 +34,9 @@ export const useFilesQuery = () => {
 	}));
 
 	const revokeFile = async (id: string) => {
-		const token = localStorage.getItem('auth_token');
-		if (!token) throw new Error('Not authenticated');
-
 		const res = await fetch(`${ADMIN_FILES_URL}/${id}`, {
 			method: 'DELETE',
-			headers: {
-				Authorization: `Bearer ${token}`
-			}
+			credentials: 'include'
 		});
 
 		if (res.ok) {

src/frontend/src/lib/store/user.svelte.ts

@@ -0,0 +1,12 @@
+let authenticated: null | boolean = null;
+
+export const user_store = () => {
+	return {
+		authenticate() {
+			authenticated = true;
+		},
+		get is_authenticated() {
+			return authenticated;
+		}
+	};
+};

src/frontend/src/routes/(needs_onboarding)/(login_required)/+layout.svelte

@@ -5,23 +5,20 @@
 	import * as Empty from '$lib/components/ui/empty/index';
 	import { LoaderCircle, Lock } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
+	import { user_store } from '$lib/store/user.svelte';
 
-	const { isAuthenticated, user: userData } = useAuth();
-
+	const { user: userData } = useAuth();
+	const { is_authenticated } = user_store();
 	let { children } = $props();
 
 	$effect(() => {
-		if (!isAuthenticated()) {
+		if (is_authenticated === null) {
 			goto(`/login?next=${page.url.pathname}`);
 		}
 	});
 </script>
 
-{#if userData.isLoading}
-	<div class="flex w-full flex-1 items-center justify-center">
-		<LoaderCircle class="h-8 w-8 animate-spin text-muted-foreground" />
-	</div>
-{:else if [null, undefined].includes(userData.data)}
+{#if [null, undefined].includes(userData.data)}
 	<div class="flex min-h-svh w-full flex-1 items-center justify-center p-4">
 		<Empty.Root>
 			<Empty.Header class="text-center">