sveltekit-auth-example 5.1.0 → 5.1.2

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

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
-	import { goto } from '$app/navigation'
-	import { page } from '$app/state'
-	import { loginSession } from '../../stores'
+	import { appState } from '$lib/app-state.svelte'
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
+	import { redirectAfterLogin } from '$lib/auth-redirect'
 
 	let focusedField: HTMLInputElement | undefined = $state()
+	let formEl: HTMLFormElement | undefined = $state()
 	let message = $state('')
 	let submitted = $state(false)
+	let loading = $state(false)
 	const credentials: Credentials = $state({
 		email: '',
 		password: ''
@@ -17,7 +18,7 @@
 	async function login() {
 		message = ''
 		submitted = false
-		const form = document.getElementById('signIn') as HTMLFormElement
+		const form = formEl!
 
 		if (form.checkValidity()) {
 			try {
@@ -37,11 +38,11 @@
 	onMount(() => {
 		initializeGoogleAccounts()
 		renderGoogleButton()
-
 		focusedField?.focus()
 	})
 
 	async function loginLocal(credentials: Credentials) {
+		loading = true
 		try {
 			const res = await fetch('/auth/login', {
 				method: 'POST',
@@ -52,20 +53,8 @@
 			})
 			const fromEndpoint = await res.json()
 			if (res.ok) {
-				loginSession.set(fromEndpoint.user)
-				const { role } = fromEndpoint.user
-				const referrer = page.url.searchParams.get('referrer')
-				if (referrer) goto(referrer)
-				switch (role) {
-					case 'teacher':
-						goto('/teachers')
-						break
-					case 'admin':
-						goto('/admin')
-						break
-					default:
-						goto('/')
-				}
+				appState.user = fromEndpoint.user
+				redirectAfterLogin(fromEndpoint.user)
 			} else {
 				throw new Error(fromEndpoint.message)
 			}
@@ -74,6 +63,8 @@
 				console.error('Login error', err)
 				message = err.message
 			}
+		} finally {
+			loading = false
 		}
 	}
 </script>
@@ -84,16 +75,30 @@
 </svelte:head>
 
 <form
-	id="signIn"
+	bind:this={formEl}
 	autocomplete="on"
 	novalidate
 	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
 	class:submitted
+	onsubmit={(e) => { e.preventDefault(); login() }}
 >
-	<h4><strong>Sign In</strong></h4>
+	<h4>Sign In</h4>
 	<p>Welcome back.</p>
 
-	<div id="googleButton"></div>
+	<div class="tw:group tw:relative tw:w-full">
+		<!-- Real Google button: invisible but receives clicks -->
+		<div id="googleButton" class="tw:opacity-0 tw:w-full"></div>
+		<!-- Visual overlay: looks good, no pointer events -->
+		<div class="tw:pointer-events-none tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center tw:gap-3 tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:group-hover:bg-gray-50 tw:text-sm tw:font-medium tw:text-gray-700 tw:dark:bg-gray-800 tw:dark:group-hover:bg-gray-700 tw:dark:border-gray-600 tw:dark:text-gray-200">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+				<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+				<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+				<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
+				<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+			</svg>
+			Sign in with Google
+		</div>
+	</div>
 
 	<div class="tw:flex tw:items-center tw:gap-2 tw:text-gray-400 tw:text-sm">
 		<span class="tw:flex-1 tw:border-t tw:border-gray-300"></span>
@@ -104,21 +109,26 @@
 	<label class="tw:block tw:text-sm tw:font-medium" for="email">
 		Email
 		<input
+			id="email"
 			type="email"
-			class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			class="form-input-validated"
 			bind:this={focusedField}
 			bind:value={credentials.email}
 			required
 			placeholder="Email"
 			autocomplete="email"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Email address required</span>
+		<span class="form-error">Email address required</span>
 	</label>
 
-	<label class="tw:block tw:text-sm tw:font-medium" for="password">
-		Password
+	<div class="tw:block tw:text-sm tw:font-medium">
+		<div class="tw:flex tw:justify-between tw:items-baseline">
+			<label for="password">Password</label>
+			<a href="/forgot" class="tw:text-xs tw:text-gray-500 tw:font-normal">Forgot password?</a>
+		</div>
 		<input
-			class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			id="password"
+			class="form-input-validated"
 			type="password"
 			bind:value={credentials.password}
 			required
@@ -127,20 +137,15 @@
 			placeholder="Password"
 			autocomplete="current-password"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Password with 8 chars or more required</span>
-		<span class="tw:text-xs tw:text-gray-500">
-			Minimum 8 characters, one capital letter, one number, one special character.
-		</span>
-	</label>
-
-	<a href="/forgot" class="tw:text-sm tw:text-gray-500">Forgot Password?</a>
+		<span class="form-error">Password with 8 chars or more required</span>
+	</div>
 
 	{#if message}
 		<p class="tw:text-red-600">{message}</p>
 	{/if}
 
-	<button onclick={login} type="button" class="tw:w-full tw:rounded tw:bg-blue-600 tw:px-4 tw:py-2 tw:font-semibold tw:text-white hover:tw:bg-blue-700">
-		Sign In
+	<button type="submit" class="btn-primary" disabled={loading}>
+		{loading ? 'Signing in...' : 'Sign In'}
 	</button>
 
 	<p class="tw:text-center tw:text-sm">

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

@@ -1,21 +1,28 @@
 <script lang="ts">
 	import type { PageData } from './$types'
+	import { untrack } from 'svelte'
 	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
 	import { focusOnFirstError } from '$lib/focus'
-	import { loginSession } from '../../stores'
+	import { appState } from '$lib/app-state.svelte'
 
 	interface Props {
 		data: PageData
 	}
 
 	let { data }: Props = $props()
-	const { user }: { user: User } = $state(data)
+	// untrack: intentionally take a one-time snapshot of server data for local form editing
+	let user: User = $state(untrack(() => ({ ...data.user })))
+
+	const passwordPattern = '(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}'
 
 	let focusedField: HTMLInputElement | undefined = $state()
 	let message = $state('')
 	let confirmPassword: HTMLInputElement | undefined = $state()
 	let submitted = $state(false)
 	let passwordMismatch = $state(false)
+	let loading = $state(false)
+	let deleting = $state(false)
 
 	onMount(() => {
 		focusedField?.focus()
@@ -33,23 +40,44 @@
 		}
 
 		if (form.checkValidity()) {
-			const url = '/api/v1/user'
-			const res = await fetch(url, {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify(user)
-			})
-			const reply = await res.json()
-			message = reply.message
-			$loginSession = JSON.parse(JSON.stringify(user)) // update loginSession store
+			loading = true
+			try {
+				const url = '/api/v1/user'
+				const res = await fetch(url, {
+					method: 'PUT',
+					headers: {
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify(user)
+				})
+				const reply = await res.json()
+				message = reply.message
+				appState.user = JSON.parse(JSON.stringify(user)) // update app state so navbar reflects changes
+			} finally {
+				loading = false
+			}
 		} else {
 			submitted = true
 			focusOnFirstError(form)
 		}
 	}
 
+	async function deleteAccount() {
+		if (!confirm('Are you sure you want to permanently delete your account? This cannot be undone.')) return
+		deleting = true
+		try {
+			const res = await fetch('/api/v1/user', { method: 'DELETE' })
+			if (res.ok) {
+				appState.user = undefined
+				goto('/login')
+			} else {
+				message = 'Failed to delete account. Please try again.'
+			}
+		} finally {
+			deleting = false
+		}
+	}
+
 	const passwordMatch = () => {
 		if (!user.password) user.password = ''
 		return user.password == confirmPassword?.value
@@ -66,8 +94,9 @@
 	novalidate
 	class="tw:mx-auto tw:my-8 tw:max-w-sm tw:space-y-4"
 	class:submitted
+	onsubmit={(e) => { e.preventDefault(); update() }}
 >
-	<h4><strong>Profile</strong></h4>
+	<h4>Profile</h4>
 	<p>Update your information.</p>
 
 	{#if !user?.email?.includes('gmail.com')}
@@ -76,14 +105,14 @@
 			<input
 				bind:this={focusedField}
 				type="email"
-				class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+				class="form-input-validated"
 				bind:value={user.email}
 				required
 				placeholder="Email"
 				id="email"
 				autocomplete="email"
 			/>
-			<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Email address required</span>
+			<span class="form-error">Email address required</span>
 		</label>
 
 		<label class="tw:block tw:text-sm tw:font-medium" for="password">
@@ -91,13 +120,14 @@
 			<input
 				type="password"
 				id="password"
-				class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+				class="form-input-validated"
 				bind:value={user.password}
 				minlength="8"
 				maxlength="80"
+				pattern={passwordPattern}
 				placeholder="Password"
 			/>
-			<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Password with 8 chars or more required</span>
+			<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>
@@ -108,7 +138,7 @@
 			<input
 				type="password"
 				id="confirmPassword"
-				class="tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500"
+				class="form-input"
 				class:tw:border-red-500={passwordMismatch}
 				bind:this={confirmPassword}
 				required={!!user.password}
@@ -120,9 +150,6 @@
 			{#if passwordMismatch}
 				<span class="tw:text-xs tw:text-red-600 tw:mt-0.5">Passwords must match</span>
 			{/if}
-			<span class="tw:text-xs tw:text-gray-500">
-				Minimum 8 characters, one capital letter, one number, one special character.
-			</span>
 		</label>
 	{/if}
 
@@ -131,26 +158,26 @@
 		<input
 			bind:this={focusedField}
 			bind:value={user.firstName}
-			class="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			class="form-input-validated"
 			id="firstName"
 			required
 			placeholder="First name"
 			autocomplete="given-name"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">First name required</span>
+		<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="tw:peer tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500 tw:[.submitted_&]:invalid:border-red-500"
+			class="form-input-validated"
 			id="lastName"
 			required
 			placeholder="Last name"
 			autocomplete="family-name"
 		/>
-		<span class="tw:hidden tw:text-xs tw:text-red-600 tw:mt-0.5 tw:[.submitted_&]:peer-invalid:block">Last name required</span>
+		<span class="form-error">Last name required</span>
 	</label>
 
 	<label class="tw:block tw:text-sm tw:font-medium" for="phone">
@@ -159,7 +186,7 @@
 			type="tel"
 			bind:value={user.phone}
 			id="phone"
-			class="tw:mt-1 tw:block tw:w-full tw:rounded tw:border tw:border-gray-300 tw:px-3 tw:py-1.5 tw:text-sm focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-blue-500"
+			class="form-input"
 			placeholder="Phone"
 			autocomplete="tel-local"
 		/>
@@ -170,10 +197,22 @@
 	{/if}
 
 	<button
-		onclick={update}
-		type="button"
-		class="tw:w-full tw:rounded tw:bg-blue-600 tw:px-4 tw:py-2 tw:font-semibold tw:text-white hover:tw:bg-blue-700"
+		type="submit"
+		class="btn-primary"
+		disabled={loading}
 	>
-		Update
+		{loading ? 'Updating...' : 'Update'}
 	</button>
+
+	<div class="tw:border-t tw:border-red-200 tw:pt-4 tw:mt-4">
+		<p class="tw:text-sm tw:text-gray-500 tw:mb-2">Danger zone</p>
+		<button
+			type="button"
+			class="tw:w-full tw:rounded tw:border tw:border-red-600 tw:bg-red-600 tw:px-4 tw:py-2 tw:text-sm tw:font-medium tw:text-white tw:cursor-pointer hover:tw:bg-red-700 hover:tw:border-red-700 disabled:tw:opacity-50 disabled:tw:cursor-not-allowed"
+			disabled={deleting}
+			onclick={deleteAccount}
+		>
+			{deleting ? 'Deleting...' : 'Delete my account'}
+		</button>
+	</div>
 </form>