sveltekit-auth-example 5.6.1 → 5.8.3

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,6 +25,8 @@
 	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}.
@@ -41,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 {
@@ -76,7 +84,7 @@
 		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'
 				}
@@ -269,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/service-worker.unit.test.ts

@@ -0,0 +1,228 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from 'vitest'
+
+vi.mock('$service-worker', () => ({
+	build: ['/_app/app.js'],
+	files: ['/favicon.png'],
+	version: 'v1'
+}))
+
+const CACHE_NAME = 'cache-v1'
+const ASSETS = ['/_app/app.js', '/favicon.png']
+
+const mockCache = {
+	addAll: vi.fn(),
+	match: vi.fn(),
+	put: vi.fn()
+}
+
+const mockCaches = {
+	open: vi.fn(),
+	keys: vi.fn(),
+	delete: vi.fn()
+}
+
+const swHandlers: Record<string, Function> = {}
+
+beforeAll(async () => {
+	vi.stubGlobal('caches', mockCaches)
+
+	// Spy on addEventListener to capture the handlers the SW registers
+	vi.spyOn(window, 'addEventListener').mockImplementation((type: string, handler: any) => {
+		swHandlers[type] = handler
+	})
+
+	// Reset module registry so the SW file re-evaluates and re-registers its listeners
+	vi.resetModules()
+	await import('./service-worker')
+
+	vi.restoreAllMocks()
+})
+
+beforeEach(() => {
+	vi.resetAllMocks()
+	mockCaches.open.mockResolvedValue(mockCache)
+	mockCaches.delete.mockResolvedValue(true)
+	mockCache.addAll.mockResolvedValue(undefined)
+	mockCache.match.mockResolvedValue(null)
+})
+
+afterEach(() => {
+	vi.restoreAllMocks()
+})
+
+function makeExtendableEvent() {
+	return { waitUntil: vi.fn() }
+}
+
+function makeFetchEvent(url: string, method = 'GET') {
+	return { request: new Request(url, { method }), respondWith: vi.fn() }
+}
+
+// ── install ────────────────────────────────────────────────────────────────────
+
+describe('install event', () => {
+	it('registers an install handler', () => {
+		expect(swHandlers.install).toBeTypeOf('function')
+	})
+
+	it('calls event.waitUntil with a promise', () => {
+		const event = makeExtendableEvent()
+		swHandlers.install(event)
+		expect(event.waitUntil).toHaveBeenCalledOnce()
+		expect(event.waitUntil.mock.calls[0][0]).toBeInstanceOf(Promise)
+	})
+
+	it('opens the versioned cache', async () => {
+		const event = makeExtendableEvent()
+		swHandlers.install(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCaches.open).toHaveBeenCalledWith(CACHE_NAME)
+	})
+
+	it('pre-caches all build and static assets', async () => {
+		const event = makeExtendableEvent()
+		swHandlers.install(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCache.addAll).toHaveBeenCalledWith(ASSETS)
+	})
+})
+
+// ── activate ───────────────────────────────────────────────────────────────────
+
+describe('activate event', () => {
+	it('registers an activate handler', () => {
+		expect(swHandlers.activate).toBeTypeOf('function')
+	})
+
+	it('deletes old caches', async () => {
+		mockCaches.keys.mockResolvedValue([CACHE_NAME, 'cache-old'])
+		const event = makeExtendableEvent()
+		swHandlers.activate(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCaches.delete).toHaveBeenCalledWith('cache-old')
+	})
+
+	it('does not delete the current cache', async () => {
+		mockCaches.keys.mockResolvedValue([CACHE_NAME, 'cache-old'])
+		const event = makeExtendableEvent()
+		swHandlers.activate(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCaches.delete).not.toHaveBeenCalledWith(CACHE_NAME)
+	})
+
+	it('deletes multiple old caches', async () => {
+		mockCaches.keys.mockResolvedValue([CACHE_NAME, 'cache-v0', 'cache-v0.5'])
+		const event = makeExtendableEvent()
+		swHandlers.activate(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCaches.delete).toHaveBeenCalledTimes(2)
+	})
+
+	it('does nothing when there are no old caches', async () => {
+		mockCaches.keys.mockResolvedValue([CACHE_NAME])
+		const event = makeExtendableEvent()
+		swHandlers.activate(event)
+		await event.waitUntil.mock.calls[0][0]
+		expect(mockCaches.delete).not.toHaveBeenCalled()
+	})
+})
+
+// ── fetch ──────────────────────────────────────────────────────────────────────
+
+describe('fetch event', () => {
+	it('registers a fetch handler', () => {
+		expect(swHandlers.fetch).toBeTypeOf('function')
+	})
+
+	it('ignores non-GET requests', () => {
+		const event = makeFetchEvent('http://localhost/page', 'POST')
+		swHandlers.fetch(event)
+		expect(event.respondWith).not.toHaveBeenCalled()
+	})
+
+	it('bypasses /api requests', () => {
+		const event = makeFetchEvent('http://localhost/api/v1/users')
+		swHandlers.fetch(event)
+		expect(event.respondWith).not.toHaveBeenCalled()
+	})
+
+	it('bypasses /auth requests', () => {
+		const event = makeFetchEvent('http://localhost/auth/login')
+		swHandlers.fetch(event)
+		expect(event.respondWith).not.toHaveBeenCalled()
+	})
+
+	it('calls respondWith for a normal GET request', () => {
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('ok', { status: 200 }))
+		const event = makeFetchEvent('http://localhost/about')
+		swHandlers.fetch(event)
+		expect(event.respondWith).toHaveBeenCalledOnce()
+	})
+
+	it('serves a pre-cached ASSET from cache', async () => {
+		const cached = new Response('<script>', { status: 200 })
+		mockCache.match.mockResolvedValue(cached)
+
+		const event = makeFetchEvent('http://localhost/_app/app.js')
+		swHandlers.fetch(event)
+
+		const result = await event.respondWith.mock.calls[0][0]
+		expect(result).toBe(cached)
+	})
+
+	it('falls back to network when pre-cached ASSET is not in cache', async () => {
+		const networkResponse = new Response('script', { status: 200 })
+		mockCache.match.mockResolvedValue(undefined)
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(networkResponse)
+
+		const event = makeFetchEvent('http://localhost/_app/app.js')
+		swHandlers.fetch(event)
+
+		const result = await event.respondWith.mock.calls[0][0]
+		expect(result).toBe(networkResponse)
+	})
+
+	it('caches 200 network responses for unknown paths', async () => {
+		const networkResponse = new Response('page html', { status: 200 })
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(networkResponse)
+
+		const event = makeFetchEvent('http://localhost/about')
+		swHandlers.fetch(event)
+		await event.respondWith.mock.calls[0][0]
+
+		expect(mockCache.put).toHaveBeenCalledWith(event.request, expect.any(Response))
+	})
+
+	it('does not cache non-200 responses', async () => {
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(null, { status: 404 }))
+
+		const event = makeFetchEvent('http://localhost/missing')
+		swHandlers.fetch(event)
+		await event.respondWith.mock.calls[0][0]
+
+		expect(mockCache.put).not.toHaveBeenCalled()
+	})
+
+	it('falls back to cache when the network fails', async () => {
+		const cachedFallback = new Response('cached page', { status: 200 })
+		mockCache.match.mockResolvedValue(cachedFallback)
+		vi.spyOn(globalThis, 'fetch').mockRejectedValue(new TypeError('offline'))
+
+		const event = makeFetchEvent('http://localhost/about')
+		swHandlers.fetch(event)
+
+		const result = await event.respondWith.mock.calls[0][0]
+		expect(result).toBe(cachedFallback)
+	})
+
+	it('throws when network fails and cache is empty', async () => {
+		mockCache.match.mockResolvedValue(undefined)
+		vi.spyOn(globalThis, 'fetch').mockRejectedValue(new TypeError('offline'))
+
+		const event = makeFetchEvent('http://localhost/about')
+		swHandlers.fetch(event)
+
+		await expect(event.respondWith.mock.calls[0][0]).rejects.toThrow('offline')
+	})
+})

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 devtoolsJson from 'vite-plugin-devtools-json'
 import { sveltekit } from '@sveltejs/kit/vite'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 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,22 +0,0 @@
-import type { MailDataRequired } from '@sendgrid/mail'
-import sgMail from '@sendgrid/mail'
-import { env } from '$env/dynamic/private'
-
-/**
- * Sends a transactional email via the SendGrid API.
- *
- * Merges the provided message with the default sender configured in the environment.
- * Any field in `message` (including `from`) will override the default.
- *
- * @param message - Partial SendGrid mail data. Must include at minimum `to`, `subject`, and `html` or `text`.
- * @throws {Error} If the SendGrid API key is missing or the API request fails.
- */
-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)
-}