sveltekit-auth-example 5.1.0 → 5.1.2

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.' })
+}

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

@@ -0,0 +1,64 @@
+import { error, json } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import type { MailDataRequired } from '@sendgrid/mail'
+import jwt from 'jsonwebtoken'
+import { JWT_SECRET, DOMAIN, SENDGRID_SENDER } from '$env/static/private'
+import { query } from '$lib/server/db'
+import { sendMessage } from '$lib/server/sendgrid'
+
+export const POST: RequestHandler = async event => {
+	let body: { email?: string; password?: string; firstName?: string; lastName?: string }
+	try {
+		body = await event.request.json()
+	} catch {
+		error(400, 'Invalid request body.')
+	}
+
+	if (!body.email || !body.password || !body.firstName || !body.lastName)
+		error(400, 'Please supply all required fields: email, password, first and last name.')
+
+	let result
+	try {
+		const sql = `SELECT register($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)
+		error(authenticationResult.statusCode, authenticationResult.status)
+
+	// The DB auto-creates a session, but the user must verify email before logging in. Clean it up.
+	try {
+		await query(`CALL delete_session($1);`, [authenticationResult.sessionId])
+	} catch (err) {
+		console.error('Failed to delete pre-verification session:', err)
+	}
+
+	const token = jwt.sign(
+		{ subject: authenticationResult.user.id, purpose: 'verify-email' },
+		JWT_SECRET as jwt.Secret,
+		{ expiresIn: '24h' }
+	)
+
+	const message: MailDataRequired = {
+		to: { email: body.email },
+		from: SENDGRID_SENDER,
+		subject: 'Verify your email address',
+		categories: ['account'],
+		html: `
+      <p>Thanks for registering! Please verify your email address by clicking the link below:</p>
+      <p><a href="${DOMAIN}/auth/verify/${token}">Verify my email address</a></p>
+      <p>This link expires in 24 hours. If you did not register, you can safely ignore this email.</p>
+    `
+	}
+
+	await sendMessage(message)
+
+	return json({
+		message: 'Registration successful. Please check your email to verify your account.',
+		emailVerification: true
+	})
+}

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

@@ -18,6 +18,13 @@ export const PUT: RequestHandler = async event => {
 		const sql = `CALL reset_password($1, $2);`
 		await query(sql, [userId, password])
 
+		// Invalidate all existing sessions so the old password can no longer be used
+		try {
+			await query(`CALL delete_session($1);`, [userId])
+		} catch (err) {
+			console.error('Failed to invalidate sessions after password reset:', err)
+		}
+
 		return json({
 			message: 'Password successfully reset.'
 		})

package/src/routes/auth/reset/[token]/+page.svelte

@@ -2,7 +2,7 @@
 	import type { PageData } from './$types'
 	import { onMount } from 'svelte'
 	import { goto } from '$app/navigation'
-	import { toast } from '../../../../stores'
+	import { appState } from '$lib/app-state.svelte'
 	import { focusOnFirstError } from '$lib/focus'
 
 	interface Props {
@@ -12,13 +12,17 @@
 	let { data }: Props = $props()
 
 	let focusedField: HTMLInputElement | undefined = $state()
+	let formEl: HTMLFormElement | undefined = $state()
 	let password = $state('')
 	let confirmPassword: HTMLInputElement | undefined = $state()
 	let message = $state('')
 	let submitted = $state(false)
 	let passwordMismatch = $state(false)
+	let loading = $state(false)
 
 	onMount(() => {
+		// Remove the token from the URL to prevent it appearing in logs and Referer headers
+		history.replaceState('', document.title, '/auth/reset')
 		focusedField?.focus()
 	})
 
@@ -31,7 +35,7 @@
 		message = ''
 		submitted = false
 		passwordMismatch = false
-		const form = document.getElementById('reset') as HTMLFormElement
+		const form = formEl!
 
 		if (!passwordMatch()) {
 			passwordMismatch = true
@@ -39,30 +43,35 @@
 		}
 
 		if (form.checkValidity()) {
-			const url = `/auth/reset`
-			const res = await fetch(url, {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({
-					token: data.token,
-					password
+			loading = true
+			try {
+				const url = `/auth/reset`
+				const res = await fetch(url, {
+					method: 'PUT',
+					headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+						token: data.token,
+						password
+					})
 				})
-			})
 
-			if (res.ok) {
-				$toast = {
-					title: 'Password Reset Succesful',
-					body: 'Your password was reset. Please login.',
-					isOpen: true
+				if (res.ok) {
+					appState.toast = {
+						title: 'Password Reset Successful',
+						body: 'Your password was reset. Please login.',
+						isOpen: true
+					}
+
+					goto('/login')
+				} else {
+					const body = await res.json()
+					console.log('Failed reset', body)
+					message = body.message
 				}
-
-				goto('/login')
-			} else {
-				const body = await res.json()
-				console.log('Failed reset', body)
-				message = body.message
+			} finally {
+				loading = false
 			}
 		} else {
 			submitted = true
@@ -76,19 +85,20 @@
 </svelte:head>
 
 <form
-	id="reset"
+	bind:this={formEl}
 	autocomplete="on"
 	novalidate
 	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
 	class:submitted
+	onsubmit={(e) => { e.preventDefault(); resetPassword() }}
 >
-	<h4><strong>New Password</strong></h4>
+	<h4>New Password</h4>
 	<p>Please provide a new password.</p>
 
 	<label class="tw:block tw:text-sm tw:font-medium" for="password">
 		Password
 		<input
-			class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			class="form-input-validated"
 			id="password"
 			type="password"
 			bind:value={password}
@@ -99,7 +109,7 @@
 			placeholder="Password"
 			autocomplete="new-password"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Password with 8 chars or more required</span>
+		<span class="form-error">Password with 8 chars or more required</span>
 		<span class="tw:text-xs tw:text-gray-500">
 			Minimum 8 characters, one capital letter, one number, one special character.
 		</span>
@@ -108,7 +118,7 @@
 	<label class="tw:block tw:text-sm tw:font-medium" for="passwordConfirm">
 		Password (retype)
 		<input
-			class="tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500"
+			class="form-input"
 			class:tw:border-red-500={passwordMismatch}
 			id="passwordConfirm"
 			type="password"
@@ -129,11 +139,11 @@
 	{/if}
 
 	<button
-		onclick={resetPassword}
-		type="button"
-		class="tw:w-full tw:rounded tw:bg-blue-600 tw:px-4 tw:py-2 tw:font-semibold tw:text-white hover:tw:bg-blue-700"
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
 	>
-		Reset Password
+		{loading ? 'Resetting...' : 'Reset Password'}
 	</button>
 </form>
 

package/src/routes/auth/verify/[token]/+server.ts

@@ -0,0 +1,48 @@
+import { redirect } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import type { JwtPayload } from 'jsonwebtoken'
+import jwt from 'jsonwebtoken'
+import { JWT_SECRET } from '$env/static/private'
+import { query } from '$lib/server/db'
+
+// Handles email verification links sent after registration
+export const GET: RequestHandler = async event => {
+	const { token } = event.params
+	const { cookies } = event
+
+	// Verify the JWT — extract userId only if token is valid and correct purpose
+	let userId: string | undefined
+	try {
+		const decoded = jwt.verify(token, JWT_SECRET as jwt.Secret) as JwtPayload
+		if (decoded.purpose === 'verify-email' && decoded.subject) {
+			userId = decoded.subject
+		}
+	} catch {
+		// Expired or tampered token — fall through to redirect below
+	}
+
+	if (!userId) redirect(302, '/login?error=invalid-token')
+
+	// Mark email as verified and create a session atomically
+	let sessionId: string | undefined
+	try {
+		const { rows } = await query<{ verify_email_and_create_session: string }>(
+			`SELECT verify_email_and_create_session($1)`,
+			[userId]
+		)
+		sessionId = rows[0]?.verify_email_and_create_session
+	} catch (err) {
+		console.error('Email verification DB error:', err)
+	}
+
+	if (!sessionId) redirect(302, '/login?error=verification-failed')
+
+	cookies.set('session', sessionId, {
+		httpOnly: true,
+		sameSite: 'lax',
+		secure: true,
+		path: '/'
+	})
+
+	redirect(302, '/')
+}

package/src/routes/forgot/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { goto } from '$app/navigation'
-	import { toast } from '../../stores'
+	import { appState } from '$lib/app-state.svelte'
 	import { focusOnFirstError } from '$lib/focus'
 
 	let focusedField: HTMLInputElement | undefined = $state()
+	let formEl: HTMLFormElement | undefined = $state()
 	let email: string = $state('')
 	let message: string = $state('')
 	let submitted = $state(false)
+	let loading = $state(false)
 
 	onMount(() => {
 		focusedField?.focus()
@@ -15,28 +17,33 @@
 
 	const sendPasswordReset = async () => {
 		message = ''
-		const form = document.getElementById('forgot') as HTMLFormElement
+		const form = formEl!
 
 		if (form.checkValidity()) {
 			if (email.toLowerCase().includes('gmail.com')) {
 				return (message = 'Gmail passwords must be reset on Manage Your Google Account.')
 			}
-			const url = `/auth/forgot`
-			const res = await fetch(url, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({ email })
-			})
+			loading = true
+			try {
+				const url = `/auth/forgot`
+				const res = await fetch(url, {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({ email })
+				})
 
-			if (res.ok) {
-				$toast = {
-					title: 'Password Reset',
-					body: 'Please check your inbox for a password reset email (junk mail, too).',
-					isOpen: true
+				if (res.ok) {
+					appState.toast = {
+						title: 'Password Reset',
+						body: 'Please check your inbox for a password reset email (junk mail, too).',
+						isOpen: true
+					}
+					return goto('/')
 				}
-				return goto('/')
+			} finally {
+				loading = false
 			}
 		} else {
 			submitted = true
@@ -50,13 +57,14 @@
 </svelte:head>
 
 <form
-	id="forgot"
+	bind:this={formEl}
 	autocomplete="on"
 	novalidate
 	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
 	class:submitted
+	onsubmit={(e) => { e.preventDefault(); sendPasswordReset() }}
 >
-	<h4><strong>Forgot password</strong></h4>
+	<h4>Forgot password</h4>
 	<p>Hey, you're human. We get it.</p>
 
 	<label class="tw:block tw:text-sm tw:font-medium" for="email">
@@ -66,12 +74,12 @@
 			bind:value={email}
 			type="email"
 			id="email"
-			class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			class="form-input-validated"
 			required
 			placeholder="Email"
 			autocomplete="email"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Email address required</span>
+		<span class="form-error">Email address required</span>
 	</label>
 
 	{#if message}
@@ -79,11 +87,11 @@
 	{/if}
 
 	<button
-		onclick={sendPasswordReset}
-		type="button"
-		class="tw:w-full tw:rounded tw:bg-blue-600 tw:px-4 tw:py-2 tw:font-semibold tw:text-white hover:tw:bg-blue-700"
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
 	>
-		Send Email
+		{loading ? 'Sending...' : 'Send Email'}
 	</button>
 </form>
 

package/src/routes/layout.css

@@ -12,6 +12,56 @@
 
 	html,
 	:host {
-		@apply tw:font-sans tw:text-gray-800;
+		@apply tw:font-sans tw:text-gray-800 tw:bg-white;
+		@variant dark {
+			@apply tw:text-gray-100 tw:bg-gray-900;
+		}
+	}
+}
+
+@layer components {
+	.form-input,
+	.form-input-validated {
+		display: block;
+		width: 100%;
+		margin-top: 0.25rem;
+		appearance: none;
+		-webkit-appearance: none;
+		@apply tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:text-gray-900 tw:dark:bg-gray-800 tw:dark:border-gray-600 tw:dark:text-gray-200;
+		padding: 0.375rem 0.75rem;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: var(--tw-leading-sm, 1.25rem);
+	}
+	.form-input:focus,
+	.form-input-validated:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--color-blue-500, #3b82f6);
+	}
+	/* peer class is applied at the HTML element level and cannot be set via CSS */
+	.submitted .form-input-validated:invalid {
+		border-color: var(--color-red-500, #ef4444);
+	}
+	.form-error {
+		display: none;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-red-600, #dc2626);
+		margin-top: 0.125rem;
+	}
+	.submitted .form-input-validated:invalid ~ .form-error {
+		display: block;
+	}
+	.btn-primary {
+		display: block;
+		width: 100%;
+		border-radius: var(--radius, 0.25rem);
+		background-color: var(--color-blue-600, #2563eb);
+		padding: 0.5rem 1rem;
+		font-weight: 600;
+		color: white;
+		border: none;
+		cursor: pointer;
+	}
+	.btn-primary:hover {
+		background-color: var(--color-blue-700, #1d4ed8);
 	}
 }

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

@@ -0,0 +1,9 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = ({ locals }) => {
+	if (locals.user) {
+		redirect(302, '/')
+	}
+	return {}
+}