sveltekit-auth-example 5.6.0 → 5.8.2

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

@@ -4,6 +4,7 @@
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
 	import { redirectAfterLogin } from '$lib/auth-redirect'
+	import Turnstile from '$lib/Turnstile.svelte'
 
 	let focusedField: HTMLInputElement | undefined = $state()
 	let formEl: HTMLFormElement | undefined = $state()
@@ -14,23 +15,36 @@
 	let loading = $state(false)
 	let mfaRequired = $state(false)
 	let mfaCode = $state('')
+	let turnstileToken = $state('')
+	let mfaTurnstileToken = $state('')
+	let turnstile: Turnstile | undefined = $state()
+	let mfaTurnstile: Turnstile | undefined = $state()
 	const credentials: Credentials = $state({
 		email: '',
 		password: ''
 	})
 
+	/**
+	 * Validates the login form and, if valid, delegates to {@link loginLocal}.
+	 * Displays any error message returned by the server.
+	 */
 	async function login() {
 		message = ''
 		submitted = false
 		const form = formEl!
 
 		if (form.checkValidity()) {
+			if (!turnstileToken) {
+				message = 'Please complete the security challenge.'
+				return
+			}
 			try {
 				await loginLocal(credentials)
 			} catch (err) {
 				if (err instanceof Error) {
 					console.error('Login error', err.message)
 					message = err.message
+					turnstile?.reset()
 				}
 			}
 		} else {
@@ -45,12 +59,21 @@
 		focusedField?.focus()
 	})
 
+	/**
+	 * POSTs credentials to `/auth/login`.
+	 *
+	 * If the server requires MFA, sets `mfaRequired` to show the code form.
+	 * Otherwise, updates {@link appState.user} and redirects via
+	 * {@link redirectAfterLogin}.
+	 *
+	 * @param credentials - The user's email and password.
+	 */
 	async function loginLocal(credentials: Credentials) {
 		loading = true
 		try {
 			const res = await fetch('/auth/login', {
 				method: 'POST',
-				body: JSON.stringify(credentials),
+				body: JSON.stringify({ ...credentials, turnstileToken }),
 				headers: {
 					'Content-Type': 'application/json'
 				}
@@ -77,14 +100,24 @@
 		}
 	}
 
+	/**
+	 * Validates the MFA form and POSTs the code to `/auth/mfa`.
+	 *
+	 * On success, updates {@link appState.user} and redirects via
+	 * {@link redirectAfterLogin}. Displays any error returned by the server.
+	 */
 	async function verifyMfa() {
 		message = ''
 		mfaSubmitted = false
-		const form = mfaFormEl!
 
-		if (!form.checkValidity()) {
+		if (!/^[0-9]{6}$/.test(mfaCode)) {
 			mfaSubmitted = true
-			focusOnFirstError(form)
+			mfaFormEl?.querySelector<HTMLInputElement>('#mfaCode')?.focus()
+			return
+		}
+
+		if (!mfaTurnstileToken) {
+			message = 'Please complete the security challenge.'
 			return
 		}
 
@@ -92,7 +125,7 @@
 		try {
 			const res = await fetch('/auth/mfa', {
 				method: 'POST',
-				body: JSON.stringify({ email: credentials.email, code: mfaCode }),
+				body: JSON.stringify({ email: credentials.email, code: mfaCode, turnstileToken: mfaTurnstileToken }),
 				headers: { 'Content-Type': 'application/json' }
 			})
 			const fromEndpoint = await res.json()
@@ -106,6 +139,7 @@
 			if (err instanceof Error) {
 				console.error('MFA error', err)
 				message = err.message
+				mfaTurnstile?.reset()
 			}
 		} finally {
 			loading = false
@@ -175,6 +209,8 @@
 			</button>
 		</p>
 	</form>
+
+	<Turnstile bind:this={mfaTurnstile} bind:token={mfaTurnstileToken} />
 {:else}
 	<form
 		bind:this={formEl}
@@ -269,6 +305,8 @@
 			<p class="tw:text-red-600">{message}</p>
 		{/if}
 
+		<Turnstile bind:this={turnstile} bind:token={turnstileToken} />
+
 		<button type="submit" class="btn-primary" disabled={loading}>
 			{loading ? 'Signing in...' : 'Sign In'}
 		</button>

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

@@ -1,6 +1,15 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
+/**
+ * Page server load function for the profile route.
+ *
+ * Requires the user to be authenticated with any recognized role
+ * (`admin`, `teacher`, or `student`). Unauthenticated or unauthorized
+ * users are redirected to the login page with a `referrer` parameter.
+ *
+ * @returns The authenticated `user` object for use in the page component.
+ */
 export const load: PageServerLoad = async ({ locals }) => {
 	const { user } = locals // populated by /src/hooks.ts
 

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

@@ -6,7 +6,9 @@
 	import { focusOnFirstError } from '$lib/focus'
 	import { appState } from '$lib/app-state.svelte'
 
+	/** Props for the profile page. */
 	interface Props {
+		/** Server data containing the authenticated user's profile. */
 		data: PageData
 	}
 
@@ -28,6 +30,13 @@
 		focusedField?.focus()
 	})
 
+	/**
+	 * Submits the updated profile to `/api/v1/user` (PUT).
+	 *
+	 * Skips the password-match check for Gmail users since they manage their
+	 * password through Google. On success, syncs {@link appState.user} so the
+	 * navbar reflects the changes immediately.
+	 */
 	async function update() {
 		message = ''
 		submitted = false
@@ -62,6 +71,12 @@
 		}
 	}
 
+	/**
+	 * Permanently deletes the authenticated user's account after confirmation.
+	 *
+	 * Sends a DELETE to `/api/v1/user`. On success, clears {@link appState.user}
+	 * and redirects to the login page.
+	 */
 	async function deleteAccount() {
 		if (
 			!confirm('Are you sure you want to permanently delete your account? This cannot be undone.')
@@ -81,6 +96,7 @@
 		}
 	}
 
+	/** Returns `true` if the password and confirm-password fields match. */
 	const passwordMatch = () => {
 		if (!user.password) user.password = ''
 		return user.password == confirmPassword?.value

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

@@ -1,10 +1,17 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
+/**
+ * Page server load function for the register route.
+ *
+ * Redirects already-authenticated users to the home page so they don't see
+ * the registration form unnecessarily.
+ *
+ * @returns An empty object for unauthenticated users.
+ */
 export const load: PageServerLoad = ({ locals }) => {
 	const { user } = locals
 	if (user) {
-		// Redirect to home if user is logged in already
 		redirect(302, '/')
 	}
 	return {}

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

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte'
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
+	import Turnstile from '$lib/Turnstile.svelte'
 
 	let focusedField: HTMLInputElement | undefined = $state()
 	// Pattern stored as a variable to avoid Svelte parsing `{8,}` as a template expression
@@ -24,7 +25,13 @@
 	let emailVerificationSent = $state(false)
 
 	let formEl: HTMLFormElement | undefined = $state()
+	let turnstileToken = $state('')
+	let turnstile: Turnstile | undefined = $state()
 
+	/**
+	 * Validates the registration form and, if valid, delegates to {@link registerLocal}.
+	 * Checks that passwords match before form validation runs.
+	 */
 	async function register() {
 		const form = formEl!
 		message = ''
@@ -37,12 +44,17 @@
 		}
 
 		if (form.checkValidity()) {
+			if (!turnstileToken) {
+				message = 'Please complete the security challenge.'
+				return
+			}
 			try {
 				await registerLocal(user)
 			} catch (err) {
 				if (err instanceof Error) {
 					message = err.message
 					console.log('Login error', message)
+					turnstile?.reset()
 				}
 			}
 		} else {
@@ -57,12 +69,22 @@
 		focusedField?.focus()
 	})
 
+	/**
+	 * POSTs the new user data to `/auth/register`.
+	 *
+	 * The server ignores the `role` field and always assigns the lowest privilege
+	 * (`student`). On success with `emailVerification: true`, sets
+	 * `emailVerificationSent` to show the confirmation message instead of the form.
+	 *
+	 * @param user - The user object collected from the registration form.
+	 * @throws {Error} With a user-friendly message on HTTP errors.
+	 */
 	async function registerLocal(user: User) {
 		loading = true
 		try {
 			const res = await fetch('/auth/register', {
 				method: 'POST',
-				body: JSON.stringify(user), // server ignores user.role - always set it to 'student' (lowest priv)
+				body: JSON.stringify({ ...user, turnstileToken }), // server ignores user.role - always set it to 'student' (lowest priv)
 				headers: {
 					'Content-Type': 'application/json'
 				}
@@ -86,6 +108,7 @@
 		}
 	}
 
+	/** Returns `true` if the password and confirm-password fields match. */
 	const passwordMatch = () => {
 		if (!user) return false // placate TypeScript
 		if (!user.password) user.password = ''
@@ -254,6 +277,8 @@
 			<p class="tw:text-red-600">{message}</p>
 		{/if}
 
+		<Turnstile bind:this={turnstile} bind:token={turnstileToken} />
+
 		<button type="submit" class="btn-primary" disabled={loading}>
 			{loading ? 'Creating account...' : 'Register'}
 		</button>

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

@@ -1,6 +1,15 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
+/**
+ * Page server load function for the teachers route.
+ *
+ * Restricts access to users with the `teacher` or `admin` role. Unauthenticated
+ * or unauthorized users are redirected to the login page with a `referrer`
+ * parameter so they are returned here after logging in.
+ *
+ * @returns An object with a placeholder `message` for teacher/admin-only server content.
+ */
 export const load: PageServerLoad = async ({ locals }) => {
 	const { user } = locals
 	const authorized = ['admin', 'teacher']

package/src/service-worker.ts

@@ -7,7 +7,7 @@ import { build, files, version } from '$service-worker'
 
 const sw = self as unknown as ServiceWorkerGlobalScope
 
-// Create a unique cache name for this deployment
+/** Unique cache name for this deployment, keyed by the SvelteKit build version. */
 const CACHE = `cache-${version}`
 
 const ASSETS = [
@@ -15,6 +15,10 @@ const ASSETS = [
 	...files // everything in `static`
 ]
 
+/**
+ * On install, opens the versioned cache and pre-caches all build artifacts
+ * and static files so they are available offline.
+ */
 sw.addEventListener('install', event => {
 	// Create a new cache and add all files to it
 	async function addFilesToCache() {
@@ -25,6 +29,10 @@ sw.addEventListener('install', event => {
 	event.waitUntil(addFilesToCache())
 })
 
+/**
+ * On activate, removes all caches from previous deployments, keeping only
+ * the cache for the current build version.
+ */
 sw.addEventListener('activate', event => {
 	// Remove previous cached data from disk
 	async function deleteOldCaches() {
@@ -36,6 +44,14 @@ sw.addEventListener('activate', event => {
 	event.waitUntil(deleteOldCaches())
 })
 
+/**
+ * Intercepts GET requests and applies a cache-first strategy for pre-cached
+ * assets, falling back to network-first (with cache fallback) for all other
+ * requests.
+ *
+ * API (`/api`), auth (`/auth`), and non-HTTP requests are bypassed and go
+ * directly to the network.
+ */
 sw.addEventListener('fetch', event => {
 	// ignore POST requests etc
 	if (event.request.method !== 'GET') return

package/svelte.config.js

@@ -8,7 +8,8 @@ const baseCsp = [
 	'https://www.gstatic.com/recaptcha/', // recaptcha
 	'https://accounts.google.com/gsi/', // sign-in w/google
 	'https://www.google.com/recaptcha/', // recapatcha
-	'https://fonts.gstatic.com/' // recaptcha fonts
+	'https://fonts.gstatic.com/', // recaptcha fonts
+	'https://challenges.cloudflare.com/' // turnstile
 ]
 
 if (!production) baseCsp.push('ws://localhost:3000')
@@ -41,7 +42,8 @@ const config = {
 				'img-src': ['data:', 'blob:', ...baseCsp],
 				'style-src': ['unsafe-inline', ...baseCsp],
 				'object-src': ['none'],
-				'base-uri': ['self']
+				'base-uri': ['self'],
+				'frame-src': ['https://challenges.cloudflare.com/', 'https://accounts.google.com/']
 			}
 		},
 		files: {

package/vite.config.ts

@@ -1,18 +1,13 @@
-import { sveltekit } from '@sveltejs/kit/vite'
-import { defineConfig } from 'vite'
-import tailwindcss from '@tailwindcss/vite'
+import devtoolsJson from 'vite-plugin-devtools-json';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-	build: {
-		sourcemap: process.env.NODE_ENV !== 'production'
-	},
-	plugins: [sveltekit(), tailwindcss()],
+	build: { sourcemap: process.env.NODE_ENV !== 'production' },
+	plugins: [sveltekit(), tailwindcss(), devtoolsJson()],
 	test: {
 		include: ['src/**/*.unit.test.ts', 'tests/**/*.unit.test.ts']
 	},
-	server: {
-		host: 'localhost',
-		port: 3000,
-		open: 'http://localhost:3000'
-	}
-})
+	server: { host: 'localhost', port: 3000, open: 'http://localhost:3000' }
+});

package/src/lib/server/sendgrid.ts

@@ -1,13 +0,0 @@
-import type { MailDataRequired } from '@sendgrid/mail'
-import sgMail from '@sendgrid/mail'
-import { env } from '$env/dynamic/private'
-
-export const sendMessage = async (message: Partial<MailDataRequired>) => {
-	const { SENDGRID_SENDER, SENDGRID_KEY } = env
-	sgMail.setApiKey(SENDGRID_KEY)
-	const completeMessage = <MailDataRequired>{
-		from: SENDGRID_SENDER, // default sender can be altered
-		...message
-	}
-	await sgMail.send(completeMessage)
-}