sveltekit-auth-example 5.0.4 → 5.1.1

package/src/lib/google.ts

@@ -1,7 +1,6 @@
-import { page } from '$app/stores'
-import { goto } from '$app/navigation'
 import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
-import { googleInitialized, loginSession } from '../stores'
+import { appState } from '$lib/app-state.svelte'
+import { redirectAfterLogin } from '$lib/auth-redirect'
 
 export function renderGoogleButton() {
 	const btn = document.getElementById('googleButton')
@@ -10,26 +9,19 @@ export function renderGoogleButton() {
 			type: 'standard',
 			theme: 'filled_blue',
 			size: 'large',
-			width: 367
+			width: btn.offsetWidth || 400
 		})
 	}
 }
 
 export function initializeGoogleAccounts() {
-	let initialized = false
-	const unsubscribe = googleInitialized.subscribe(value => {
-		initialized = value
-	})
-
-	if (!initialized) {
+	if (!appState.googleInitialized) {
 		google.accounts.id.initialize({
 			client_id: PUBLIC_GOOGLE_CLIENT_ID,
 			callback: googleCallback
 		})
-
-		googleInitialized.set(true)
+		appState.googleInitialized = true
 	}
-	unsubscribe()
 
 	async function googleCallback(response: google.accounts.id.CredentialResponse) {
 		const res = await fetch('/auth/google', {
@@ -42,19 +34,8 @@ export function initializeGoogleAccounts() {
 
 		if (res.ok) {
 			const fromEndpoint = await res.json()
-			loginSession.set(fromEndpoint.user) // update loginSession store
-			const { role } = fromEndpoint.user
-
-			let referrer
-			const unsubscribe = page.subscribe(p => {
-				referrer = p.url.searchParams.get('referrer')
-			})
-			unsubscribe()
-
-			if (referrer) return goto(referrer)
-			if (role === 'teacher') return goto('/teachers')
-			if (role === 'admin') return goto('/admin')
-			if (location.pathname === '/login') goto('/') // logged in so go home
+			appState.user = fromEndpoint.user
+			redirectAfterLogin(fromEndpoint.user)
 		}
 	}
 }

package/src/lib/server/db.ts

@@ -1,16 +1,69 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { QueryResult } from 'pg'
+import type { QueryResult, QueryResultRow } from 'pg'
 import pg from 'pg'
-import { DATABASE_URL } from '$env/static/private'
+import { env } from '$env/dynamic/private'
+
+/**
+ * Generic function signature for executing a typed SQL query.
+ *
+ * @template T The row type returned from the database, extending QueryResultRow.
+ * @param sql The parameterized SQL query string.
+ * @param params Optional positional parameters to bind to the query.
+ * @returns A promise resolving to the typed QueryResult.
+ */
+type QueryFunction = <T extends QueryResultRow>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[],
+	name?: string
+) => Promise<QueryResult<T>>
+
+let queryFn: QueryFunction
 
 const pool = new pg.Pool({
 	max: 10, // default
-	connectionString: DATABASE_URL,
-	ssl: {
-		// If your postgresql.conf does not have `ssl = on`, remove the entire ssl property or you will get an error
-		rejectUnauthorized: false
-	}
+	idleTimeoutMillis: 10000,
+	connectionTimeoutMillis: 5000,
+	connectionString: env.DATABASE_URL,
+	ssl: env.DATABASE_SSL === 'true' ? { rejectUnauthorized: false } : false
 })
 
-type PostgresQueryResult = (sql: string, params?: any[]) => Promise<QueryResult<any>>
-export const query: PostgresQueryResult = (sql, params?) => pool.query(sql, params)
+pool.on('error', (err: Error) => {
+	console.error('Unexpected error on idle client', err)
+})
+
+queryFn = <T extends QueryResultRow>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[],
+	name?: string
+) => pool.query<T>(name ? { name, text: sql, values: params } : { text: sql, values: params })
+
+/**
+ * Executes a parameterized SQL query against the PostgreSQL database.
+ *
+ * @template T - The expected shape of rows returned by the query. Must extend QueryResultRow.
+ * @param sql - The SQL query string. Use $1, $2, etc. for parameterized queries.
+ * @param params - Optional array of parameter values to bind to the query placeholders.
+ * @returns A Promise resolving to a PostgreSQL QueryResult containing typed rows and metadata.
+ * @throws {Error} If the database connection fails or the query is invalid.
+ *
+ * @example
+ * ```typescript
+ * // Simple query without parameters
+ * const result = await query('SELECT * FROM users');
+ * console.log(result.rows);
+ *
+ * // Parameterized query with type safety
+ * const result = await query<User>('SELECT * FROM users WHERE id = $1', [userId]);
+ * console.log(result.rows[0].name); // TypeScript knows this is a User
+ *
+ * // Insert with multiple parameters
+ * await query(
+ *   'INSERT INTO products (name, price) VALUES ($1, $2)',
+ *   ['Widget', 29.99]
+ * );
+ * ```
+ */
+export const query = <T extends QueryResultRow = any>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[],
+	name?: string
+): Promise<QueryResult<T>> => queryFn<T>(sql, params, name)

package/src/lib/server/sendgrid.ts

@@ -4,14 +4,10 @@ import { env } from '$env/dynamic/private'
 
 export const sendMessage = async (message: Partial<MailDataRequired>) => {
 	const { SENDGRID_SENDER, SENDGRID_KEY } = env
-	try {
-		sgMail.setApiKey(SENDGRID_KEY)
-		const completeMessage = <MailDataRequired>{
-			from: SENDGRID_SENDER, // default sender can be altered
-			...message
-		}
-		await sgMail.send(completeMessage)
-	} catch (errSendingMail) {
-		console.error(errSendingMail)
+	sgMail.setApiKey(SENDGRID_KEY)
+	const completeMessage = <MailDataRequired>{
+		from: SENDGRID_SENDER, // default sender can be altered
+		...message
 	}
+	await sgMail.send(completeMessage)
 }

package/src/routes/+error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 </script>
 
-<h1>{$page.status}</h1>
-<h4>{$page.error?.message}</h4>
+<h1>{page.status}</h1>
+<h4>{page.error?.message}</h4>

package/src/routes/+layout.svelte

@@ -2,10 +2,10 @@
 	import { onMount } from 'svelte'
 	import type { LayoutServerData } from './$types'
 	import { goto, beforeNavigate } from '$app/navigation'
-	import { loginSession, toast } from '../stores'
+	import { appState } from '$lib/app-state.svelte'
 	import { initializeGoogleAccounts } from '$lib/google'
 
-	import 'bootstrap/scss/bootstrap.scss' // preferred way to load Bootstrap SCSS for hot module reloading
+	import './layout.css'
 
 	interface Props {
 		data: LayoutServerData
@@ -14,167 +14,133 @@
 
 	let { data, children }: Props = $props()
 
-	// If returning from different website, runs once (as it's an SPA) to restore user session if session cookie is still valid
-	const { user } = data
-	$loginSession = user
+	$effect(() => {
+		appState.user = data.user
+	})
 
-	let Toast: any
+	let navOpen = $state(false)
+	let dropdownOpen = $state(false)
+	let dropdownEl: HTMLDivElement | undefined = $state()
 
-	beforeNavigate(() => {
-		let expirationDate = $loginSession?.expires ? new Date($loginSession.expires) : undefined
+	function handleWindowClick(e: MouseEvent) {
+		if (dropdownOpen && dropdownEl && !dropdownEl.contains(e.target as Node)) {
+			dropdownOpen = false
+		}
+	}
 
+	beforeNavigate(() => {
+		navOpen = false
+		dropdownOpen = false
+		const expirationDate = appState.user?.expires ? new Date(appState.user.expires) : undefined
 		if (expirationDate && expirationDate < new Date()) {
 			console.log('Login session expired.')
-			$loginSession = null
+			appState.user = undefined
 		}
 	})
 
-	onMount(async () => {
+	onMount(() => {
 		initializeGoogleAccounts()
-
-		await import('bootstrap/js/dist/collapse') // lots of ways to load Bootstrap but prefer this approach to avoid SSR issues
-		await import('bootstrap/js/dist/dropdown')
-		Toast = (await import('bootstrap/js/dist/toast')).default
-
-		if (!$loginSession) google.accounts.id.prompt()
+		if (!appState.user) google.accounts.id.prompt()
 	})
 
 	async function logout(event: MouseEvent) {
 		event.preventDefault()
-		// Request server delete httpOnly cookie called loginSession
-		const url = '/auth/logout'
-		const res = await fetch(url, {
-			method: 'POST'
-		})
+		const res = await fetch('/auth/logout', { method: 'POST' })
 		if (res.ok) {
-			loginSession.set(undefined) // delete loginSession.user from
+			appState.user = undefined
 			goto('/login')
 		} else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
 	}
+</script>
 
-	const openToast = (open: boolean) => {
-		if (open) {
-			const toastDiv = document.getElementById('authToast') as HTMLDivElement
-			const t = new Toast(toastDiv)
-			t.show()
-		}
-	}
+<svelte:window onclick={handleWindowClick} />
 
-	$effect(() => {
-		openToast($toast.isOpen)
-	})
-</script>
+<nav class="tw:bg-gray-100 tw:border-b tw:border-gray-200">
+	<div class="tw:mx-auto tw:max-w-5xl tw:px-4 tw:flex tw:items-center tw:justify-between tw:h-14">
+		<a class="tw:font-semibold tw:text-gray-800 tw:no-underline" href="/">SvelteKit-Auth-Example</a>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-	<div class="container">
-		<a class="navbar-brand" href="/">SvelteKit-Auth-Example</a>
+		<!-- Mobile toggle -->
 		<button
-			class="navbar-toggler"
-			type="button"
-			data-bs-toggle="collapse"
-			data-bs-target="#navbarMain"
-			aria-controls="navbarMain"
-			aria-expanded="false"
+			class="tw:sm:hidden tw:p-2 tw:rounded tw:text-gray-600 hover:tw:bg-gray-200"
 			aria-label="Toggle navigation"
+			onclick={() => (navOpen = !navOpen)}
 		>
-			<span class="navbar-toggler-icon"></span>
+			<svg xmlns="http://www.w3.org/2000/svg" class="tw:h-5 tw:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+			</svg>
 		</button>
-		<div class="collapse navbar-collapse" id="navbarMain">
-			<ul class="navbar-nav me-5">
-				<li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
-				<li class="nav-item"><a class="nav-link" href="/info">Info</a></li>
-
-				{#if $loginSession}
-					{#if $loginSession.role == 'admin'}
-						<li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
-					{/if}
-					{#if $loginSession.role != 'student'}
-						<li class="nav-item"><a class="nav-link" href="/teachers">Teachers</a></li>
-					{/if}
-				{/if}
-			</ul>
-			<ul class="navbar-nav">
-				{#if $loginSession}
-					<li class="nav-item dropdown">
-						<a
-							class="nav-link dropdown-toggle"
-							href={'#'}
-							role="button"
-							data-bs-toggle="dropdown"
-							aria-expanded="false"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								fill="currentColor"
-								class="avatar"
-								viewBox="0 0 16 16"
-							>
-								<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
-								<path
-									fill-rule="evenodd"
-									d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
-								/>
-							</svg>
-							{$loginSession.firstName}
-						</a>
-						<ul class="dropdown-menu">
-							<li>
-								<a class="dropdown-item" href="/profile">Profile</a>
-							</li>
+
+		<!-- Nav links -->
+		<div class="tw:hidden tw:sm:flex tw:items-center tw:gap-6 {navOpen ? '!tw:flex tw:flex-col tw:absolute tw:top-14 tw:left-0 tw:right-0 tw:bg-gray-100 tw:p-4 tw:border-b tw:border-gray-200' : ''}">
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/">Home</a>
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/info">Info</a>
+
+			{#if appState.user?.role === 'admin'}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/admin">Admin</a>
+			{/if}
+			{#if appState.user && appState.user.role !== 'student'}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/teachers">Teachers</a>
+			{/if}
+
+			{#if appState.user}
+				<!-- User dropdown -->
+				<div class="tw:relative" bind:this={dropdownEl}>
+					<button
+						class="tw:flex tw:items-center tw:gap-1 tw:text-sm tw:text-gray-700 hover:tw:text-gray-900 tw:bg-transparent tw:border-0 tw:cursor-pointer"
+						onclick={() => (dropdownOpen = !dropdownOpen)}
+						aria-expanded={dropdownOpen}
+						aria-haspopup="true"
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="tw:relative tw:top-[-1.5px]">
+							<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
+							<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
+						</svg>
+						{appState.user?.firstName}
+						<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+						</svg>
+					</button>
+					{#if dropdownOpen}
+					<ul class="tw:absolute tw:right-0 tw:mt-1 tw:w-36 tw:rounded tw:border tw:border-gray-200 tw:bg-white tw:shadow-md tw:py-1 tw:z-50 tw:list-none">
+							<li><a class="tw:block tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:bg-gray-100" href="/profile">Profile</a></li>
+							{#if appState.user?.id !== 0}
 							<li>
-								<a
+								<button
 									onclick={logout}
-									class="dropdown-item"
-									class:d-none={!$loginSession || $loginSession.id === 0}
-									href={'#'}>Logout</a
-								>
+									class="tw:block tw:w-full tw:text-left tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:bg-transparent tw:border-0 tw:cursor-pointer hover:tw:bg-gray-100"
+								>Logout</button>
 							</li>
+							{/if}
 						</ul>
-					</li>
-				{:else}
-					<li class="nav-item">
-						<a class="nav-link" href="/login">Login</a>
-					</li>
-				{/if}
-			</ul>
+					{/if}
+				</div>
+			{:else}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/login">Login</a>
+			{/if}
 		</div>
 	</div>
 </nav>
 
-<main class="container">
+<main class="tw:mx-auto tw:max-w-5xl tw:px-4 tw:py-6">
 	{@render children?.()}
+</main>
 
+<!-- Toast notification -->
+{#if appState.toast.isOpen}
 	<div
-		id="authToast"
-		class="toast position-fixed top-0 end-0 m-3"
 		role="alert"
 		aria-live="assertive"
 		aria-atomic="true"
+		class="tw:fixed tw:top-4 tw:right-4 tw:z-50 tw:min-w-64 tw:rounded tw:shadow-lg tw:border tw:border-gray-200 tw:bg-white tw:overflow-hidden"
 	>
-		<div class="toast-header bg-primary text-white">
-			<strong class="me-auto">{$toast.title}</strong>
-			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-		</div>
-		<div class="toast-body">
-			{$toast.body}
+		<div class="tw:flex tw:items-center tw:justify-between tw:bg-blue-600 tw:px-4 tw:py-2">
+			<strong class="tw:text-white tw:text-sm">{appState.toast.title}</strong>
+			<button
+				type="button"
+				aria-label="Close"
+				class="tw:text-white tw:bg-transparent tw:border-0 tw:cursor-pointer tw:text-lg tw:leading-none"
+				onclick={() => (appState.toast = { ...appState.toast, isOpen: false })}>&times;</button>
 		</div>
+		<div class="tw:px-4 tw:py-3 tw:text-sm">{appState.toast.body}</div>
 	</div>
-</main>
-
-<style global>
-	* {
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-
-	.toast {
-		z-index: 9999;
-	}
-
-	.avatar {
-		position: relative;
-		top: -1.5px;
-	}
-</style>
+{/if}

package/src/routes/api/v1/user/+server.ts

@@ -18,3 +18,19 @@ export const PUT: RequestHandler = async event => {
 		message: 'Successfully updated user profile.'
 	})
 }
+
+export const DELETE: RequestHandler = async event => {
+	const { user } = event.locals
+
+	if (!user) error(401, 'Unauthorized')
+
+	try {
+		// Deleting the user cascades to sessions via ON DELETE CASCADE
+		await query(`CALL delete_user($1);`, [user.id])
+	} catch {
+		error(503, 'Could not communicate with database.')
+	}
+
+	event.cookies.delete('session', { path: '/' })
+	return json({ message: 'Account successfully deleted.' })
+}

package/src/routes/auth/[slug]/+server.ts

@@ -1,59 +1,8 @@
-import { error, json } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
-import { query } from '$lib/server/db'
 
-export const POST: RequestHandler = async event => {
-	const { cookies } = event
-	const { slug } = event.params
-
-	let result
-	let sql
-
-	try {
-		switch (slug) {
-			case 'logout':
-				if (event.locals.user) {
-					// else they are logged out / session ended
-					sql = `CALL delete_session($1);`
-					result = await query(sql, [event.locals.user.id])
-				}
-				cookies.delete('session', { path: '/' })
-				return json({ message: 'Logout successful.' })
-
-			case 'login':
-				sql = `SELECT authenticate($1) AS "authenticationResult";`
-				break
-			case 'register':
-				sql = `SELECT register($1) AS "authenticationResult";`
-				break
-			default:
-				error(404, 'Invalid endpoint.')
-		}
-
-		// Only /auth/login and /auth/register at this point
-		const body = await event.request.json()
-
-		// While client checks for these to be non-null, register() in the database does not
-		if (slug == 'register' && (!body.email || !body.password || !body.firstName || !body.lastName))
-			error(400, 'Please supply all required fields: email, password, first and last name.')
-
-		result = await query(sql, [JSON.stringify(body)])
-	} catch (err) {
-		error(503, 'Could not communicate with database.')
-	}
-
-	const { authenticationResult }: { authenticationResult: AuthenticationResult } = result.rows[0]
-
-	if (!authenticationResult.user)
-		// includes when a user tries to register an existing email account with wrong password
-		error(authenticationResult.statusCode, authenticationResult.status)
-
-	// Ensures hooks.server.ts:handle() will not delete session cookie
-	event.locals.user = authenticationResult.user
-	cookies.set('session', authenticationResult.sessionId, {
-		httpOnly: true,
-		sameSite: 'lax',
-		path: '/'
-	})
-	return json({ message: authenticationResult.status, user: authenticationResult.user })
+// Specific auth routes (login, register, logout) have their own +server.ts files
+// and take precedence over this dynamic segment. Any unrecognized path falls here.
+export const POST: RequestHandler = async () => {
+	error(404, 'Invalid endpoint.')
 }

package/src/routes/auth/forgot/+server.ts

@@ -30,7 +30,12 @@ export const POST: RequestHandler = async event => {
         new password with a confirmation then redirect you to your login page.
       `
 		}
-		sendMessage(message)
+		try {
+			await sendMessage(message)
+		} catch (err) {
+			console.error('Failed to send password reset email:', err)
+			// Still return 204 to avoid leaking whether the email exists in our system
+		}
 	}
 
 	return new Response(undefined, { status: 204 })

package/src/routes/auth/google/+server.ts

@@ -52,7 +52,7 @@ export const POST: RequestHandler = async event => {
 		// Prevent hooks.server.ts's handler() from deleting cookie thinking no one has authenticated
 		event.locals.user = userSession.user
 
-		cookies.set('session', userSession.id, { httpOnly: true, sameSite: 'lax', path: '/' })
+		cookies.set('session', userSession.id, { httpOnly: true, sameSite: 'lax', secure: true, path: '/' })
 		return json({ message: 'Successful Google Sign-In.', user: userSession.user })
 	} catch (err) {
 		let message = ''

package/src/routes/auth/login/+server.ts

@@ -0,0 +1,68 @@
+import { error, json } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import { query } from '$lib/server/db'
+
+// In-memory failed-attempt tracker for account lockout (per email)
+// For production use a shared store like Redis.
+const failedAttempts = new Map<string, { count: number; lockedUntil: number }>()
+
+const MAX_FAILURES = 5
+const LOCKOUT_MS = 15 * 60 * 1000 // 15 minutes
+
+export const POST: RequestHandler = async event => {
+	const { cookies } = event
+
+	let body: { email?: string; password?: string }
+	try {
+		body = await event.request.json()
+	} catch {
+		error(400, 'Invalid request body.')
+	}
+
+	const email = body.email?.toLowerCase() ?? ''
+
+	// Check per-email account lockout
+	const attempts = failedAttempts.get(email)
+	if (attempts && Date.now() < attempts.lockedUntil) {
+		error(429, 'Account temporarily locked due to too many failed attempts. Try again later.')
+	}
+
+	let result
+	try {
+		const sql = `SELECT authenticate($1) AS "authenticationResult";`
+		result = await query(sql, [JSON.stringify(body)])
+	} catch {
+		error(503, 'Could not communicate with database.')
+	}
+
+	const { authenticationResult }: { authenticationResult: AuthenticationResult } = result.rows[0]
+
+	if (!authenticationResult.user) {
+		// Track failed attempt for lockout
+		if (email) {
+			const existing = failedAttempts.get(email)
+			if (existing) {
+				existing.count++
+				if (existing.count >= MAX_FAILURES) {
+					existing.lockedUntil = Date.now() + LOCKOUT_MS
+					existing.count = 0
+				}
+			} else {
+				failedAttempts.set(email, { count: 1, lockedUntil: 0 })
+			}
+		}
+		error(authenticationResult.statusCode, authenticationResult.status)
+	}
+
+	// Clear lockout tracker on successful login
+	failedAttempts.delete(email)
+
+	event.locals.user = authenticationResult.user
+	cookies.set('session', authenticationResult.sessionId, {
+		httpOnly: true,
+		sameSite: 'lax',
+		secure: true,
+		path: '/'
+	})
+	return json({ message: authenticationResult.status, user: authenticationResult.user })
+}

package/src/routes/auth/logout/+server.ts

@@ -0,0 +1,19 @@
+import { json } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import { query } from '$lib/server/db'
+
+export const POST: RequestHandler = async event => {
+	const { cookies } = event
+
+	if (event.locals.user) {
+		try {
+			await query(`CALL delete_session($1);`, [event.locals.user.id])
+		} catch (err) {
+			console.error('Failed to delete session from database:', err)
+			// Best effort — still clear the cookie below
+		}
+	}
+
+	cookies.delete('session', { path: '/' })
+	return json({ message: 'Logout successful.' })
+}