sveltekit-auth-example 2.1.0 → 5.0.1

package/CHANGELOG.md

@@ -2,29 +2,41 @@
 
 - Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 5.0.1
+- Migrate to Svelte 5 runes mode
+- Format with prettier
+- Bump dependencies
+
 # 2.1.0
+
 - Bump svelte, @sveltejs/kit, @sveltejs/adapter-node, @sveltejs/vite-plugin-svelte, @sendgrid/mail, pg, google-auth-library, @eslint/js, yarn, @types/google.accounts, @types/jsonwebtoken, @types/pg, eslint, eslint-plugin-svelte, globals, prettier-plugin-svelte, sass, svelte-check, tslib, typescript, typescript-eslint, vite, vitest
 - Change Typescript casting to use "as" since the Svelte 5 has an issue with angle brackets style
 
 # 2.0.8
+
 - Bump svelte, @sveltejs/kit, @sveltejs/vite-plugin-svelte, google-auth-library and other devDependencies
 
 # 2.0.7
+
 - Bump pg, google-auth-library, svelte, svelte-check, yarn, typescript-eslint, @types/pg, eslint, prettier, prettier-plugin-svelte, sass, tslib, typescript, vite, vitest
 - Install typescript-eslint, @eslint/js, globals, eslint-plugin-prettier
 - Change eslint config to flat
 
 # 2.0.6
+
 - Bump google-auth-library, @sendgrid/mail, pg, @sveltejs/kit, @sveltejs/vite-plugin-svelte, @types/pg, @typescript-eslint, eslint, eslint-config-prettier, prettier-plugin-svelte, sass, svelte, svelte-check, typescript, vite, vitest
 
 # 2.0.5
+
 - Bump @sveltejs/kit, @types/pg, @typescript-eslint, google-auth-library, sass, svelte-check, typescript, vite, vitest
 
 # 2.0.4
+
 - Tested with latest Sveltekit and google-auth-library
 - Bump @sendgrid/mail, sveltekit, adapter-node, @types, @typescript-eslint, google-auth-library, prettier, prettier-plugin-svelte, sass, svelte, svelte-check, typescript, vite, vitest, yarn
 
 # 2.0.3
+
 - Move to eslint's new eslint.config.js
 - Convert vite.config to TypeScript
 

package/README.md

@@ -1,6 +1,6 @@
 # SvelteKit Authentication and Authorization Example
 
-**Updated for SvelteKit 2.5.26**
+**Updated for Svelte 5 and SvelteKit 2.8.1**
 
 This is an example of how to register, authenticate, and update users and limit their access to
 areas of the website by role (admin, teacher, student). It includes profile management and password resets via SendGrid.

package/eslint.config.js

@@ -13,4 +13,4 @@ export default tseslint.config(
 	...tseslint.configs.recommended,
 	...sveltePlugin.configs['flat/prettier'],
 	prettierPluginRecommended
-)
+)

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sveltekit-auth-example",
 	"description": "SvelteKit Authentication Example",
-	"version": "2.1.0",
+	"version": "5.0.1",
 	"author": "Nate Stuyvesant",
 	"license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
 	"repository": {
@@ -31,7 +31,7 @@
 		"format": "prettier --write . --ignore-path ./.eslintignore"
 	},
 	"engines": {
-		"node": "^18.19.1"
+		"node": "^20.18.0"
 	},
 	"type": "module",
 	"dependencies": {
@@ -39,32 +39,32 @@
 		"pg": "^8.13.1"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.13.0",
+		"@eslint/js": "^9.15.0",
 		"@sveltejs/adapter-node": "^5.2.9",
-		"@sveltejs/kit": "^2.7.3",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/kit": "^2.8.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.1",
 		"@types/bootstrap": "5.2.10",
 		"@types/google.accounts": "^0.0.15",
 		"@types/jsonwebtoken": "^9.0.7",
 		"@types/pg": "^8.11.10",
 		"bootstrap": "^5.3.3",
-		"eslint": "^9.13.0",
+		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"eslint-plugin-svelte": "^2.46.0",
-		"globals": "^15.11.0",
-		"google-auth-library": "^9.14.2",
+		"globals": "^15.12.0",
+		"google-auth-library": "^9.15.0",
 		"jsonwebtoken": "^9.0.2",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
-		"sass": "^1.80.4",
-		"svelte": "^5.1.4",
-		"svelte-check": "^4.0.5",
-		"tslib": "^2.8.0",
+		"prettier-plugin-svelte": "^3.2.8",
+		"sass": "^1.81.0",
+		"svelte": "^5.2.4",
+		"svelte-check": "^4.0.9",
+		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.12.1",
-		"vite": "^5.4.10",
-		"vitest": "^2.1.4"
+		"typescript-eslint": "^8.15.0",
+		"vite": "^5.4.11",
+		"vitest": "^2.1.5"
 	},
 	"packageManager": "yarn@4.5.1",
 	"prettier": "./prettier.config.mjs"

package/src/routes/+error.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { page } from '$app/stores'
 </script>
 

package/src/routes/+layout.svelte

@@ -7,7 +7,12 @@
 
 	import 'bootstrap/scss/bootstrap.scss' // preferred way to load Bootstrap SCSS for hot module reloading
 
-	export let data: LayoutServerData
+	interface Props {
+		data: LayoutServerData
+		children?: import('svelte').Snippet
+	}
+
+	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
@@ -34,7 +39,8 @@
 		if (!$loginSession) google.accounts.id.prompt()
 	})
 
-	async function logout() {
+	async function logout(event: MouseEvent) {
+		event.preventDefault()
 		// Request server delete httpOnly cookie called loginSession
 		const url = '/auth/logout'
 		const res = await fetch(url, {
@@ -54,7 +60,9 @@
 		}
 	}
 
-	$: openToast($toast.isOpen)
+	$effect(() => {
+		openToast($toast.isOpen)
+	})
 </script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -117,7 +125,7 @@
 							</li>
 							<li>
 								<a
-									on:click|preventDefault={logout}
+									onclick={logout}
 									class="dropdown-item"
 									class:d-none={!$loginSession || $loginSession.id === 0}
 									href={'#'}>Logout</a
@@ -136,7 +144,7 @@
 </nav>
 
 <main class="container">
-	<slot />
+	{@render children?.()}
 
 	<div
 		id="authToast"

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

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 </script>
 
 <svelte:head>

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

@@ -5,20 +5,24 @@
 	import { toast } from '../../../../stores'
 	import { focusOnFirstError } from '$lib/focus'
 
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 
-	let focusedField: HTMLInputElement
-	let password: string
-	let confirmPassword: HTMLInputElement
-	let message: string
+	let focusedField: HTMLInputElement | undefined = $state()
+	let password = $state('')
+	let confirmPassword: HTMLInputElement | undefined = $state()
+	let message = $state('')
 
 	onMount(() => {
-		focusedField.focus()
+		focusedField?.focus()
 	})
 
 	const passwordMatch = () => {
 		if (!password) password = ''
-		return password == confirmPassword.value
+		return password == confirmPassword?.value
 	}
 
 	const resetPassword = async () => {
@@ -26,7 +30,7 @@
 		const form = document.getElementById('reset') as HTMLFormElement
 
 		if (!passwordMatch()) {
-			confirmPassword.classList.add('is-invalid')
+			confirmPassword?.classList.add('is-invalid')
 		}
 
 		if (form.checkValidity()) {
@@ -111,7 +115,7 @@
 					<p class="text-danger">{message}</p>
 				{/if}
 				<div class="d-grid gap-2">
-					<button on:click|preventDefault={resetPassword} class="btn btn-primary btn-lg"
+					<button onclick={resetPassword} type="button" class="btn btn-primary btn-lg"
 						>Send Email</button
 					>
 				</div>

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

@@ -4,12 +4,12 @@
 	import { toast } from '../../stores'
 	import { focusOnFirstError } from '$lib/focus'
 
-	let focusedField: HTMLInputElement
-	let email: string
-	let message: string
+	let focusedField: HTMLInputElement | undefined = $state()
+	let email: string = $state('')
+	let message: string = $state('')
 
 	onMount(() => {
-		focusedField.focus()
+		focusedField?.focus()
 	})
 
 	const sendPasswordReset = async () => {
@@ -72,7 +72,7 @@
 					<p class="text-danger">{message}</p>
 				{/if}
 				<div class="d-grid gap-2">
-					<button on:click|preventDefault={sendPasswordReset} class="btn btn-primary btn-lg"
+					<button onclick={sendPasswordReset} type="button" class="btn btn-primary btn-lg"
 						>Send Email</button
 					>
 				</div>

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

@@ -6,12 +6,12 @@
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
 
-	let focusedField: HTMLInputElement
-	let message: string
-	const credentials: Credentials = {
+	let focusedField: HTMLInputElement | undefined = $state()
+	let message = $state('')
+	const credentials: Credentials = $state({
 		email: '',
 		password: ''
-	}
+	})
 
 	async function login() {
 		message = ''
@@ -36,7 +36,7 @@
 		initializeGoogleAccounts()
 		renderGoogleButton()
 
-		focusedField.focus()
+		focusedField?.focus()
 	})
 
 	async function loginLocal(credentials: Credentials) {
@@ -135,7 +135,7 @@
 					<p class="text-danger">{message}</p>
 				{/if}
 				<div class="d-grid gap-2">
-					<button on:click|preventDefault={login} class="btn btn-primary btn-lg">Sign In</button>
+					<button onclick={login} type="button" class="btn btn-primary btn-lg">Sign In</button>
 				</div>
 			</form>
 		</div>

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

@@ -4,15 +4,19 @@
 	import { focusOnFirstError } from '$lib/focus'
 	import { loginSession } from '../../stores'
 
-	export let data: PageData
-	const { user }: { user: User } = data
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
+	const { user }: { user: User } = $state(data)
 
-	let focusedField: HTMLInputElement
-	let message: string
-	let confirmPassword: HTMLInputElement
+	let focusedField: HTMLInputElement | undefined = $state()
+	let message = $state('')
+	let confirmPassword: HTMLInputElement | undefined = $state()
 
 	onMount(() => {
-		focusedField.focus()
+		focusedField?.focus()
 	})
 
 	async function update() {
@@ -20,7 +24,7 @@
 		const form = document.getElementById('profile') as HTMLFormElement
 
 		if (!user?.email?.includes('gmail.com') && !passwordMatch()) {
-			confirmPassword.classList.add('is-invalid')
+			confirmPassword?.classList.add('is-invalid')
 			return
 		}
 
@@ -44,7 +48,7 @@
 
 	const passwordMatch = () => {
 		if (!user.password) user.password = ''
-		return user.password == confirmPassword.value
+		return user.password == confirmPassword?.value
 	}
 </script>
 
@@ -150,7 +154,7 @@
 					<p>{message}</p>
 				{/if}
 
-				<button type="button" on:click={update} class="btn btn-primary btn-lg">Update</button>
+				<button onclick={update} type="button" class="btn btn-primary btn-lg">Update</button>
 			</form>
 		</div>
 	</div>

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

@@ -5,9 +5,9 @@
 	import { focusOnFirstError } from '$lib/focus'
 	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
 
-	let focusedField: HTMLInputElement
+	let focusedField: HTMLInputElement | undefined = $state()
 
-	let user: User = {
+	let user: User = $state({
 		id: 0,
 		role: 'student',
 		firstName: '',
@@ -15,16 +15,16 @@
 		password: '',
 		email: '',
 		phone: ''
-	}
-	let confirmPassword: HTMLInputElement
-	let message: string
+	})
+	let confirmPassword: HTMLInputElement | undefined = $state()
+	let message = $state('')
 
 	async function register() {
 		const form = document.getElementById('register') as HTMLFormElement
 		message = ''
 
 		if (!passwordMatch()) {
-			confirmPassword.classList.add('is-invalid')
+			confirmPassword?.classList.add('is-invalid')
 			return
 		}
 
@@ -47,7 +47,7 @@
 		initializeGoogleAccounts()
 		renderGoogleButton()
 
-		focusedField.focus()
+		focusedField?.focus()
 	})
 
 	async function registerLocal(user: User) {
@@ -81,7 +81,7 @@
 	const passwordMatch = () => {
 		if (!user) return false // placate TypeScript
 		if (!user.password) user.password = ''
-		return user.password == confirmPassword.value
+		return user.password == confirmPassword?.value
 	}
 </script>
 
@@ -190,7 +190,7 @@
 						<p class="text-danger">{message}</p>
 					{/if}
 
-					<button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
+					<button onclick={register} type="button" class="btn btn-primary btn-lg">Register</button>
 				</form>
 			{/if}
 		</div>

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

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	export let data: PageData
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
 </script>
 
 <svelte:head>