sveltekit-auth-example 5.1.1 → 5.1.3

package/CHANGELOG.md

@@ -2,9 +2,36 @@
 
 - Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 5.1.3
+
+- Session timeout: automatically redirect to /login on session expiry via fetch interceptor (`src/lib/fetch-interceptor.ts`)
+- Add database-level session cleanup on expiry
+- Strengthen Content Security Policy (CSP) in svelte.config.js and vite.config.ts
+- Harden auth endpoints (forgot password, Google OAuth, register, password reset)
+
+# 5.1.2
+
+- Dark mode
+- Rate limiting on auth endpoints
+- Email verification for new registrations
+- Refactor state management: replace `stores.ts` with Svelte 5 `$state`-based `AppState` class (`src/lib/app-state.svelte.ts`)
+- Split single `[slug]` auth handler into dedicated endpoints: login, register, google, logout, reset
+- Add `auth-redirect.ts` helper for consistent post-auth redirects
+- Password complexity enforcement on register and profile pages
+- Add `/api/v1/user` profile update endpoint
+- Service worker improvements
+- Performance improvements in session lookup and DB queries
+- Rename `.env.sample` to `.env.example`
+
 # 5.1.0
 
-- Convert to Tailwind CSS
+- Convert to Tailwind CSS 4
+- Remove Bootstrap dependency
+- Modernize PostgreSQL schema and stored functions
+- Add Playwright end-to-end test configuration
+- Add MCP configuration (`.vscode/mcp.json`) for Svelte MCP server
+- Add `AGENTS.md` coding agent instructions
+- Bump dependencies
 
 # 5.0.4
 

package/README.md

@@ -1,68 +1,62 @@
 # SvelteKit Authentication and Authorization Example
 
-**Updated for Svelte 5 and SvelteKit 2.19**
+[![GitHub release](https://img.shields.io/github/v/release/nstuyvesant/sveltekit-auth-example)](https://github.com/nstuyvesant/sveltekit-auth-example/releases)
+[![License](https://img.shields.io/github/license/nstuyvesant/sveltekit-auth-example)](https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE)
+[![Node](https://img.shields.io/node/v/sveltekit-auth-example)](https://nodejs.org)
+[![Svelte](https://img.shields.io/badge/Svelte-5-orange)](https://svelte.dev)
 
-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.
+A complete, production-ready authentication and authorization starter for **Svelte 5** and **SvelteKit 2**. Skip the boilerplate — get secure local accounts, Google OAuth, MFA, email verification, role-based access control, and OWASP-compliant password hashing out of the box.
 
-It's a Single Page App (SPA) built with SvelteKit and a PostgreSQL database back-end. Code is TypeScript and the website is styled using Tailwind CSS. PostgreSQL functions handle password hashing and UUID generation for the session ID. Unlike most authentication examples, this SPA does not use callbacks that redirect back to the site (causing the website to be reloaded with a visual flash).
+## Features
 
-The project includes a Content Security Policy (CSP) in svelte.config.js.
+| | |
+|---|---|
+| ✅ Local accounts (email + password) | ✅ Sign in with Google / Google One Tap |
+| ✅ Multi-factor authentication (MFA) | ✅ Email verification |
+| ✅ Forgot password / email reset (SendGrid) | ✅ User profile management |
+| ✅ Session management + timeout | ✅ Rate limiting |
+| ✅ Role-based access control | ✅ Password complexity enforcement |
+| ✅ Content Security Policy (CSP) | ✅ OWASP-compliant password hashing |
 
-The website supports two types of authentication:
+## Stack
 
-1. **Local accounts** via username (email) and password
-   - The login form (/src/routes/login/+page.svelte) sends the login info as JSON to endpoint /auth/login
-   - The endpoint passes the JSON to PostgreSQL function authenticate(json) which hashes the password and compares it to the stored hashed password in the users table. The function returns JSON containing a session ID (v4 UUID) and user object (sans password).
-   - The endpoint sends this session ID as an httpOnly SameSite cookie and the user object in the body of the response.
-   - The client stores the user object in the loginSession store.
-   - Further requests to the server include the session cookie. The hooks.ts handle() method extracts the session cookie, looks up the user and attaches it to RequestEvent.locals so server-side code can check locals.user.role to see if the request is authorized and return an HTTP 401 status if not.
-2. **Sign in with Google**
-   - **Sign in with Google** is initialized in /src/routes/+layout.svelte.
-   - **Google One Tap** prompt is displayed on the initially loaded page unless [Intelligent Tracking Prevention is enabled in the browser](https://developers.google.com/identity/gsi/web/guides/features#upgraded_ux_on_itp_browsers).
-   - **Sign in with Google** button is on the login page (/src/routes/login/+page.svelte) and register page (/src/routes/register/+page.svelte).
-   - Clicking either button opens a new window asking the user to authorize this website. If the user OKs it, a JSON Web Token (JWT) is sent to a callback function.
-   - The callback function (in /src/lib/auth.ts) sends the JWT to an endpoint on this server /auth/google.
-   - The endpoint decodes and validates the user information then calls the PostgreSQL function start_gmail_user_session to upsert the user to the database returing a session id in an httpOnly SameSite cookie and user in the body of the response.
-   - The client stores the user object in the loginSession store.
-   - Further requests to the server work identically to local accounts above.
-
-> There is some overhead to checking the user session in a database each time versus using a JWT; however, validating each request avoids problems discussed in [this article](https://redis.com/blog/json-web-tokens-jwt-are-dangerous-for-user-sessions/) and [this one](https://scotch.io/bar-talk/why-jwts-suck-as-session-tokens). For a high-volume website, I would use Redis or the equivalent.
+- **[SvelteKit](https://kit.svelte.dev)** — Single Page Application
+- **[PostgreSQL 16+](https://www.postgresql.org)** — database with server-side hashing
+- **[Tailwind CSS 4](https://tailwindcss.com)** — styling
+- **TypeScript** — end-to-end type safety
 
-The forgot password / password reset functionality uses a JWT and [**SendGrid**](https://www.sendgrid.com) to send the email. You would need to have a **SendGrid** account and set two environmental variables. Email sending is in /src/routes/auth/forgot.ts. This code could easily be replaced by nodemailer or something similar. Note: I have no affliation with **SendGrid** (used their API in another project).
+## Requirements
 
-## Prerequisites
-
-- PostgreSQL 14.10 or higher
-- Node.js 18.19.1 or higher
-- Google API client
-- Twilio SendGrid account (only used for emailing password reset link - the sample can run without it but forgot password will not work)
+- Node.js 24.14.0 or later
+- PostgreSQL 16 or later
+- A [SendGrid](https://sendgrid.com) account (for password reset emails)
+- A [Google API client ID](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid) (for Sign in with Google)
 
 ## Setting up the project
 
-Here are the steps:
-
-1. Get the project and setup the database
+1. Get the project and set up the database
 
 ```bash
 # Clone the repo to your current directory
 git clone https://github.com/nstuyvesant/sveltekit-auth-example.git
 
 # Install the dependencies
-cd /sveltekit-auth-example
+cd sveltekit-auth-example
 yarn install
 
-# Create PostgreSQL database (only works if you installed PostgreSQL)
+# Create PostgreSQL database (only works if you have PostgreSQL installed)
 psql -d postgres -f db_create.sql
 ```
 
-2. Create a **Google API client ID** per [these instructions](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid). Make sure you include `http://localhost:3000`, `http://localhost` in the Authorized JavaScript origins and `http://localhost:3000/auth/google/callback` in the Authorized redirect URIs for your Client ID for Web application. ** Do not access the site using http://127.0.0.1:3000 ** - use `http://localhost:3000` or it will not work.
+2. Create a **Google API client ID** per [these instructions](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid). Make sure you include `http://localhost:3000` and `http://localhost` in the Authorized JavaScript origins, and `http://localhost:3000/auth/google/callback` in the Authorized redirect URIs for your Client ID for Web application. **Do not access the site using http://127.0.0.1:3000** — use `http://localhost:3000` or it will not work.
 
 3. [Create a free Twilio SendGrid account](https://signup.sendgrid.com) and generate an API Key following [this documentation](https://docs.sendgrid.com/ui/account-and-settings/api-keys) and add a sender as documented [here](https://docs.sendgrid.com/ui/sending-email/senders).
 
-4. Create an **.env** file at the top level of the project with the following values (substituting your own id and PostgreSQL username and password):
+4. Create a **.env** file at the top level of the project with the following values (substituting your own id and PostgreSQL username and password):
 
 ```bash
 DATABASE_URL=postgres://user:password@localhost:5432/auth
+DATABASE_SSL=false
 DOMAIN=http://localhost:3000
 JWT_SECRET=replace_with_your_own
 SENDGRID_KEY=replace_with_your_own
@@ -73,14 +67,50 @@ PUBLIC_GOOGLE_CLIENT_ID=replace_with_your_own
 ## Run locally
 
 ```bash
-# Start the server and open the app in a new browser tab
+# Start the dev server and open the app in a new browser tab
 yarn dev -- --open
 ```
 
+## Build and preview
+
+```bash
+# Build for production
+yarn build
+
+# Preview the production build
+yarn preview
+```
+
 ## Valid logins
 
 The db_create.sql script adds three users to the database with obvious roles:
 
-- admin@example.com password admin123
-- teacher@example.com password teacher123
-- student@example.com password student123
+| Email | Password | Role |
+|---|---|---|
+| admin@example.com | admin123 | admin |
+| teacher@example.com | teacher123 | teacher |
+| student@example.com | student123 | student |
+
+## How it works
+
+The website supports two types of authentication:
+
+1. **Local accounts** via username (email) and password
+   - The login form (/src/routes/login/+page.svelte) sends the login info as JSON to endpoint /auth/login
+   - The endpoint passes the JSON to PostgreSQL function authenticate(json) which hashes the password and compares it to the stored hashed password in the users table. The function returns JSON containing a session ID (v4 UUID) and user object (sans password).
+   - The endpoint sends this session ID as an httpOnly SameSite cookie and the user object in the body of the response.
+   - The client stores the user object in `appState` (see /src/lib/app-state.svelte.ts).
+   - Further requests to the server include the session cookie. The hooks.ts handle() method extracts the session cookie, looks up the user and attaches it to RequestEvent.locals so server-side code can check locals.user.role to see if the request is authorized and return an HTTP 401 status if not.
+2. **Sign in with Google**
+   - **Sign in with Google** is initialized in /src/routes/+layout.svelte.
+   - **Google One Tap** prompt is displayed on the initially loaded page unless [Intelligent Tracking Prevention is enabled in the browser](https://developers.google.com/identity/gsi/web/guides/features#upgraded_ux_on_itp_browsers).
+   - **Sign in with Google** button is on the login page (/src/routes/login/+page.svelte) and register page (/src/routes/register/+page.svelte).
+   - Clicking either button opens a new window asking the user to authorize this website. If the user OKs it, a JSON Web Token (JWT) is sent to a callback function.
+   - The callback function (in /src/lib/google.ts) sends the JWT to an endpoint on this server /auth/google.
+   - The endpoint decodes and validates the user information then calls the PostgreSQL function start_gmail_user_session to upsert the user to the database returning a session id in an httpOnly SameSite cookie and user in the body of the response.
+   - The client stores the user object in `appState` (see /src/lib/app-state.svelte.ts).
+   - Further requests to the server work identically to local accounts above.
+
+> There is some overhead to checking the user session in a database each time versus using a JWT; however, validating each request avoids problems discussed in [this article](https://redis.com/blog/json-web-tokens-jwt-are-dangerous-for-user-sessions/). For a high-volume website, I would use Redis or the equivalent.
+
+The forgot password / password reset functionality uses a JWT and [**SendGrid**](https://www.sendgrid.com) to send the email. You would need to have a **SendGrid** account and set two environmental variables. Email sending is in /src/routes/auth/forgot/+server.ts. This code could easily be replaced by nodemailer or something similar. Note: I have no affiliation with **SendGrid** (used their API in another project).

package/db_create.sql

@@ -189,6 +189,43 @@ $BODY$;
 
 ALTER FUNCTION public.get_session(uuid) OWNER TO auth;
 
+-- Like get_session but also bumps the expiry (sliding sessions).
+-- Returns NULL if the session is expired or does not exist.
+CREATE OR REPLACE FUNCTION public.get_and_update_session(input_session_id uuid)
+  RETURNS json
+  LANGUAGE 'plpgsql'
+AS $BODY$
+DECLARE
+  result json;
+BEGIN
+  UPDATE sessions
+    SET expires = CURRENT_TIMESTAMP + INTERVAL '2 hours'
+  WHERE id = input_session_id AND expires > CURRENT_TIMESTAMP;
+
+  IF NOT FOUND THEN
+    RETURN NULL;
+  END IF;
+
+  SELECT json_build_object(
+    'id', sessions.user_id,
+    'role', users.role,
+    'email', users.email,
+    'firstName', users.first_name,
+    'lastName', users.last_name,
+    'phone', users.phone,
+    'optOut', users.opt_out,
+    'expires', sessions.expires
+  ) INTO result
+  FROM sessions
+    INNER JOIN users ON sessions.user_id = users.id
+  WHERE sessions.id = input_session_id;
+
+  RETURN result;
+END;
+$BODY$;
+
+ALTER FUNCTION public.get_and_update_session(uuid) OWNER TO auth;
+
 CREATE OR REPLACE FUNCTION public.verify_email_and_create_session(input_id integer)
     RETURNS uuid
     LANGUAGE 'plpgsql'
@@ -224,7 +261,7 @@ BEGIN
   PERFORM id FROM users WHERE email = input_email;
   IF NOT FOUND THEN
     INSERT INTO users(role, password, email, first_name, last_name, phone)
-      VALUES('student', crypt(input_password, gen_salt('bf', 8)), input_email, input_first_name, input_last_name, input_phone)
+      VALUES('student', crypt(input_password, gen_salt('bf', 12)), input_email, input_first_name, input_last_name, input_phone)
       RETURNING
         json_build_object(
           'sessionId', create_session(users.id),
@@ -286,7 +323,7 @@ CREATE OR REPLACE PROCEDURE public.reset_password(IN input_id integer, IN input_
   LANGUAGE plpgsql
 AS $procedure$
 BEGIN
-  UPDATE users SET password = crypt(input_password, gen_salt('bf', 8)) WHERE id = input_id;
+  UPDATE users SET password = crypt(input_password, gen_salt('bf', 12)) WHERE id = input_id;
 END;
 $procedure$
 ;
@@ -308,7 +345,7 @@ BEGIN
   IF input_id = 0 THEN
     INSERT INTO users (role, email, password, first_name, last_name, phone, email_verified)
     VALUES (
-	  input_role, input_email, crypt(input_password, gen_salt('bf', 8)),
+	  input_role, input_email, crypt(input_password, gen_salt('bf', 12)),
 	  input_first_name, input_last_name, input_phone, true);
   ELSE
     UPDATE users SET
@@ -317,7 +354,7 @@ BEGIN
 	  email_verified = true,
 	  password = CASE WHEN input_password = ''
 		  THEN password -- leave as is (we are updating fields other than the password)
-		  ELSE crypt(input_password, gen_salt('bf', 8))
+		  ELSE crypt(input_password, gen_salt('bf', 12))
 	  END,
 	  first_name = input_first_name,
 	  last_name = input_last_name,
@@ -343,7 +380,7 @@ BEGIN
     email = input_email,
 	password = CASE WHEN input_password = ''
       THEN password -- leave as is (we are updating fields other than the password)
-	  ELSE crypt(input_password, gen_salt('bf', 8))
+	  ELSE crypt(input_password, gen_salt('bf', 12))
 	END,
 	first_name = input_first_name,
 	last_name = input_last_name,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sveltekit-auth-example",
 	"description": "SvelteKit Authentication Example",
-	"version": "5.1.1",
+	"version": "5.1.3",
 	"author": "Nate Stuyvesant",
 	"license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
 	"repository": {
@@ -37,6 +37,7 @@
 	"dependencies": {
 		"@sendgrid/mail": "^8.1.6",
 		"google-auth-library": "^10.6.1",
+		"jsonwebtoken": "^9.0.3",
 		"pg": "^8.20.0"
 	},
 	"devDependencies": {
@@ -55,7 +56,6 @@
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.15.2",
 		"globals": "^17.4.0",
-		"jsonwebtoken": "^9.0.3",
 		"playwright": "^1.58.2",
 		"prettier": "^3.8.1",
 		"prettier-plugin-sql": "^0.19.2",

package/src/app.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" sizes="any" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
 		<script
 			nonce="%sveltekit.nonce%"
 			src="https://accounts.google.com/gsi/client"

package/src/hooks.server.ts

@@ -31,8 +31,12 @@ setInterval(() => {
 
 // Attach authorization to each server request (role may have changed)
 async function attachUserToRequestEvent(sessionId: string, event: RequestEvent) {
-	const result = await query('SELECT * FROM get_session($1::uuid)', [sessionId], 'get-session')
-	event.locals.user = result.rows[0]?.get_session // undefined if not found
+	const result = await query(
+		'SELECT get_and_update_session($1::uuid)',
+		[sessionId],
+		'get-and-update-session'
+	)
+	event.locals.user = result.rows[0]?.get_and_update_session // undefined if not found
 }
 
 // Invoked for each endpoint called and initially for SSR router

package/src/lib/auth-redirect.ts

@@ -8,7 +8,7 @@ import { page } from '$app/state'
 export function redirectAfterLogin(user: User): void {
 	if (!user) return
 	const referrer = page.url.searchParams.get('referrer')
-	if (referrer) {
+	if (referrer && referrer.startsWith('/') && !referrer.startsWith('//')) {
 		goto(referrer)
 		return
 	}

package/src/lib/fetch-interceptor.ts

@@ -0,0 +1,23 @@
+import { goto } from '$app/navigation'
+import { page } from '$app/state'
+import { appState } from '$lib/app-state.svelte'
+
+/**
+ * Monkey-patches window.fetch to intercept 401 responses.
+ * When a 401 is received while a user is logged in, the session has expired:
+ * clear app state and redirect to /login with the current path as the referrer.
+ *
+ * Call once from +layout.svelte's onMount.
+ */
+export function setupFetchInterceptor() {
+	const originalFetch = window.fetch
+	window.fetch = async (...args) => {
+		const response = await originalFetch(...args)
+		if (response.status === 401 && appState.user) {
+			appState.user = undefined
+			const referrer = encodeURIComponent(page.url.pathname + page.url.search)
+			goto(`/login?referrer=${referrer}`)
+		}
+		return response
+	}
+}

package/src/lib/google.ts

@@ -5,11 +5,12 @@ import { redirectAfterLogin } from '$lib/auth-redirect'
 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: 'filled_blue',
+			theme: 'outline',
 			size: 'large',
-			width: btn.offsetWidth || 400
+			width: Math.floor(width)
 		})
 	}
 }

package/src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import { goto, beforeNavigate } from '$app/navigation'
 	import { appState } from '$lib/app-state.svelte'
 	import { initializeGoogleAccounts } from '$lib/google'
+	import { setupFetchInterceptor } from '$lib/fetch-interceptor'
 
 	import './layout.css'
 
@@ -39,6 +40,7 @@
 	})
 
 	onMount(() => {
+		setupFetchInterceptor()
 		initializeGoogleAccounts()
 		if (!appState.user) google.accounts.id.prompt()
 	})
@@ -55,13 +57,13 @@
 
 <svelte:window onclick={handleWindowClick} />
 
-<nav class="tw:bg-gray-100 tw:border-b tw:border-gray-200">
+<nav class="tw:bg-gray-100 tw:border-b tw:border-gray-200 tw:dark:bg-gray-900 tw:dark:border-gray-700">
 	<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>
+		<a class="tw:font-semibold tw:text-gray-800 tw:no-underline tw:dark:text-gray-100" href="/">SvelteKit-Auth-Example</a>
 
 		<!-- Mobile toggle -->
 		<button
-			class="tw:sm:hidden tw:p-2 tw:rounded tw:text-gray-600 hover:tw:bg-gray-200"
+			class="tw:sm:hidden tw:p-2 tw:rounded tw:text-gray-600 hover:tw:bg-gray-200 tw:dark:text-gray-300 tw:dark:hover:bg-gray-700"
 			aria-label="Toggle navigation"
 			onclick={() => (navOpen = !navOpen)}
 		>
@@ -71,22 +73,22 @@
 		</button>
 
 		<!-- 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>
+		<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:dark:bg-gray-900 tw:p-4 tw:border-b tw:border-gray-200 tw:dark:border-gray-700' : ''}">
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900 tw:dark:text-gray-300 tw:dark:hover:text-white" href="/">Home</a>
+			<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900 tw:dark:text-gray-300 tw:dark:hover:text-white" href="/info">Info</a>
 
 			{#if appState.user?.role === 'admin'}
-				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/admin">Admin</a>
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900 tw:dark:text-gray-300 tw:dark:hover:text-white" href="/admin">Admin</a>
 			{/if}
 			{#if appState.user && appState.user.role !== 'student'}
-				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/teachers">Teachers</a>
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900 tw:dark:text-gray-300 tw:dark:hover:text-white" href="/teachers">Teachers</a>
 			{/if}
 
 			{#if appState.user}
 				<!-- User dropdown -->
 				<div class="tw:relative" bind:this={dropdownEl}>
 					<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"
+						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 tw:dark:text-gray-300 tw:dark:hover:text-white"
 						onclick={() => (dropdownOpen = !dropdownOpen)}
 						aria-expanded={dropdownOpen}
 						aria-haspopup="true"
@@ -101,13 +103,13 @@
 						</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">
-							<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>
+					<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:dark:bg-gray-800 tw:dark:border-gray-700">
+							<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 tw:dark:text-gray-300 tw:dark:hover:bg-gray-700" href="/profile">Profile</a></li>
 							{#if appState.user?.id !== 0}
 							<li>
 								<button
 									onclick={logout}
-									class="tw:block tw:w-full tw:text-left tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:bg-transparent tw:border-0 tw:cursor-pointer hover:tw:bg-gray-100"
+									class="tw:block tw:w-full tw:text-left tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:bg-transparent tw:border-0 tw:cursor-pointer hover:tw:bg-gray-100 tw:dark:text-gray-300 tw:dark:hover:bg-gray-700"
 								>Logout</button>
 							</li>
 							{/if}
@@ -115,7 +117,7 @@
 					{/if}
 				</div>
 			{:else}
-				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900" href="/login">Login</a>
+				<a class="tw:text-sm tw:text-gray-700 tw:no-underline hover:tw:text-gray-900 tw:dark:text-gray-300 tw:dark:hover:text-white" href="/login">Login</a>
 			{/if}
 		</div>
 	</div>
@@ -131,7 +133,7 @@
 		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"
+		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 tw:dark:bg-gray-800 tw:dark:border-gray-700"
 	>
 		<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">{appState.toast.title}</strong>
@@ -141,6 +143,6 @@
 				class="tw:text-white tw:bg-transparent tw:border-0 tw:cursor-pointer tw:text-lg tw:leading-none"
 				onclick={() => (appState.toast = { ...appState.toast, isOpen: false })}>&times;</button>
 		</div>
-		<div class="tw:px-4 tw:py-3 tw:text-sm">{appState.toast.body}</div>
+		<div class="tw:px-4 tw:py-3 tw:text-sm tw:dark:text-gray-100">{appState.toast.body}</div>
 	</div>
 {/if}

package/src/routes/auth/forgot/+server.ts

@@ -15,7 +15,7 @@ export const POST: RequestHandler = async event => {
 		const { userId } = rows[0]
 		// Create JWT with userId expiring in 30 mins
 		const secret = JWT_SECRET
-		const token = jwt.sign({ subject: userId }, <Secret>secret, {
+		const token = jwt.sign({ subject: userId, purpose: 'reset-password' }, <Secret>secret, {
 			expiresIn: '30m'
 		})
 

package/src/routes/auth/google/+server.ts

@@ -54,9 +54,7 @@ export const POST: RequestHandler = async event => {
 
 		cookies.set('session', userSession.id, { httpOnly: true, sameSite: 'lax', secure: true, path: '/' })
 		return json({ message: 'Successful Google Sign-In.', user: userSession.user })
-	} catch (err) {
-		let message = ''
-		if (err instanceof Error) message = err.message
-		error(401, message)
+	} catch {
+		error(401, 'Google authentication failed.')
 	}
 }

package/src/routes/auth/register/+server.ts

@@ -17,6 +17,10 @@ export const POST: RequestHandler = async event => {
 	if (!body.email || !body.password || !body.firstName || !body.lastName)
 		error(400, 'Please supply all required fields: email, password, first and last name.')
 
+	const passwordPattern = /(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}/
+	if (!passwordPattern.test(body.password))
+		error(400, 'Password must be at least 8 characters and include an uppercase letter, a number, and a special character.')
+
 	let result
 	try {
 		const sql = `SELECT register($1) AS "authenticationResult";`

package/src/routes/auth/reset/+server.ts

@@ -12,6 +12,7 @@ export const PUT: RequestHandler = async event => {
 	// Check the validity of the token and extract userId
 	try {
 		const decoded = <JwtPayload>jwt.verify(token, <jwt.Secret>JWT_SECRET)
+		if (decoded.purpose !== 'reset-password') throw new Error('Invalid token purpose.')
 		const userId = decoded.subject
 
 		// Update the database with the new password

package/src/routes/layout.css

@@ -12,7 +12,10 @@
 
 	html,
 	:host {
-		@apply tw:font-sans tw:text-gray-800;
+		@apply tw:font-sans tw:text-gray-800 tw:bg-white;
+		@variant dark {
+			@apply tw:text-gray-100 tw:bg-gray-900;
+		}
 	}
 }
 
@@ -22,8 +25,9 @@
 		display: block;
 		width: 100%;
 		margin-top: 0.25rem;
-		border-radius: var(--radius, 0.25rem);
-		border: 1px solid var(--color-gray-300, #d1d5db);
+		appearance: none;
+		-webkit-appearance: none;
+		@apply tw:rounded tw:border tw:border-gray-300 tw:bg-white tw:text-gray-900 tw:dark:bg-gray-800 tw:dark:border-gray-600 tw:dark:text-gray-200;
 		padding: 0.375rem 0.75rem;
 		font-size: var(--text-sm, 0.875rem);
 		line-height: var(--tw-leading-sm, 1.25rem);

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

@@ -38,7 +38,6 @@
 	onMount(() => {
 		initializeGoogleAccounts()
 		renderGoogleButton()
-
 		focusedField?.focus()
 	})
 
@@ -86,7 +85,20 @@
 	<h4>Sign In</h4>
 	<p>Welcome back.</p>
 
-	<div id="googleButton" class="tw:w-full"></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>

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

@@ -208,7 +208,7 @@
 		<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-400 tw:bg-white tw:px-4 tw:py-2 tw:text-sm tw:font-medium tw:text-red-600 tw:cursor-pointer hover:tw:bg-red-50 disabled:tw:opacity-50 disabled:tw:cursor-not-allowed"
+			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}
 		>

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

@@ -54,7 +54,6 @@
 	onMount(() => {
 		initializeGoogleAccounts()
 		renderGoogleButton()
-
 		focusedField?.focus()
 	})
 
@@ -117,7 +116,20 @@
 	<h4>Register</h4>
 		<p>Welcome to our community.</p>
 
-		<div id="googleButton" class="tw:w-full"></div>
+		<div class="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:text-sm tw:font-medium tw:text-gray-700 tw:dark:bg-gray-800 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>
 
 	<label class="tw:block tw:text-sm tw:font-medium" for="email">
 		Email

package/svelte.config.js

@@ -37,7 +37,7 @@ const config = {
 			mode: 'auto',
 			directives: {
 				'default-src': [...baseCsp],
-				'script-src': ['unsafe-inline', ...baseCsp],
+				'script-src': [...baseCsp],
 				'img-src': ['data:', 'blob:', ...baseCsp],
 				'style-src': ['unsafe-inline', ...baseCsp],
 				'object-src': ['none'],

package/vite.config.ts

@@ -4,7 +4,7 @@ import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
 	build: {
-		sourcemap: true
+		sourcemap: process.env.NODE_ENV !== 'production'
 	},
 	plugins: [sveltekit(), tailwindcss()],
 	test: {