sveltekit-auth-example 5.0.4 → 5.1.1

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,11 +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()
 	})
 
@@ -27,40 +33,48 @@
 
 	const resetPassword = async () => {
 		message = ''
-		const form = document.getElementById('reset') as HTMLFormElement
+		submitted = false
+		passwordMismatch = false
+		const form = formEl!
 
 		if (!passwordMatch()) {
-			confirmPassword?.classList.add('is-invalid')
+			passwordMismatch = true
+			return
 		}
 
 		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 {
-			form.classList.add('was-validated')
+			submitted = true
 			focusOnFirstError(form)
 		}
 	}
@@ -70,62 +84,66 @@
 	<title>New Password</title>
 </svelte:head>
 
-<div class="d-flex justify-content-center mt-5">
-	<div class="card login">
-		<div class="card-body">
-			<form id="reset" autocomplete="on" novalidate>
-				<h4><strong>New Password</strong></h4>
-				<p>Please provide a new password.</p>
-				<div class="mb-3">
-					<label class="form-label" for="password">Password</label>
-					<input
-						class="form-control"
-						id="password"
-						type="password"
-						bind:value={password}
-						bind:this={focusedField}
-						minlength="8"
-						maxlength="80"
-						placeholder="Password"
-						autocomplete="new-password"
-					/>
-					<div class="invalid-feedback">Password with 8 chars or more required</div>
-					<div class="form-text">
-						Password minimum length 8, must have one capital letter, 1 number, and one unique
-						character.
-					</div>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="passwordConfirm">Password (retype)</label>
-					<input
-						class="form-control"
-						id="passwordConfirm"
-						type="password"
-						required={!!password}
-						bind:this={confirmPassword}
-						minlength="8"
-						maxlength="80"
-						placeholder="Password (again)"
-						autocomplete="new-password"
-					/>
-					<div class="invalid-feedback">Passwords must match</div>
-				</div>
-
-				{#if message}
-					<p class="text-danger">{message}</p>
-				{/if}
-				<div class="d-grid gap-2">
-					<button onclick={resetPassword} type="button" class="btn btn-primary btn-lg"
-						>Send Email</button
-					>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
-
-<style>
-	.card-body {
-		width: 25rem;
-	}
-</style>
+<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(); resetPassword() }}
+>
+	<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="form-input-validated"
+			id="password"
+			type="password"
+			bind:value={password}
+			bind:this={focusedField}
+			required
+			minlength="8"
+			maxlength="80"
+			placeholder="Password"
+			autocomplete="new-password"
+		/>
+		<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>
+	</label>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="passwordConfirm">
+		Password (retype)
+		<input
+			class="form-input"
+			class:tw:border-red-500={passwordMismatch}
+			id="passwordConfirm"
+			type="password"
+			required={!!password}
+			bind:this={confirmPassword}
+			minlength="8"
+			maxlength="80"
+			placeholder="Password (again)"
+			autocomplete="new-password"
+		/>
+		{#if passwordMismatch}
+			<span class="tw:text-xs tw:text-red-600 tw:mt-0.5">Passwords must match</span>
+		{/if}
+	</label>
+
+	{#if message}
+		<p class="tw:text-red-600">{message}</p>
+	{/if}
+
+	<button
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
+	>
+		{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,12 +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()
@@ -14,31 +17,36 @@
 
 	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 {
-			form.classList.add('was-validated')
+			submitted = true
 			focusOnFirstError(form)
 		}
 	}
@@ -48,41 +56,43 @@
 	<title>Forgot Password</title>
 </svelte:head>
 
-<div class="d-flex justify-content-center mt-5">
-	<div class="card">
-		<div class="card-body">
-			<form id="forgot" autocomplete="on" novalidate>
-				<h4><strong>Forgot password</strong></h4>
-				<p>Hey, you're human. We get it.</p>
-				<div class="mb-3">
-					<label class="form-label" for="email">Email</label>
-					<input
-						bind:this={focusedField}
-						bind:value={email}
-						type="email"
-						id="email"
-						class="form-control"
-						required
-						placeholder="Email"
-						autocomplete="email"
-					/>
-					<div class="invalid-feedback">Email address required</div>
-				</div>
-				{#if message}
-					<p class="text-danger">{message}</p>
-				{/if}
-				<div class="d-grid gap-2">
-					<button onclick={sendPasswordReset} type="button" class="btn btn-primary btn-lg"
-						>Send Email</button
-					>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
+<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(); sendPasswordReset() }}
+>
+	<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">
+		Email
+		<input
+			bind:this={focusedField}
+			bind:value={email}
+			type="email"
+			id="email"
+			class="form-input-validated"
+			required
+			placeholder="Email"
+			autocomplete="email"
+		/>
+		<span class="form-error">Email address required</span>
+	</label>
+
+	{#if message}
+		<p class="tw:text-red-600">{message}</p>
+	{/if}
+
+	<button
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
+	>
+		{loading ? 'Sending...' : 'Send Email'}
+	</button>
+</form>
+
 
-<style>
-	.card-body {
-		width: 25rem;
-	}
-</style>

package/src/routes/layout.css

@@ -0,0 +1,63 @@
+@import 'tailwindcss' prefix(tw);
+
+@theme {
+	--font-sans: 'Avenir Next', 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
+}
+
+@layer base {
+	* {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	html,
+	:host {
+		@apply tw:font-sans tw:text-gray-800;
+	}
+}
+
+@layer components {
+	.form-input,
+	.form-input-validated {
+		display: block;
+		width: 100%;
+		margin-top: 0.25rem;
+		border-radius: var(--radius, 0.25rem);
+		border: 1px solid var(--color-gray-300, #d1d5db);
+		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 {}
+}