sveltekit-auth-example 5.6.1 → 5.8.3

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()
+	})
+})

package/src/lib/google.ts

@@ -2,6 +2,26 @@ import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
 import { appState } from '$lib/app-state.svelte'
 import { redirectAfterLogin } from '$lib/auth-redirect'
 
+/**
+ * Waits for the Google Identity Services SDK to load, then calls `fn`.
+ * Polls every 50 ms; gives up after 10 seconds.
+ */
+function whenGoogleReady(fn: () => void) {
+	if (typeof google !== 'undefined') {
+		fn()
+		return
+	}
+	const deadline = Date.now() + 10_000
+	const id = setInterval(() => {
+		if (typeof google !== 'undefined') {
+			clearInterval(id)
+			fn()
+		} else if (Date.now() > deadline) {
+			clearInterval(id)
+		}
+	}, 50)
+}
+
 /**
  * Renders the Google Sign-In button inside the element with id `googleButton`.
  *
@@ -10,16 +30,18 @@ import { redirectAfterLogin } from '$lib/auth-redirect'
  * correctly within its container.
  */
 export function renderGoogleButton() {
-	const btn = document.getElementById('googleButton')
-	if (btn) {
-		const width = btn.offsetWidth || btn.parentElement?.offsetWidth || 400
-		google.accounts.id.renderButton(btn, {
-			type: 'standard',
-			theme: 'outline',
-			size: 'large',
-			width: Math.floor(width)
-		})
-	}
+	whenGoogleReady(() => {
+		const btn = document.getElementById('googleButton')
+		if (btn) {
+			const width = btn.offsetWidth || btn.parentElement?.offsetWidth || 400
+			google.accounts.id.renderButton(btn, {
+				type: 'standard',
+				theme: 'outline',
+				size: 'large',
+				width: Math.floor(width)
+			})
+		}
+	})
 }
 
 /**
@@ -33,13 +55,15 @@ export function renderGoogleButton() {
  * 3. Redirects the user via {@link redirectAfterLogin}.
  */
 export function initializeGoogleAccounts() {
-	if (!appState.googleInitialized) {
-		google.accounts.id.initialize({
-			client_id: PUBLIC_GOOGLE_CLIENT_ID,
-			callback: googleCallback
-		})
-		appState.googleInitialized = true
-	}
+	whenGoogleReady(() => {
+		if (!appState.googleInitialized) {
+			google.accounts.id.initialize({
+				client_id: PUBLIC_GOOGLE_CLIENT_ID,
+				callback: googleCallback
+			})
+			appState.googleInitialized = true
+		}
+	})
 
 	async function googleCallback(response: google.accounts.id.CredentialResponse) {
 		const res = await fetch('/auth/google', {

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

@@ -0,0 +1,189 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+vi.mock('$env/static/public', () => ({ PUBLIC_GOOGLE_CLIENT_ID: 'test-client-id' }))
+vi.mock('$lib/app-state.svelte', () => ({ appState: { googleInitialized: false, user: undefined } }))
+vi.mock('$lib/auth-redirect', () => ({ redirectAfterLogin: vi.fn() }))
+
+import { renderGoogleButton, initializeGoogleAccounts } from './google'
+import { appState } from '$lib/app-state.svelte'
+import { redirectAfterLogin } from '$lib/auth-redirect'
+
+const mockRedirectAfterLogin = vi.mocked(redirectAfterLogin)
+
+/** Build a minimal google.accounts.id mock and attach it to globalThis. */
+function installGoogleMock() {
+	const mock = {
+		initialize: vi.fn(),
+		renderButton: vi.fn()
+	}
+	;(globalThis as unknown as Record<string, unknown>).google = {
+		accounts: { id: mock }
+	}
+	return mock
+}
+
+function removeGoogleMock() {
+	delete (globalThis as unknown as Record<string, unknown>).google
+}
+
+describe('renderGoogleButton', () => {
+	beforeEach(() => {
+		document.body.innerHTML = ''
+		appState.googleInitialized = false
+	})
+
+	afterEach(() => {
+		removeGoogleMock()
+		vi.useRealTimers()
+	})
+
+	it('calls google.accounts.id.renderButton with the button element', () => {
+		const mock = installGoogleMock()
+		const btn = document.createElement('div')
+		btn.id = 'googleButton'
+		document.body.appendChild(btn)
+
+		renderGoogleButton()
+
+		expect(mock.renderButton).toHaveBeenCalledOnce()
+		expect(mock.renderButton).toHaveBeenCalledWith(btn, expect.objectContaining({
+			type: 'standard',
+			theme: 'outline',
+			size: 'large'
+		}))
+	})
+
+	it('falls back to 400 when the button has no width', () => {
+		const mock = installGoogleMock()
+		const btn = document.createElement('div')
+		btn.id = 'googleButton'
+		document.body.appendChild(btn)
+
+		renderGoogleButton()
+
+		const [, opts] = mock.renderButton.mock.calls[0]
+		expect(opts.width).toBe(400)
+	})
+
+	it('does nothing when the googleButton element is absent', () => {
+		const mock = installGoogleMock()
+
+		renderGoogleButton()
+
+		expect(mock.renderButton).not.toHaveBeenCalled()
+	})
+
+	it('polls until google is available, then renders', () => {
+		vi.useFakeTimers()
+		const btn = document.createElement('div')
+		btn.id = 'googleButton'
+		document.body.appendChild(btn)
+
+		renderGoogleButton() // google not yet defined
+
+		const mock = installGoogleMock()
+		vi.advanceTimersByTime(100) // advance past one poll interval
+
+		expect(mock.renderButton).toHaveBeenCalledOnce()
+	})
+
+	it('gives up polling after 10 seconds without throwing', () => {
+		vi.useFakeTimers()
+		// google is never installed
+
+		expect(() => {
+			renderGoogleButton()
+			vi.advanceTimersByTime(11_000)
+		}).not.toThrow()
+	})
+})
+
+describe('initializeGoogleAccounts', () => {
+	beforeEach(() => {
+		appState.googleInitialized = false
+		appState.user = undefined
+		mockRedirectAfterLogin.mockReset()
+		document.body.innerHTML = ''
+	})
+
+	afterEach(() => {
+		removeGoogleMock()
+		vi.useRealTimers()
+	})
+
+	it('calls google.accounts.id.initialize with the client id', () => {
+		const mock = installGoogleMock()
+
+		initializeGoogleAccounts()
+
+		expect(mock.initialize).toHaveBeenCalledOnce()
+		expect(mock.initialize).toHaveBeenCalledWith(expect.objectContaining({
+			client_id: 'test-client-id'
+		}))
+	})
+
+	it('sets appState.googleInitialized to true', () => {
+		installGoogleMock()
+
+		initializeGoogleAccounts()
+
+		expect(appState.googleInitialized).toBe(true)
+	})
+
+	it('does not call initialize a second time if already initialized', () => {
+		const mock = installGoogleMock()
+		appState.googleInitialized = true
+
+		initializeGoogleAccounts()
+
+		expect(mock.initialize).not.toHaveBeenCalled()
+	})
+
+	it('callback POSTs the credential token to /auth/google and updates appState', async () => {
+		const mock = installGoogleMock()
+		const user = { id: 1, role: 'admin' }
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+			new Response(JSON.stringify({ user }), { status: 200 })
+		)
+
+		initializeGoogleAccounts()
+
+		// Extract and invoke the registered callback
+		const { callback } = mock.initialize.mock.calls[0][0]
+		await callback({ credential: 'test-credential' })
+
+		expect(fetch).toHaveBeenCalledWith('/auth/google', expect.objectContaining({
+			method: 'POST',
+			body: JSON.stringify({ token: 'test-credential' })
+		}))
+		expect(appState.user).toEqual(user)
+		expect(mockRedirectAfterLogin).toHaveBeenCalledWith(user)
+	})
+
+	it('callback does not update state when the response is not ok', async () => {
+		const mock = installGoogleMock()
+		vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+			new Response(null, { status: 401 })
+		)
+
+		initializeGoogleAccounts()
+
+		const { callback } = mock.initialize.mock.calls[0][0]
+		await callback({ credential: 'bad-credential' })
+
+		expect(appState.user).toBeUndefined()
+		expect(mockRedirectAfterLogin).not.toHaveBeenCalled()
+	})
+
+	it('polls until google is available, then initializes', () => {
+		vi.useFakeTimers()
+
+		initializeGoogleAccounts() // google not yet defined
+
+		const mock = installGoogleMock()
+		vi.advanceTimersByTime(100)
+
+		expect(mock.initialize).toHaveBeenCalledOnce()
+	})
+})