sveltekit-auth-example 5.0.3 → 5.1.0

package/src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import { loginSession, toast } from '../stores'
 	import { initializeGoogleAccounts } from '$lib/google'
 
-	import 'bootstrap/scss/bootstrap.scss' // preferred way to load Bootstrap SCSS for hot module reloading
+	import './layout.css'
 
 	interface Props {
 		data: LayoutServerData
@@ -14,167 +14,118 @@
 
 	let { data, children }: Props = $props()
 
-	// If returning from different website, runs once (as it's an SPA) to restore user session if session cookie is still valid
-	const { user } = data
-	$loginSession = user
+	$effect(() => {
+		$loginSession = data.user
+	})
 
-	let Toast: any
+	let navOpen = $state(false)
+	let dropdownOpen = $state(false)
 
 	beforeNavigate(() => {
-		let expirationDate = $loginSession?.expires ? new Date($loginSession.expires) : undefined
-
+		navOpen = false
+		dropdownOpen = false
+		const expirationDate = $loginSession?.expires ? new Date($loginSession.expires) : undefined
 		if (expirationDate && expirationDate < new Date()) {
 			console.log('Login session expired.')
 			$loginSession = null
 		}
 	})
 
-	onMount(async () => {
+	onMount(() => {
 		initializeGoogleAccounts()
-
-		await import('bootstrap/js/dist/collapse') // lots of ways to load Bootstrap but prefer this approach to avoid SSR issues
-		await import('bootstrap/js/dist/dropdown')
-		Toast = (await import('bootstrap/js/dist/toast')).default
-
 		if (!$loginSession) google.accounts.id.prompt()
 	})
 
 	async function logout(event: MouseEvent) {
 		event.preventDefault()
-		// Request server delete httpOnly cookie called loginSession
-		const url = '/auth/logout'
-		const res = await fetch(url, {
-			method: 'POST'
-		})
+		const res = await fetch('/auth/logout', { method: 'POST' })
 		if (res.ok) {
-			loginSession.set(undefined) // delete loginSession.user from
+			loginSession.set(undefined)
 			goto('/login')
 		} else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
 	}
-
-	const openToast = (open: boolean) => {
-		if (open) {
-			const toastDiv = document.getElementById('authToast') as HTMLDivElement
-			const t = new Toast(toastDiv)
-			t.show()
-		}
-	}
-
-	$effect(() => {
-		openToast($toast.isOpen)
-	})
 </script>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-	<div class="container">
-		<a class="navbar-brand" href="/">SvelteKit-Auth-Example</a>
+<nav class="tw:bg-gray-100 tw:border-b tw:border-gray-200">
+	<div class="tw:mx-auto tw:max-w-5xl tw:px-4 tw:flex tw:items-center tw:justify-between tw:h-14">
+		<a class="tw:font-semibold tw:text-gray-800 tw:no-underline" href="/">SvelteKit-Auth-Example</a>
+
+		<!-- Mobile toggle -->
 		<button
-			class="navbar-toggler"
-			type="button"
-			data-bs-toggle="collapse"
-			data-bs-target="#navbarMain"
-			aria-controls="navbarMain"
-			aria-expanded="false"
+			class="tw:sm:hidden tw:p-2 tw:rounded tw:text-gray-600 hover:tw:bg-gray-200"
 			aria-label="Toggle navigation"
+			onclick={() => (navOpen = !navOpen)}
 		>
-			<span class="navbar-toggler-icon"></span>
+			<svg xmlns="http://www.w3.org/2000/svg" class="tw:h-5 tw:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+			</svg>
 		</button>
-		<div class="collapse navbar-collapse" id="navbarMain">
-			<ul class="navbar-nav me-5">
-				<li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
-				<li class="nav-item"><a class="nav-link" href="/info">Info</a></li>
 
-				{#if $loginSession}
-					{#if $loginSession.role == 'admin'}
-						<li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
-					{/if}
-					{#if $loginSession.role != 'student'}
-						<li class="nav-item"><a class="nav-link" href="/teachers">Teachers</a></li>
-					{/if}
-				{/if}
-			</ul>
-			<ul class="navbar-nav">
-				{#if $loginSession}
-					<li class="nav-item dropdown">
-						<a
-							class="nav-link dropdown-toggle"
-							href={'#'}
-							role="button"
-							data-bs-toggle="dropdown"
-							aria-expanded="false"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="16"
-								height="16"
-								fill="currentColor"
-								class="avatar"
-								viewBox="0 0 16 16"
-							>
-								<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
-								<path
-									fill-rule="evenodd"
-									d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
-								/>
-							</svg>
-							{$loginSession.firstName}
-						</a>
-						<ul class="dropdown-menu">
-							<li>
-								<a class="dropdown-item" href="/profile">Profile</a>
-							</li>
-							<li>
-								<a
-									onclick={logout}
-									class="dropdown-item"
-									class:d-none={!$loginSession || $loginSession.id === 0}
-									href={'#'}>Logout</a
-								>
-							</li>
+		<!-- Nav links -->
+		<div class="tw:hidden tw:sm:flex tw:items-center tw:gap-6 {navOpen ? '!tw:flex tw:flex-col tw:absolute tw:top-14 tw:left-0 tw:right-0 tw:bg-gray-100 tw:p-4 tw:border-b tw:border-gray-200' : ''}">
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/">Home</a>
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/info">Info</a>
+
+			{#if $loginSession?.role === 'admin'}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/admin">Admin</a>
+			{/if}
+			{#if $loginSession && $loginSession.role !== 'student'}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/teachers">Teachers</a>
+			{/if}
+
+			{#if $loginSession}
+				<!-- User dropdown -->
+				<div class="tw:relative">
+					<button
+						class="tw:flex tw:items-center tw:gap-1 tw:text-sm tw:text-gray-700 hover:tw:text-gray-900 tw:bg-transparent tw:border-0 tw:cursor-pointer"
+						onclick={() => (dropdownOpen = !dropdownOpen)}
+						aria-expanded={dropdownOpen}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="tw:relative tw:top-[-1.5px]">
+							<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
+							<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
+						</svg>
+						{$loginSession.firstName}
+						<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+						</svg>
+					</button>
+					{#if dropdownOpen}
+						<ul class="tw:absolute tw:right-0 tw:mt-1 tw:w-36 tw:rounded tw:border tw:border-gray-200 tw:bg-white tw:shadow-md tw:py-1 tw:z-50 tw:list-none tw:p-0">
+							<li><a class="tw:block tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:bg-gray-100" href="/profile">Profile</a></li>
+							{#if $loginSession.id !== 0}
+								<li><a onclick={logout} class="tw:block tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:bg-gray-100" href="#">Logout</a></li>
+							{/if}
 						</ul>
-					</li>
-				{:else}
-					<li class="nav-item">
-						<a class="nav-link" href="/login">Login</a>
-					</li>
-				{/if}
-			</ul>
+					{/if}
+				</div>
+			{:else}
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/login">Login</a>
+			{/if}
 		</div>
 	</div>
 </nav>
 
-<main class="container">
+<main class="tw:mx-auto tw:max-w-5xl tw:px-4 tw:py-6">
 	{@render children?.()}
+</main>
 
+<!-- Toast notification -->
+{#if $toast.isOpen}
 	<div
-		id="authToast"
-		class="toast position-fixed top-0 end-0 m-3"
 		role="alert"
 		aria-live="assertive"
 		aria-atomic="true"
+		class="tw:fixed tw:top-4 tw:right-4 tw:z-50 tw:min-w-64 tw:rounded tw:shadow-lg tw:border tw:border-gray-200 tw:bg-white tw:overflow-hidden"
 	>
-		<div class="toast-header bg-primary text-white">
-			<strong class="me-auto">{$toast.title}</strong>
-			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-		</div>
-		<div class="toast-body">
-			{$toast.body}
+		<div class="tw:flex tw:items-center tw:justify-between tw:bg-blue-600 tw:px-4 tw:py-2">
+			<strong class="tw:text-white tw:text-sm">{$toast.title}</strong>
+			<button
+				type="button"
+				aria-label="Close"
+				class="tw:text-white tw:bg-transparent tw:border-0 tw:cursor-pointer tw:text-lg tw:leading-none"
+				onclick={() => ($toast = { ...$toast, isOpen: false })}>&times;</button>
 		</div>
+		<div class="tw:px-4 tw:py-3 tw:text-sm">{$toast.body}</div>
 	</div>
-</main>
-
-<style global>
-	* {
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-
-	.toast {
-		z-index: 9999;
-	}
-
-	.avatar {
-		position: relative;
-		top: -1.5px;
-	}
-</style>
+{/if}

package/src/routes/auth/reset/[token]/+page.svelte

@@ -15,6 +15,8 @@
 	let password = $state('')
 	let confirmPassword: HTMLInputElement | undefined = $state()
 	let message = $state('')
+	let submitted = $state(false)
+	let passwordMismatch = $state(false)
 
 	onMount(() => {
 		focusedField?.focus()
@@ -27,10 +29,13 @@
 
 	const resetPassword = async () => {
 		message = ''
+		submitted = false
+		passwordMismatch = false
 		const form = document.getElementById('reset') as HTMLFormElement
 
 		if (!passwordMatch()) {
-			confirmPassword?.classList.add('is-invalid')
+			passwordMismatch = true
+			return
 		}
 
 		if (form.checkValidity()) {
@@ -60,7 +65,7 @@
 				message = body.message
 			}
 		} else {
-			form.classList.add('was-validated')
+			submitted = true
 			focusOnFirstError(form)
 		}
 	}
@@ -70,62 +75,65 @@
 	<title>New Password</title>
 </svelte:head>
 
-<div class="d-flex justify-content-center mt-5">
-	<div class="card login">
-		<div class="card-body">
-			<form id="reset" autocomplete="on" novalidate>
-				<h4><strong>New Password</strong></h4>
-				<p>Please provide a new password.</p>
-				<div class="mb-3">
-					<label class="form-label" for="password">Password</label>
-					<input
-						class="form-control"
-						id="password"
-						type="password"
-						bind:value={password}
-						bind:this={focusedField}
-						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="passwordConfirm">Password (retype)</label>
-					<input
-						class="form-control"
-						id="passwordConfirm"
-						type="password"
-						required={!!password}
-						bind:this={confirmPassword}
-						minlength="8"
-						maxlength="80"
-						placeholder="Password (again)"
-						autocomplete="new-password"
-					/>
-					<div class="invalid-feedback">Passwords must match</div>
-				</div>
-
-				{#if message}
-					<p class="text-danger">{message}</p>
-				{/if}
-				<div class="d-grid gap-2">
-					<button onclick={resetPassword} type="button" class="btn btn-primary btn-lg"
-						>Send Email</button
-					>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
-
-<style>
-	.card-body {
-		width: 25rem;
-	}
-</style>
+<form
+	id="reset"
+	autocomplete="on"
+	novalidate
+	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
+	class:submitted
+>
+	<h4><strong>New Password</strong></h4>
+	<p>Please provide a new password.</p>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="password">
+		Password
+		<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"
+			type="password"
+			bind:value={password}
+			bind:this={focusedField}
+			required
+			minlength="8"
+			maxlength="80"
+			placeholder="Password"
+			autocomplete="new-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>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="passwordConfirm">
+		Password (retype)
+		<input
+			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:tw:border-red-500={passwordMismatch}
+			id="passwordConfirm"
+			type="password"
+			required={!!password}
+			bind:this={confirmPassword}
+			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>
+
+	{#if message}
+		<p class="tw:text-red-600">{message}</p>
+	{/if}
+
+	<button
+		onclick={resetPassword}
+		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"
+	>
+		Reset Password
+	</button>
+</form>
+

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

@@ -7,6 +7,7 @@
 	let focusedField: HTMLInputElement | undefined = $state()
 	let email: string = $state('')
 	let message: string = $state('')
+	let submitted = $state(false)
 
 	onMount(() => {
 		focusedField?.focus()
@@ -38,7 +39,7 @@
 				return goto('/')
 			}
 		} else {
-			form.classList.add('was-validated')
+			submitted = true
 			focusOnFirstError(form)
 		}
 	}
@@ -48,41 +49,42 @@
 	<title>Forgot Password</title>
 </svelte:head>
 
-<div class="d-flex justify-content-center mt-5">
-	<div class="card">
-		<div class="card-body">
-			<form id="forgot" autocomplete="on" novalidate>
-				<h4><strong>Forgot password</strong></h4>
-				<p>Hey, you're human. We get it.</p>
-				<div class="mb-3">
-					<label class="form-label" for="email">Email</label>
-					<input
-						bind:this={focusedField}
-						bind:value={email}
-						type="email"
-						id="email"
-						class="form-control"
-						required
-						placeholder="Email"
-						autocomplete="email"
-					/>
-					<div class="invalid-feedback">Email address required</div>
-				</div>
-				{#if message}
-					<p class="text-danger">{message}</p>
-				{/if}
-				<div class="d-grid gap-2">
-					<button onclick={sendPasswordReset} type="button" class="btn btn-primary btn-lg"
-						>Send Email</button
-					>
-				</div>
-			</form>
-		</div>
-	</div>
-</div>
+<form
+	id="forgot"
+	autocomplete="on"
+	novalidate
+	class="tw:mx-auto tw:mt-20 tw:max-w-sm tw:space-y-4"
+	class:submitted
+>
+	<h4><strong>Forgot password</strong></h4>
+	<p>Hey, you're human. We get it.</p>
+
+	<label class="tw:block tw:text-sm tw:font-medium" for="email">
+		Email
+		<input
+			bind:this={focusedField}
+			bind:value={email}
+			type="email"
+			id="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"
+			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>
+	</label>
+
+	{#if message}
+		<p class="tw:text-red-600">{message}</p>
+	{/if}
+
+	<button
+		onclick={sendPasswordReset}
+		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"
+	>
+		Send Email
+	</button>
+</form>
+
 
-<style>
-	.card-body {
-		width: 25rem;
-	}
-</style>

package/src/routes/layout.css

@@ -0,0 +1,17 @@
+@import 'tailwindcss' prefix(tw);
+
+@theme {
+	--font-sans: 'Avenir Next', 'Avenir', 'Myriad Pro', 'Helvetica Neue', sans-serif;
+}
+
+@layer base {
+	* {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	html,
+	:host {
+		@apply tw:font-sans tw:text-gray-800;
+	}
+}