sveltekit-auth-example 5.8.2 → 5.8.4

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 - Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 5.8.4
+
+- Fix README: replace outdated SendGrid references with Brevo; update env var names (`BREVO_KEY`, `EMAIL`) and source file paths
+
+# 5.8.3
+
+- Add unit tests for all auth route handlers: `/auth/[slug]`, `/auth/forgot`, `/auth/google`, `/auth/login`, `/auth/logout`, `/auth/mfa`, `/auth/register`, `/auth/reset`, `/auth/verify/[token]`
+- Switch all server-side env imports from `$env/static/private` to `$env/dynamic/private` so secrets are read at runtime rather than baked into the build
+
 # 5.8.2
 
 - Add Chrome DevTools

package/README.md

@@ -8,15 +8,15 @@ A complete, production-ready authentication and authorization starter for **Svel
 
 ## Features
 
-|                                                |                                         |
-| ---------------------------------------------- | --------------------------------------- |
-| ✅ Local accounts (email + password)           | ✅ Sign in with Google / Google One Tap |
-| ✅ Multi-factor authentication (MFA via email) | ✅ Email verification                   |
-| ✅ Forgot password / email reset (Brevo)       | ✅ User profile management              |
-| ✅ Session management + timeout                | ✅ Rate limiting                        |
-| ✅ Role-based access control                   | ✅ Password complexity enforcement      |
-| ✅ Content Security Policy (CSP)               | ✅ OWASP-compliant password hashing     |
-| ✅ Cloudflare Turnstile CAPTCHA (bot protection) |                                       |
+|                                                  |                                         |
+| ------------------------------------------------ | --------------------------------------- |
+| ✅ Local accounts (email + password)             | ✅ Sign in with Google / Google One Tap |
+| ✅ Multi-factor authentication (MFA via email)   | ✅ Email verification                   |
+| ✅ Forgot password / email reset (Brevo)         | ✅ User profile management              |
+| ✅ Session management + timeout                  | ✅ Rate limiting                        |
+| ✅ Role-based access control                     | ✅ Password complexity enforcement      |
+| ✅ Content Security Policy (CSP)                 | ✅ OWASP-compliant password hashing     |
+| ✅ Cloudflare Turnstile CAPTCHA (bot protection) |                                         |
 
 ## Stack
 
@@ -88,8 +88,8 @@ yarn preview
 
 The db_create.sql script adds three users to the database with obvious roles:
 
-| Email               | Password   | Role    |
-| ------------------- | ---------- | ------- |
+| Email               | Password     | Role    |
+| ------------------- | ------------ | ------- |
 | admin@example.com   | Admin1234!   | admin   |
 | teacher@example.com | Teacher1234! | teacher |
 | student@example.com | Student1234! | student |
@@ -118,4 +118,4 @@ The website supports two types of authentication:
 
 > There is some overhead to checking the user session in a database each time versus using a JWT; however, validating each request avoids problems discussed in [this article](https://redis.com/blog/json-web-tokens-jwt-are-dangerous-for-user-sessions/). For a high-volume website, I would use Redis or the equivalent.
 
-The forgot password / password reset functionality uses a JWT and [**SendGrid**](https://www.sendgrid.com) to send the email. You would need to have a **SendGrid** account and set two environmental variables. Email sending is in /src/routes/auth/forgot/+server.ts. This code could easily be replaced by nodemailer or something similar. Note: I have no affiliation with **SendGrid** (used their API in another project).
+The forgot password / password reset functionality uses a JWT and [**Brevo**](https://brevo.com) to send the email. You would need to have a **Brevo** account and set the `BREVO_KEY` and `EMAIL` environment variables (see setup instructions above). Email sending is in `src/lib/server/brevo.ts` and the email templates are in `src/lib/server/email/`. This code could easily be replaced by nodemailer or something similar.

package/db_create.sql

@@ -1,6 +1,5 @@
 -- Run via db_create.sh or:
 -- $ psql -d postgres -f db_create.sql && psql -d auth -f db_schema.sql
-
 -- Create role if not already there
 DO $do$
 BEGIN

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sveltekit-auth-example",
 	"description": "SvelteKit Authentication Example",
-	"version": "5.8.2",
+	"version": "5.8.4",
 	"author": "Nate Stuyvesant",
 	"license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
 	"repository": {
@@ -55,10 +55,12 @@
 		"@types/google.accounts": "^0.0.18",
 		"@types/jsonwebtoken": "^9.0.10",
 		"@types/pg": "^8.18.0",
+		"@vitest/coverage-v8": "4.1.0",
 		"eslint": "^10.0.3",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.15.2",
 		"globals": "^17.4.0",
+		"jsdom": "^28.1.0",
 		"playwright": "^1.58.2",
 		"prettier": "^3.8.1",
 		"prettier-plugin-sql": "^0.19.2",

package/src/hooks.server.unit.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { error } from '@sveltejs/kit'
+
+vi.mock('$lib/server/db', () => ({ query: vi.fn() }))
+
+import { handle } from './hooks.server'
+import { query } from '$lib/server/db'
+
+const mockQuery = vi.mocked(query)
+
+/** Build a minimal event object for the hook. */
+function makeEvent({
+	pathname = '/page',
+	sessionCookie = undefined as string | undefined,
+	ip = '1.2.3.4'
+} = {}) {
+	const cookieStore = new Map<string, string>()
+	if (sessionCookie) cookieStore.set('session', sessionCookie)
+
+	return {
+		url: new URL(`http://localhost${pathname}`),
+		cookies: {
+			get: (name: string) => cookieStore.get(name),
+			delete: vi.fn()
+		},
+		locals: {} as Record<string, unknown>,
+		getClientAddress: () => ip
+	} as unknown as Parameters<typeof handle>[0]['event']
+}
+
+const resolve = vi.fn(async (event: unknown) => new Response('ok', { status: 200 }))
+
+beforeEach(() => {
+	vi.resetAllMocks()
+	resolve.mockResolvedValue(new Response('ok', { status: 200 }))
+})
+
+// ── Static asset bypass ────────────────────────────────────────────────────────
+
+describe('static asset bypass', () => {
+	it('calls resolve immediately for /_app/ paths without touching the db', async () => {
+		const event = makeEvent({ pathname: '/_app/immutable/app.js' })
+
+		await handle({ event, resolve })
+
+		expect(resolve).toHaveBeenCalledOnce()
+		expect(mockQuery).not.toHaveBeenCalled()
+	})
+})
+
+// ── Rate limiting ──────────────────────────────────────────────────────────────
+
+describe('rate limiting', () => {
+	it('allows requests under the limit', async () => {
+		const event = makeEvent({ pathname: '/auth/login', ip: '10.0.0.1' })
+
+		await expect(handle({ event, resolve })).resolves.not.toThrow()
+	})
+
+	it('throws 429 after exceeding the request limit for a rate-limited path', async () => {
+		const ip = '10.0.0.99'
+
+		// Exhaust the 20-request allowance
+		for (let i = 0; i < 20; i++) {
+			await handle({ event: makeEvent({ pathname: '/auth/login', ip }), resolve }).catch(() => {})
+		}
+
+		await expect(
+			handle({ event: makeEvent({ pathname: '/auth/login', ip }), resolve })
+		).rejects.toMatchObject({ status: 429 })
+	})
+
+	it('does not rate-limit non-auth paths', async () => {
+		const ip = '10.0.0.2'
+
+		for (let i = 0; i < 25; i++) {
+			await handle({ event: makeEvent({ pathname: '/about', ip }), resolve })
+		}
+
+		expect(resolve).toHaveBeenCalledTimes(25)
+	})
+})
+
+// ── Session handling ───────────────────────────────────────────────────────────
+
+describe('session handling', () => {
+	it('attaches user to locals when a valid session cookie is present', async () => {
+		const user = { id: 1, role: 'admin' }
+		mockQuery.mockResolvedValue({ rows: [{ get_and_update_session: user }] } as any)
+
+		const event = makeEvent({ sessionCookie: 'valid-session-uuid' })
+
+		await handle({ event, resolve })
+
+		expect(event.locals.user).toEqual(user)
+	})
+
+	it('does not call query when no session cookie is present', async () => {
+		const event = makeEvent()
+
+		await handle({ event, resolve })
+
+		expect(mockQuery).not.toHaveBeenCalled()
+	})
+
+	it('deletes the session cookie when the session is not found in the db', async () => {
+		mockQuery.mockResolvedValue({ rows: [{ get_and_update_session: undefined }] } as any)
+
+		const event = makeEvent({ sessionCookie: 'stale-session-uuid' })
+
+		await handle({ event, resolve })
+
+		expect(event.cookies.delete).toHaveBeenCalledWith('session', { path: '/' })
+	})
+
+	it('deletes the session cookie when no session cookie is present and locals.user is unset', async () => {
+		const event = makeEvent()
+
+		await handle({ event, resolve })
+
+		expect(event.cookies.delete).toHaveBeenCalledWith('session', { path: '/' })
+	})
+
+	it('does not delete the session cookie when a valid session exists', async () => {
+		const user = { id: 2, role: 'student' }
+		mockQuery.mockResolvedValue({ rows: [{ get_and_update_session: user }] } as any)
+
+		const event = makeEvent({ sessionCookie: 'valid-session-uuid' })
+
+		await handle({ event, resolve })
+
+		expect(event.cookies.delete).not.toHaveBeenCalled()
+	})
+
+	it('uses the named prepared statement for session lookup', async () => {
+		mockQuery.mockResolvedValue({ rows: [{ get_and_update_session: { id: 3 } }] } as any)
+
+		const event = makeEvent({ sessionCookie: 'some-uuid' })
+
+		await handle({ event, resolve })
+
+		expect(mockQuery).toHaveBeenCalledWith(
+			expect.stringContaining('get_and_update_session'),
+			['some-uuid'],
+			'get-and-update-session'
+		)
+	})
+})
+
+// ── Response pass-through ──────────────────────────────────────────────────────
+
+describe('response', () => {
+	it('returns the response from resolve', async () => {
+		const fakeResponse = new Response('hello', { status: 200 })
+		resolve.mockResolvedValue(fakeResponse)
+
+		const event = makeEvent()
+
+		const result = await handle({ event, resolve })
+
+		expect(result).toBe(fakeResponse)
+	})
+})

package/src/lib/app-state.svelte.unit.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { appState } from './app-state.svelte'
+
+describe('appState', () => {
+	beforeEach(() => {
+		// Reset to initial state before each test
+		appState.user = undefined
+		appState.toast = { title: '', body: '', isOpen: false }
+		appState.googleInitialized = false
+	})
+
+	describe('initial state', () => {
+		it('user is undefined', () => {
+			expect(appState.user).toBeUndefined()
+		})
+
+		it('toast starts closed with empty strings', () => {
+			expect(appState.toast).toEqual({ title: '', body: '', isOpen: false })
+		})
+
+		it('googleInitialized is false', () => {
+			expect(appState.googleInitialized).toBe(false)
+		})
+	})
+
+	describe('user', () => {
+		it('can be set to a user object', () => {
+			const user: User = {
+				id: 1,
+				role: 'admin',
+				email: 'admin@example.com',
+				firstName: 'Jane',
+				lastName: 'Doe',
+				phone: '412-555-1212',
+				optOut: false
+			}
+
+			appState.user = user
+
+			expect(appState.user).toEqual(user)
+		})
+
+		it('can be cleared back to undefined', () => {
+			appState.user = { id: 1, role: 'student', email: 'a@b.com', firstName: 'A', lastName: 'B', phone: '', optOut: false }
+			appState.user = undefined
+			expect(appState.user).toBeUndefined()
+		})
+	})
+
+	describe('toast', () => {
+		it('can be updated to show a notification', () => {
+			appState.toast = { title: 'Success', body: 'Your changes were saved.', isOpen: true }
+
+			expect(appState.toast).toEqual({ title: 'Success', body: 'Your changes were saved.', isOpen: true })
+		})
+
+		it('isOpen can be toggled independently', () => {
+			appState.toast = { title: 'Hey', body: 'Hello', isOpen: true }
+			appState.toast.isOpen = false
+
+			expect(appState.toast.isOpen).toBe(false)
+			expect(appState.toast.title).toBe('Hey')
+		})
+	})
+
+	describe('googleInitialized', () => {
+		it('can be set to true', () => {
+			appState.googleInitialized = true
+
+			expect(appState.googleInitialized).toBe(true)
+		})
+	})
+})

package/src/lib/auth-redirect.unit.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }))
+vi.mock('$app/state', () => ({ page: { url: { searchParams: new URLSearchParams() } } }))
+
+import { redirectAfterLogin } from './auth-redirect'
+import { goto } from '$app/navigation'
+import { page } from '$app/state'
+
+const mockGoto = vi.mocked(goto)
+const mockPage = page as { url: { searchParams: URLSearchParams } }
+
+const student: UserProperties = { id: 1, role: 'student' }
+const teacher: UserProperties = { id: 2, role: 'teacher' }
+const admin: UserProperties = { id: 3, role: 'admin' }
+
+describe('redirectAfterLogin', () => {
+	beforeEach(() => {
+		mockGoto.mockReset()
+		mockPage.url.searchParams = new URLSearchParams()
+	})
+
+	// ── No-op cases ────────────────────────────────────────────────────────────
+
+	it('does nothing when user is undefined', () => {
+		redirectAfterLogin(undefined)
+		expect(mockGoto).not.toHaveBeenCalled()
+	})
+
+	it('does nothing when user is null', () => {
+		redirectAfterLogin(null)
+		expect(mockGoto).not.toHaveBeenCalled()
+	})
+
+	// ── Role-based defaults ────────────────────────────────────────────────────
+
+	it('redirects a student to /', () => {
+		redirectAfterLogin(student)
+		expect(mockGoto).toHaveBeenCalledWith('/')
+	})
+
+	it('redirects a teacher to /teachers', () => {
+		redirectAfterLogin(teacher)
+		expect(mockGoto).toHaveBeenCalledWith('/teachers')
+	})
+
+	it('redirects an admin to /admin', () => {
+		redirectAfterLogin(admin)
+		expect(mockGoto).toHaveBeenCalledWith('/admin')
+	})
+
+	// ── Valid referrer ─────────────────────────────────────────────────────────
+
+	it('redirects to the referrer path instead of the role default', () => {
+		mockPage.url.searchParams = new URLSearchParams({ referrer: '/dashboard' })
+		redirectAfterLogin(admin)
+		expect(mockGoto).toHaveBeenCalledWith('/dashboard')
+	})
+
+	it('uses the referrer for any role', () => {
+		mockPage.url.searchParams = new URLSearchParams({ referrer: '/some/path' })
+		redirectAfterLogin(teacher)
+		expect(mockGoto).toHaveBeenCalledWith('/some/path')
+	})
+
+	// ── Invalid referrer ────────────────────────────────────────────────────────
+
+	it('ignores a referrer that does not start with /', () => {
+		mockPage.url.searchParams = new URLSearchParams({ referrer: 'https://evil.com' })
+		redirectAfterLogin(admin)
+		expect(mockGoto).toHaveBeenCalledWith('/admin')
+	})
+
+	it('ignores a protocol-relative referrer starting with //', () => {
+		mockPage.url.searchParams = new URLSearchParams({ referrer: '//evil.com' })
+		redirectAfterLogin(admin)
+		expect(mockGoto).toHaveBeenCalledWith('/admin')
+	})
+
+	it('ignores an empty referrer', () => {
+		mockPage.url.searchParams = new URLSearchParams({ referrer: '' })
+		redirectAfterLogin(student)
+		expect(mockGoto).toHaveBeenCalledWith('/')
+	})
+
+	// ── Single goto call ────────────────────────────────────────────────────────
+
+	it('calls goto exactly once', () => {
+		redirectAfterLogin(student)
+		expect(mockGoto).toHaveBeenCalledOnce()
+	})
+})

package/src/lib/fetch-interceptor.unit.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }))
+vi.mock('$app/state', () => ({ page: { url: new URL('http://localhost/dashboard') } }))
+vi.mock('$lib/app-state.svelte', () => ({ appState: { user: undefined } }))
+
+import { setupFetchInterceptor } from './fetch-interceptor'
+import { goto } from '$app/navigation'
+import { page } from '$app/state'
+import { appState } from '$lib/app-state.svelte'
+
+const mockGoto = vi.mocked(goto)
+const mockPage = page as { url: URL }
+
+function makeResponse(status: number) {
+	return new Response(null, { status })
+}
+
+describe('setupFetchInterceptor', () => {
+	let originalFetch: typeof fetch
+
+	beforeEach(() => {
+		// Save and restore window.fetch around each test
+		originalFetch = window.fetch
+		mockGoto.mockReset()
+		appState.user = { id: 1, role: 'admin', email: 'a@b.com', firstName: 'A', lastName: 'B', phone: '', optOut: false }
+		setupFetchInterceptor()
+	})
+
+	afterEach(() => {
+		window.fetch = originalFetch
+		appState.user = undefined
+	})
+
+	it('patches window.fetch', () => {
+		expect(window.fetch).not.toBe(originalFetch)
+	})
+
+	it('returns the response unchanged for non-401 status codes', async () => {
+		window.fetch = vi.fn().mockResolvedValue(makeResponse(200))
+		setupFetchInterceptor()
+
+		const res = await window.fetch('/api/data')
+
+		expect(res.status).toBe(200)
+		expect(mockGoto).not.toHaveBeenCalled()
+	})
+
+	it('does not redirect on 401 when no user is logged in', async () => {
+		appState.user = undefined
+		window.fetch = vi.fn().mockResolvedValue(makeResponse(401))
+		setupFetchInterceptor()
+
+		await window.fetch('/api/data')
+
+		expect(mockGoto).not.toHaveBeenCalled()
+	})
+
+	it('clears appState.user on 401 when a user is logged in', async () => {
+		window.fetch = vi.fn().mockResolvedValue(makeResponse(401))
+		setupFetchInterceptor()
+
+		await window.fetch('/api/data')
+
+		expect(appState.user).toBeUndefined()
+	})
+
+	it('redirects to /login with the current path as referrer on 401', async () => {
+		mockPage.url = new URL('http://localhost/dashboard?tab=profile')
+		window.fetch = vi.fn().mockResolvedValue(makeResponse(401))
+		setupFetchInterceptor()
+
+		await window.fetch('/api/data')
+
+		expect(mockGoto).toHaveBeenCalledWith(
+			'/login?referrer=' + encodeURIComponent('/dashboard?tab=profile')
+		)
+	})
+
+	it('still returns the 401 response to the caller', async () => {
+		window.fetch = vi.fn().mockResolvedValue(makeResponse(401))
+		setupFetchInterceptor()
+
+		const res = await window.fetch('/api/data')
+
+		expect(res.status).toBe(401)
+	})
+
+	it('passes all fetch arguments through to the original fetch', async () => {
+		const innerFetch = vi.fn().mockResolvedValue(makeResponse(200))
+		window.fetch = innerFetch
+		setupFetchInterceptor()
+
+		await window.fetch('/api/endpoint', { method: 'POST', body: 'data' })
+
+		expect(innerFetch).toHaveBeenCalledWith('/api/endpoint', { method: 'POST', body: 'data' })
+	})
+})

package/src/lib/focus.unit.test.ts

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+import { focusOnFirstError } from './focus'
+
+function makeInput(valid: boolean): HTMLInputElement {
+	const input = document.createElement('input')
+	input.type = 'text'
+	if (!valid) {
+		input.required = true
+		// leave value empty so checkValidity() returns false
+	}
+	input.focus = vi.fn()
+	return input
+}
+
+function makeForm(...inputs: HTMLInputElement[]): HTMLFormElement {
+	const form = document.createElement('form')
+	for (const input of inputs) form.appendChild(input)
+	return form
+}
+
+describe('focusOnFirstError', () => {
+	it('focuses the first invalid input', () => {
+		const invalid = makeInput(false)
+		const form = makeForm(invalid)
+
+		focusOnFirstError(form)
+
+		expect(invalid.focus).toHaveBeenCalledOnce()
+	})
+
+	it('does not focus a valid input', () => {
+		const valid = makeInput(true)
+		const form = makeForm(valid)
+
+		focusOnFirstError(form)
+
+		expect(valid.focus).not.toHaveBeenCalled()
+	})
+
+	it('focuses only the first invalid input when multiple are invalid', () => {
+		const first = makeInput(false)
+		const second = makeInput(false)
+		const form = makeForm(first, second)
+
+		focusOnFirstError(form)
+
+		expect(first.focus).toHaveBeenCalledOnce()
+		expect(second.focus).not.toHaveBeenCalled()
+	})
+
+	it('skips valid inputs before the first invalid one', () => {
+		const valid = makeInput(true)
+		const invalid = makeInput(false)
+		const form = makeForm(valid, invalid)
+
+		focusOnFirstError(form)
+
+		expect(valid.focus).not.toHaveBeenCalled()
+		expect(invalid.focus).toHaveBeenCalledOnce()
+	})
+
+	it('does nothing when the form has no inputs', () => {
+		const form = document.createElement('form')
+		// Should not throw
+		expect(() => focusOnFirstError(form)).not.toThrow()
+	})
+
+	it('does nothing when all inputs are valid', () => {
+		const a = makeInput(true)
+		const b = makeInput(true)
+		const form = makeForm(a, b)
+
+		focusOnFirstError(form)
+
+		expect(a.focus).not.toHaveBeenCalled()
+		expect(b.focus).not.toHaveBeenCalled()
+	})
+
+	it('ignores non-input elements (e.g. select, button)', () => {
+		const select = document.createElement('select')
+		select.required = true
+		const focusSpy = vi.spyOn(select, 'focus')
+		const form = document.createElement('form')
+		form.appendChild(select)
+
+		focusOnFirstError(form)
+
+		expect(focusSpy).not.toHaveBeenCalled()
+	})
+})