sveltekit-auth-example 5.0.4 → 5.1.1

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import { goto } from '$app/navigation'
-	import { loginSession } from '../../stores'
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
 
 	let focusedField: HTMLInputElement | undefined = $state()
+	// Pattern stored as a variable to avoid Svelte parsing `{8,}` as a template expression
+	const passwordPattern = '(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}'
 
 	let user: User = $state({
 		id: 0,
@@ -18,13 +18,21 @@
 	})
 	let confirmPassword: HTMLInputElement | undefined = $state()
 	let message = $state('')
+	let submitted = $state(false)
+	let passwordMismatch = $state(false)
+	let loading = $state(false)
+	let emailVerificationSent = $state(false)
+
+	let formEl: HTMLFormElement | undefined = $state()
 
 	async function register() {
-		const form = document.getElementById('register') as HTMLFormElement
+		const form = formEl!
 		message = ''
+		submitted = false
+		passwordMismatch = false
 
 		if (!passwordMatch()) {
-			confirmPassword?.classList.add('is-invalid')
+			passwordMismatch = true
 			return
 		}
 
@@ -38,7 +46,7 @@
 				}
 			}
 		} else {
-			form.classList.add('was-validated')
+			submitted = true
 			focusOnFirstError(form)
 		}
 	}
@@ -51,6 +59,7 @@
 	})
 
 	async function registerLocal(user: User) {
+		loading = true
 		try {
 			const res = await fetch('/auth/register', {
 				method: 'POST',
@@ -59,22 +68,23 @@
 					'Content-Type': 'application/json'
 				}
 			})
+			const fromEndpoint = await res.json()
 			if (!res.ok) {
-				if (res.status == 401)
-					// user already existed and passwords didn't match (otherwise, we login the user)
-					throw new Error('Sorry, that username is already in use.')
-				throw new Error(res.statusText) // should only occur if there's a database error
+				if (res.status == 409)
+					throw new Error('Sorry, that email address is already in use.')
+				throw new Error(fromEndpoint.message || res.statusText)
+			}
+			if (fromEndpoint.emailVerification) {
+				emailVerificationSent = true
+				return
 			}
-
-			// res.ok
-			const fromEndpoint = await res.json()
-			loginSession.set(fromEndpoint.user) // update store so user is logged in
-			goto('/')
 		} catch (err) {
 			console.error('Register error', err)
 			if (err instanceof Error) {
 				throw new Error(err.message)
 			}
+		} finally {
+			loading = false
 		}
 	}
 
@@ -89,116 +99,128 @@
 	<title>Register</title>
 </svelte:head>
 
-<div class="d-flex justify-content-center my-3">
-	<div class="card login">
-		<div class="card-body">
-			<h4><strong>Register</strong></h4>
-			<p>Welcome to our community.</p>
-			{#if user}
-				<form id="register" autocomplete="on" novalidate class="mt-3">
-					<div class="mb-3">
-						<div id="googleButton"></div>
-					</div>
-					<div class="mb-3">
-						<label class="form-label" for="email">Email</label>
-						<input
-							bind:this={focusedField}
-							type="email"
-							class="form-control"
-							bind:value={user.email}
-							required
-							placeholder="Email"
-							id="email"
-							autocomplete="email"
-						/>
-						<div class="invalid-feedback">Email address required</div>
-					</div>
-					<div class="mb-3">
-						<label class="form-label" for="password">Password</label>
-						<input
-							type="password"
-							id="password"
-							class="form-control"
-							bind:value={user.password}
-							required
-							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="password">Confirm password</label>
-						<input
-							type="password"
-							id="password"
-							class="form-control"
-							bind:this={confirmPassword}
-							required
-							minlength="8"
-							maxlength="80"
-							placeholder="Password (again)"
-							autocomplete="new-password"
-						/>
-						<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="firstName">First name</label>
-						<input
-							bind:value={user.firstName}
-							class="form-control"
-							id="firstName"
-							placeholder="First name"
-							required
-							autocomplete="given-name"
-						/>
-						<div class="invalid-feedback">First name required</div>
-					</div>
-					<div class="mb-3">
-						<label class="form-label" for="lastName">Last name</label>
-						<input
-							bind:value={user.lastName}
-							class="form-control"
-							id="lastName"
-							placeholder="Last name"
-							required
-							autocomplete="family-name"
-						/>
-						<div class="invalid-feedback">Last name required</div>
-					</div>
-					<div class="mb-3">
-						<label class="form-label" for="phone">Phone</label>
-						<input
-							type="tel"
-							bind:value={user.phone}
-							id="phone"
-							class="form-control"
-							placeholder="Phone"
-							autocomplete="tel-local"
-						/>
-					</div>
-
-					{#if message}
-						<p class="text-danger">{message}</p>
-					{/if}
-
-					<button onclick={register} type="button" class="btn btn-primary btn-lg">Register</button>
-				</form>
-			{/if}
-		</div>
+{#if emailVerificationSent}
+	<div class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4">
+		<h4>Check your email</h4>
+		<p>We've sent a verification link to your email address. Please check your inbox (and junk folder) to complete your registration.</p>
+		<a href="/login" class="btn-primary tw:block tw:text-center tw:no-underline">Back to login</a>
 	</div>
-</div>
+{:else}
+<form
+	bind:this={formEl}
+	autocomplete="on"
+	novalidate
+	class="tw:mx-auto tw:my-8 tw:max-w-sm tw:space-y-4"
+	class:submitted
+	onsubmit={(e) => { e.preventDefault(); register() }}
+>
+	<h4>Register</h4>
+		<p>Welcome to our community.</p>
 
-<style>
-	.card-body {
-		width: 25rem;
-	}
-</style>
+		<div id="googleButton" class="tw:w-full"></div>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="email">
+		Email
+		<input
+			bind:this={focusedField}
+			type="email"
+			class="form-input-validated"
+			bind:value={user.email}
+			required
+			placeholder="Email"
+			id="email"
+			autocomplete="email"
+		/>
+		<span class="form-error">Email address required</span>
+	</label>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="password">
+		Password
+		<input
+			type="password"
+			id="password"
+			class="form-input-validated"
+			bind:value={user.password}
+			required
+			minlength="8"
+			maxlength="80"
+			pattern={passwordPattern}
+			placeholder="Password"
+			autocomplete="new-password"
+		/>
+		<span class="form-error">Must be 8+ characters with a capital letter, number, and special character</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="confirmPassword">
+		Confirm password
+		<input
+			type="password"
+			id="confirmPassword"
+			class="form-input"
+			class:tw:border-red-500={passwordMismatch}
+			bind:this={confirmPassword}
+			required
+			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>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="firstName">
+		First name
+		<input
+			bind:value={user.firstName}
+			class="form-input-validated"
+			id="firstName"
+			placeholder="First name"
+			required
+			autocomplete="given-name"
+		/>
+		<span class="form-error">First name required</span>
+	</label>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="lastName">
+		Last name
+		<input
+			bind:value={user.lastName}
+			class="form-input-validated"
+			id="lastName"
+			placeholder="Last name"
+			required
+			autocomplete="family-name"
+		/>
+		<span class="form-error">Last name required</span>
+	</label>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="phone">
+		Phone
+		<input
+			type="tel"
+			bind:value={user.phone}
+			id="phone"
+			class="form-input"
+			placeholder="Phone"
+			autocomplete="tel-local"
+		/>
+	</label>
+
+	{#if message}
+		<p class="tw:text-red-600">{message}</p>
+	{/if}
+
+	<button
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
+	>
+		{loading ? 'Creating account...' : 'Register'}
+	</button>
+</form>
+{/if}

package/src/service-worker.ts

@@ -40,13 +40,23 @@ sw.addEventListener('fetch', event => {
 	// ignore POST requests etc
 	if (event.request.method !== 'GET') return
 
+	const url = new URL(event.request.url)
+
+	// Don't intercept API, auth, or non-HTTP requests — let them go straight to the network
+	const bypass =
+		url.pathname.startsWith('/api') ||
+		url.pathname.startsWith('/auth') ||
+		(url.protocol !== 'http:' && url.protocol !== 'https:')
+
+	if (bypass) return
+
 	async function respond() {
-		const url = new URL(event.request.url)
 		const cache = await caches.open(CACHE)
 
 		// `build`/`files` can always be served from the cache
 		if (ASSETS.includes(url.pathname)) {
-			return cache.match(url.pathname)
+			const response = await cache.match(url.pathname)
+			if (response) return response
 		}
 
 		// for everything else, try the network first, but
@@ -54,13 +64,21 @@ sw.addEventListener('fetch', event => {
 		try {
 			const response = await fetch(event.request)
 
+			// if we're offline, fetch can return a value that is not a Response
+			// instead of throwing - and we can't pass this non-Response to respondWith
+			if (!(response instanceof Response)) {
+				throw new Error('invalid response from fetch')
+			}
+
 			if (response.status === 200) {
 				cache.put(event.request, response.clone())
 			}
 
 			return response
-		} catch {
-			return cache.match(event.request)
+		} catch (err) {
+			const response = await cache.match(event.request)
+			if (response) return response
+			throw err
 		}
 	}
 

package/svelte.config.js

@@ -15,7 +15,19 @@ if (!production) baseCsp.push('ws://localhost:3000')
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		{
+			name: 'announcer-styles-to-tailwind',
+			markup: ({ content: code }) => {
+				code = code.replace(
+					/(<div id="svelte-announcer"[^>]*?)\s+style="[^"]*"/,
+					'$1 class="tw:absolute tw:left-0 tw:top-0 tw:[clip:rect(0,0,0,0)] tw:[clip-path:inset(50%)] tw:overflow-hidden tw:whitespace-nowrap tw:w-px tw:h-px"'
+				)
+				return { code }
+			}
+		}
+	],
 
 	kit: {
 		adapter: adapter({

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,
@@ -8,6 +9,7 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"moduleResolution": "bundler"
 	}
 }

package/vite.config.ts

@@ -1,11 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
 	build: {
 		sourcemap: true
 	},
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), tailwindcss()],
+	test: {
+		include: ['src/**/*.unit.test.ts', 'tests/**/*.unit.test.ts']
+	},
 	server: {
 		host: 'localhost',
 		port: 3000,