sveltekit-auth-example 5.1.3 → 5.6.0

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

@@ -1,10 +1,9 @@
 import type { Secret } from 'jsonwebtoken'
-import type { MailDataRequired } from '@sendgrid/mail'
 import type { RequestHandler } from './$types'
 import jwt from 'jsonwebtoken'
-import { JWT_SECRET, DOMAIN, SENDGRID_SENDER } from '$env/static/private'
+import { JWT_SECRET } from '$env/static/private'
 import { query } from '$lib/server/db'
-import { sendMessage } from '$lib/server/sendgrid'
+import { sendPasswordResetEmail } from '$lib/server/email'
 
 export const POST: RequestHandler = async event => {
 	const body = await event.request.json()
@@ -12,26 +11,13 @@ export const POST: RequestHandler = async event => {
 	const { rows } = await query(sql, [body.email])
 
 	if (rows.length > 0) {
-		const { userId } = rows[0]
-		// Create JWT with userId expiring in 30 mins
-		const secret = JWT_SECRET
-		const token = jwt.sign({ subject: userId, purpose: 'reset-password' }, <Secret>secret, {
-			expiresIn: '30m'
-		})
-
-		// Email URL with token to user
-		const message: MailDataRequired = {
-			to: { email: body.email },
-			from: SENDGRID_SENDER,
-			subject: 'Password reset',
-			categories: ['account'],
-			html: `
-        <a href="${DOMAIN}/auth/reset/${token}">Reset my password</a>. Your browser will open and ask you to provide a
-        new password with a confirmation then redirect you to your login page.
-      `
-		}
+		const token = jwt.sign(
+			{ subject: rows[0].userId, purpose: 'reset-password' },
+			JWT_SECRET as Secret,
+			{ expiresIn: '30m' }
+		)
 		try {
-			await sendMessage(message)
+			await sendPasswordResetEmail(body.email, token)
 		} catch (err) {
 			console.error('Failed to send password reset email:', err)
 			// Still return 204 to avoid leaking whether the email exists in our system

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

@@ -52,7 +52,12 @@ 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', secure: true, path: '/' })
+		cookies.set('session', userSession.id, {
+			httpOnly: true,
+			sameSite: 'lax',
+			secure: true,
+			path: '/'
+		})
 		return json({ message: 'Successful Google Sign-In.', user: userSession.user })
 	} catch {
 		error(401, 'Google authentication failed.')

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

@@ -1,6 +1,10 @@
 import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
+import type { Secret } from 'jsonwebtoken'
+import jwt from 'jsonwebtoken'
+import { JWT_SECRET } from '$env/static/private'
 import { query } from '$lib/server/db'
+import { sendMfaCodeEmail } from '$lib/server/email'
 
 // In-memory failed-attempt tracker for account lockout (per email)
 // For production use a shared store like Redis.
@@ -8,6 +12,7 @@ const failedAttempts = new Map<string, { count: number; lockedUntil: number }>()
 
 const MAX_FAILURES = 5
 const LOCKOUT_MS = 15 * 60 * 1000 // 15 minutes
+const MFA_TRUSTED_COOKIE = 'mfa_trusted'
 
 export const POST: RequestHandler = async event => {
 	const { cookies } = event
@@ -57,12 +62,40 @@ export const POST: RequestHandler = async event => {
 	// 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 })
+	const userId = authenticationResult.user.id!
+
+	// Check if this device is already MFA-trusted for this user
+	const trustedToken = cookies.get(MFA_TRUSTED_COOKIE)
+	if (trustedToken) {
+		try {
+			const payload = jwt.verify(trustedToken, JWT_SECRET as Secret) as {
+				userId: number
+				purpose: string
+			}
+			if (payload.purpose === 'mfa-trusted' && payload.userId === userId) {
+				// Trusted device — skip MFA and complete login
+				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 })
+			}
+		} catch {
+			// Invalid or expired trusted token — fall through to MFA
+			cookies.delete(MFA_TRUSTED_COOKIE, { path: '/' })
+		}
+	}
+
+	// MFA required — delete the pre-created session until code is verified
+	await query(`CALL delete_session($1);`, [userId])
+
+	// Generate and email the MFA code
+	const codeResult = await query(`SELECT create_mfa_code($1) AS code;`, [userId])
+	const code: string = codeResult.rows[0].code
+	await sendMfaCodeEmail(email, code)
+
+	return json({ mfaRequired: true })
 }

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

@@ -0,0 +1,60 @@
+import { error, json } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import type { Secret } from 'jsonwebtoken'
+import jwt from 'jsonwebtoken'
+import { JWT_SECRET } from '$env/static/private'
+import { query } from '$lib/server/db'
+
+const MFA_TRUSTED_COOKIE = 'mfa_trusted'
+const MFA_TRUSTED_MAX_AGE = 30 * 24 * 60 * 60 // 30 days in seconds
+
+export const POST: RequestHandler = async event => {
+	const { cookies } = event
+
+	let body: { email?: string; code?: string }
+	try {
+		body = await event.request.json()
+	} catch {
+		error(400, 'Invalid request body.')
+	}
+
+	if (!body.email || !body.code) error(400, 'Email and verification code are required.')
+
+	// Verify the code; returns user_id on success, NULL on failure/expiry
+	const verifyResult = await query(`SELECT verify_mfa_code($1, $2) AS "userId";`, [
+		body.email.toLowerCase(),
+		body.code
+	])
+
+	const userId: number | null = verifyResult.rows[0]?.userId
+	if (!userId) error(401, 'Invalid or expired verification code.')
+
+	// Create a new session now that MFA is verified
+	const sessionResult = await query(`SELECT create_session($1) AS "sessionId";`, [userId])
+	const sessionId: string = sessionResult.rows[0].sessionId
+
+	// Load the full user object for the response
+	const userResult = await query(`SELECT get_session($1::uuid);`, [sessionId])
+	const user = userResult.rows[0]?.get_session
+
+	cookies.set('session', sessionId, {
+		httpOnly: true,
+		sameSite: 'lax',
+		secure: true,
+		path: '/'
+	})
+
+	// Issue a 30-day trusted-device cookie so MFA is not required again on this device
+	const trustedToken = jwt.sign({ userId, purpose: 'mfa-trusted' }, JWT_SECRET as Secret, {
+		expiresIn: '30d'
+	})
+	cookies.set(MFA_TRUSTED_COOKIE, trustedToken, {
+		httpOnly: true,
+		sameSite: 'lax',
+		secure: true,
+		path: '/',
+		maxAge: MFA_TRUSTED_MAX_AGE
+	})
+
+	return json({ message: 'Login successful.', user })
+}

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

@@ -1,10 +1,9 @@
 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 { JWT_SECRET } from '$env/static/private'
 import { query } from '$lib/server/db'
-import { sendMessage } from '$lib/server/sendgrid'
+import { sendVerificationEmail } from '$lib/server/email'
 
 export const POST: RequestHandler = async event => {
 	let body: { email?: string; password?: string; firstName?: string; lastName?: string }
@@ -19,7 +18,10 @@ export const POST: RequestHandler = async event => {
 
 	const passwordPattern = /(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}/
 	if (!passwordPattern.test(body.password))
-		error(400, 'Password must be at least 8 characters and include an uppercase letter, a number, and a special character.')
+		error(
+			400,
+			'Password must be at least 8 characters and include an uppercase letter, a number, and a special character.'
+		)
 
 	let result
 	try {
@@ -47,19 +49,7 @@ export const POST: RequestHandler = async event => {
 		{ 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)
+	await sendVerificationEmail(body.email, token)
 
 	return json({
 		message: 'Registration successful. Please check your email to verify your account.',

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

@@ -90,7 +90,10 @@
 	novalidate
 	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
 	class:submitted
-	onsubmit={(e) => { e.preventDefault(); resetPassword() }}
+	onsubmit={e => {
+		e.preventDefault()
+		resetPassword()
+	}}
 >
 	<h4>New Password</h4>
 	<p>Please provide a new password.</p>
@@ -130,7 +133,7 @@
 			autocomplete="new-password"
 		/>
 		{#if passwordMismatch}
-			<span class="tw:text-xs tw:text-red-600 tw:mt-0.5">Passwords must match</span>
+			<span class="tw:mt-0.5 tw:text-xs tw:text-red-600">Passwords must match</span>
 		{/if}
 	</label>
 
@@ -138,12 +141,7 @@
 		<p class="tw:text-red-600">{message}</p>
 	{/if}
 
-	<button
-		type="submit"
-		class="btn-primary"
-		disabled={loading}
-	>
+	<button type="submit" class="btn-primary" disabled={loading}>
 		{loading ? 'Resetting...' : 'Reset Password'}
 	</button>
 </form>
-

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

@@ -62,7 +62,10 @@
 	novalidate
 	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
 	class:submitted
-	onsubmit={(e) => { e.preventDefault(); sendPasswordReset() }}
+	onsubmit={e => {
+		e.preventDefault()
+		sendPasswordReset()
+	}}
 >
 	<h4>Forgot password</h4>
 	<p>Hey, you're human. We get it.</p>
@@ -86,13 +89,7 @@
 		<p class="tw:text-red-600">{message}</p>
 	{/if}
 
-	<button
-		type="submit"
-		class="btn-primary"
-		disabled={loading}
-	>
+	<button type="submit" class="btn-primary" disabled={loading}>
 		{loading ? 'Sending...' : 'Send Email'}
 	</button>
 </form>
-
-

package/src/routes/layout.css

@@ -12,9 +12,9 @@
 
 	html,
 	:host {
-		@apply tw:font-sans tw:text-gray-800 tw:bg-white;
+		@apply tw:bg-white tw:font-sans tw:text-gray-800;
 		@variant dark {
-			@apply tw:text-gray-100 tw:bg-gray-900;
+			@apply tw:bg-gray-900 tw:text-gray-100;
 		}
 	}
 }
@@ -27,7 +27,7 @@
 		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;
+		@apply tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:text-gray-900 tw:dark:border-gray-600 tw:dark:bg-gray-800 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);

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

@@ -7,9 +7,13 @@
 
 	let focusedField: HTMLInputElement | undefined = $state()
 	let formEl: HTMLFormElement | undefined = $state()
+	let mfaFormEl: HTMLFormElement | undefined = $state()
 	let message = $state('')
 	let submitted = $state(false)
+	let mfaSubmitted = $state(false)
 	let loading = $state(false)
+	let mfaRequired = $state(false)
+	let mfaCode = $state('')
 	const credentials: Credentials = $state({
 		email: '',
 		password: ''
@@ -52,6 +56,46 @@
 				}
 			})
 			const fromEndpoint = await res.json()
+			if (res.ok) {
+				if (fromEndpoint.mfaRequired) {
+					mfaRequired = true
+					message = ''
+				} else {
+					appState.user = fromEndpoint.user
+					redirectAfterLogin(fromEndpoint.user)
+				}
+			} else {
+				throw new Error(fromEndpoint.message)
+			}
+		} catch (err) {
+			if (err instanceof Error) {
+				console.error('Login error', err)
+				message = err.message
+			}
+		} finally {
+			loading = false
+		}
+	}
+
+	async function verifyMfa() {
+		message = ''
+		mfaSubmitted = false
+		const form = mfaFormEl!
+
+		if (!form.checkValidity()) {
+			mfaSubmitted = true
+			focusOnFirstError(form)
+			return
+		}
+
+		loading = true
+		try {
+			const res = await fetch('/auth/mfa', {
+				method: 'POST',
+				body: JSON.stringify({ email: credentials.email, code: mfaCode }),
+				headers: { 'Content-Type': 'application/json' }
+			})
+			const fromEndpoint = await res.json()
 			if (res.ok) {
 				appState.user = fromEndpoint.user
 				redirectAfterLogin(fromEndpoint.user)
@@ -60,7 +104,7 @@
 			}
 		} catch (err) {
 			if (err instanceof Error) {
-				console.error('Login error', err)
+				console.error('MFA error', err)
 				message = err.message
 			}
 		} finally {
@@ -74,81 +118,163 @@
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<form
-	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(); login() }}
->
-	<h4>Sign In</h4>
-	<p>Welcome back.</p>
-
-	<div class="tw:group tw:relative tw:w-full">
-		<!-- Real Google button: invisible but receives clicks -->
-		<div id="googleButton" class="tw:opacity-0 tw:w-full"></div>
-		<!-- Visual overlay: looks good, no pointer events -->
-		<div class="tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center tw:gap-3 tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:group-hover:bg-gray-50 tw:text-sm tw:font-medium tw:text-gray-700 tw:dark:bg-gray-800 tw:dark:group-hover:bg-gray-700 tw:dark:border-gray-600 tw:dark:text-gray-200">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
-				<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
-				<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
-				<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
-				<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
-			</svg>
-			Sign in with Google
+{#if mfaRequired}
+	<form
+		bind:this={mfaFormEl}
+		novalidate
+		class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
+		class:submitted={mfaSubmitted}
+		onsubmit={e => {
+			e.preventDefault()
+			verifyMfa()
+		}}
+	>
+		<h4>Verification Required</h4>
+		<p>
+			We sent a 6-digit code to <strong>{credentials.email}</strong>. Enter it below to complete
+			sign in.
+		</p>
+
+		<label class="tw:block tw:text-sm tw:font-medium" for="mfaCode">
+			Verification Code
+			<input
+				id="mfaCode"
+				type="text"
+				inputmode="numeric"
+				pattern="[0-9]{6}"
+				class="form-input-validated"
+				bind:value={mfaCode}
+				required
+				minlength="6"
+				maxlength="6"
+				placeholder="000000"
+				autocomplete="one-time-code"
+			/>
+			<span class="form-error">6-digit verification code required</span>
+		</label>
+
+		{#if message}
+			<p class="tw:text-red-600">{message}</p>
+		{/if}
+
+		<button type="submit" class="btn-primary" disabled={loading}>
+			{loading ? 'Verifying...' : 'Verify'}
+		</button>
+
+		<p class="tw:text-center tw:text-sm">
+			<button
+				type="button"
+				class="tw:text-gray-500 tw:underline"
+				onclick={() => {
+					mfaRequired = false
+					mfaCode = ''
+					message = ''
+				}}
+			>
+				Back to sign in
+			</button>
+		</p>
+	</form>
+{:else}
+	<form
+		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()
+			login()
+		}}
+	>
+		<h4>Sign In</h4>
+		<p>Welcome back.</p>
+
+		<div class="tw:group tw:relative tw:w-full">
+			<!-- Real Google button: invisible but receives clicks -->
+			<div id="googleButton" class="tw:w-full tw:opacity-0"></div>
+			<!-- Visual overlay: looks good, no pointer events -->
+			<div
+				class="tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center tw:gap-3 tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:text-sm tw:font-medium tw:text-gray-700 tw:group-hover:bg-gray-50 tw:dark:border-gray-600 tw:dark:bg-gray-800 tw:dark:text-gray-200 tw:dark:group-hover:bg-gray-700"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					width="18"
+					height="18"
+					aria-hidden="true"
+				>
+					<path
+						d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+						fill="#4285F4"
+					/>
+					<path
+						d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+						fill="#34A853"
+					/>
+					<path
+						d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+						fill="#FBBC05"
+					/>
+					<path
+						d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+						fill="#EA4335"
+					/>
+				</svg>
+				Sign in with Google
+			</div>
 		</div>
-	</div>
-
-	<div class="tw:flex tw:items-center tw:gap-2 tw:text-gray-400 tw:text-sm">
-		<span class="tw:flex-1 tw:border-t tw:border-gray-300"></span>
-		<span>or</span>
-		<span class="tw:flex-1 tw:border-t tw:border-gray-300"></span>
-	</div>
-
-	<label class="tw:block tw:text-sm tw:font-medium" for="email">
-		Email
-		<input
-			id="email"
-			type="email"
-			class="form-input-validated"
-			bind:this={focusedField}
-			bind:value={credentials.email}
-			required
-			placeholder="Email"
-			autocomplete="email"
-		/>
-		<span class="form-error">Email address required</span>
-	</label>
-
-	<div class="tw:block tw:text-sm tw:font-medium">
-		<div class="tw:flex tw:justify-between tw:items-baseline">
-			<label for="password">Password</label>
-			<a href="/forgot" class="tw:text-xs tw:text-gray-500 tw:font-normal">Forgot password?</a>
+
+		<div class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:text-gray-400">
+			<span class="tw:flex-1 tw:border-t tw:border-gray-300"></span>
+			<span>or</span>
+			<span class="tw:flex-1 tw:border-t tw:border-gray-300"></span>
 		</div>
-		<input
-			id="password"
-			class="form-input-validated"
-			type="password"
-			bind:value={credentials.password}
-			required
-			minlength="8"
-			maxlength="80"
-			placeholder="Password"
-			autocomplete="current-password"
-		/>
-		<span class="form-error">Password with 8 chars or more required</span>
-	</div>
-
-	{#if message}
-		<p class="tw:text-red-600">{message}</p>
-	{/if}
-
-	<button type="submit" class="btn-primary" disabled={loading}>
-		{loading ? 'Signing in...' : 'Sign In'}
-	</button>
-
-	<p class="tw:text-center tw:text-sm">
-		<a href="/register" class="tw:text-gray-500">Don't have an account?</a>
-	</p>
-</form>
+
+		<label class="tw:block tw:text-sm tw:font-medium" for="email">
+			Email
+			<input
+				id="email"
+				type="email"
+				class="form-input-validated"
+				bind:this={focusedField}
+				bind:value={credentials.email}
+				required
+				placeholder="Email"
+				autocomplete="email"
+			/>
+			<span class="form-error">Email address required</span>
+		</label>
+
+		<div class="tw:block tw:text-sm tw:font-medium">
+			<div class="tw:flex tw:items-baseline tw:justify-between">
+				<label for="password">Password</label>
+				<a href="/forgot" class="tw:text-xs tw:font-normal tw:text-gray-500">Forgot password?</a>
+			</div>
+			<input
+				id="password"
+				class="form-input-validated"
+				type="password"
+				bind:value={credentials.password}
+				required
+				minlength="8"
+				maxlength="80"
+				placeholder="Password"
+				autocomplete="current-password"
+			/>
+			<span class="form-error">Password with 8 chars or more required</span>
+		</div>
+
+		{#if message}
+			<p class="tw:text-red-600">{message}</p>
+		{/if}
+
+		<button type="submit" class="btn-primary" disabled={loading}>
+			{loading ? 'Signing in...' : 'Sign In'}
+		</button>
+
+		<p class="tw:text-center tw:text-sm">
+			<a href="/register" class="tw:text-gray-500">Don't have an account?</a>
+		</p>
+	</form>
+{/if}