sveltekit-auth-example 5.0.3 → 5.1.0

package/.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

package/AGENTS.md

@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.

package/CHANGELOG.md

@@ -2,13 +2,24 @@
 
 - Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 5.1.0
+
+- Convert to Tailwind CSS
+
+# 5.0.4
+
+- Bump dependencies
+
 # 5.0.3
+
 - Bump dependencies
 
 # 5.0.2
+
 - Bump dependencies
 
 # 5.0.1
+
 - Migrate to Svelte 5 runes mode
 - Format with prettier
 - Bump dependencies

package/README.md

@@ -2,10 +2,9 @@
 
 **Updated for Svelte 5 and SvelteKit 2.19**
 
-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.
+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.
 
-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 Bootstrap. 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).
+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).
 
 The project includes a Content Security Policy (CSP) in svelte.config.js.
 

package/db_create.sql

@@ -26,7 +26,6 @@ CREATE DATABASE auth
   WITH 
   OWNER = auth
   ENCODING = 'UTF8'
-  TABLESPACE = pg_default
   CONNECTION LIMIT = -1;
 
 COMMENT ON DATABASE auth IS 'SvelteKit Auth Example';
@@ -40,20 +39,44 @@ CREATE EXTENSION IF NOT EXISTS pgcrypto;
 -- Required to generate UUIDs for sessions
 CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
 
+-- Required for case-insensitive text (email_address domain)
+CREATE EXTENSION IF NOT EXISTS citext;
+
 -- Using hard-coded roles (often this would be a table)
 CREATE TYPE public.roles AS ENUM
   ('student', 'teacher', 'admin');
 
 ALTER TYPE public.roles OWNER TO auth;
 
+-- Domains
+CREATE DOMAIN public.email_address AS citext CHECK (
+  length(VALUE) <= 254
+  AND VALUE = btrim(VALUE)
+  AND VALUE ~* '^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$'
+);
+
+COMMENT ON DOMAIN public.email_address IS 'RFC-compliant email address (case-insensitive, max 254 chars)';
+
+CREATE DOMAIN public.persons_name AS text CHECK (length(VALUE) <= 20) NOT NULL;
+
+COMMENT ON DOMAIN public.persons_name IS 'Person first or last name (max 20 characters)';
+
+CREATE DOMAIN public.phone_number AS text CHECK (
+  VALUE IS NULL
+  OR length(VALUE) <= 50
+);
+
+COMMENT ON DOMAIN public.phone_number IS 'Phone number (max 50 characters)';
+
 CREATE TABLE IF NOT EXISTS public.users (
   id integer NOT NULL GENERATED ALWAYS AS IDENTITY ( INCREMENT 1 START 1 MINVALUE 1 MAXVALUE 2147483647 CACHE 1 ),
   role roles NOT NULL DEFAULT 'student'::roles,
-  email character varying(80) COLLATE pg_catalog."default" NOT NULL,
+  email email_address NOT NULL,
   password character varying(80) COLLATE pg_catalog."default",
-  first_name character varying(20) COLLATE pg_catalog."default" NOT NULL,
-  last_name character varying(20) COLLATE pg_catalog."default" NOT NULL,
-  phone character varying(23) COLLATE pg_catalog."default",
+  first_name persons_name,
+  last_name persons_name,
+  opt_out boolean NOT NULL DEFAULT false,
+  phone phone_number,
   CONSTRAINT users_pkey PRIMARY KEY (id),
   CONSTRAINT users_email_unique UNIQUE (email)
 ) TABLESPACE pg_default;
@@ -78,13 +101,13 @@ CREATE INDEX users_password
 CREATE TABLE IF NOT EXISTS public.sessions (
   id uuid NOT NULL DEFAULT uuid_generate_v4(),
   user_id integer NOT NULL,
-  expires timestamp with time zone DEFAULT (CURRENT_TIMESTAMP + '02:00:00'::interval),
+  expires timestamptz NOT NULL DEFAULT (CURRENT_TIMESTAMP + INTERVAL '2 hours'),
   CONSTRAINT sessions_pkey PRIMARY KEY (id),
   CONSTRAINT sessions_user_fkey FOREIGN KEY (user_id)
     REFERENCES public.users (id) MATCH SIMPLE
-    ON UPDATE NO ACTION
-    ON DELETE CASCADE
-    NOT VALID
+    ON UPDATE CASCADE
+    ON DELETE CASCADE,
+  CONSTRAINT sessions_one_per_user UNIQUE (user_id)
 ) TABLESPACE pg_default;
 
 ALTER TABLE public.sessions OWNER to auth;
@@ -98,8 +121,8 @@ CREATE OR REPLACE FUNCTION public.authenticate(
     VOLATILE PARALLEL UNSAFE
 AS $BODY$
 DECLARE
-  input_email varchar(80) := LOWER(TRIM((input->>'email')::varchar));
-  input_password varchar(80) := (input->>'password')::varchar;
+  input_email text := trim(input->>'email');
+  input_password text := input->>'password';
 BEGIN
   IF input_email IS NULL OR input_password IS NULL THEN
     response := json_build_object('statusCode', 400, 'status', 'Please provide an email address and password to authenticate.', 'user', NULL);
@@ -107,24 +130,25 @@ BEGIN
   END IF;
 
   WITH user_authenticated AS (
-    SELECT users.id, role, first_name, last_name, phone
+    SELECT users.id, role, first_name, last_name, phone, opt_out
     FROM users
     WHERE email = input_email AND password = crypt(input_password, password) LIMIT 1
   )
   SELECT json_build_object(
-	'statusCode', CASE WHEN (SELECT COUNT(*) FROM user_authenticated) > 0 THEN 200 ELSE 401 END,
-	'status', CASE WHEN (SELECT COUNT(*) FROM user_authenticated) > 0
+	'statusCode', CASE WHEN EXISTS (SELECT 1 FROM user_authenticated) THEN 200 ELSE 401 END,
+	'status', CASE WHEN EXISTS (SELECT 1 FROM user_authenticated)
 	  THEN 'Login successful.'
 	  ELSE 'Invalid username/password combination.'
 	END,
-	'user', CASE WHEN (SELECT COUNT(*) FROM user_authenticated) > 0
+	'user', CASE WHEN EXISTS (SELECT 1 FROM user_authenticated)
 	  THEN (SELECT json_build_object(
 		  'id', user_authenticated.id,
 		  'role', user_authenticated.role,
 		  'email', input_email,
 		  'firstName', user_authenticated.first_name,
 		  'lastName', user_authenticated.last_name,
-		  'phone', user_authenticated.phone)
+		  'phone', user_authenticated.phone,
+		  'optOut', user_authenticated.opt_out)
 		 FROM user_authenticated)
 	  ELSE NULL
 	  END,
@@ -142,8 +166,12 @@ CREATE OR REPLACE FUNCTION public.create_session(
     COST 100
     VOLATILE PARALLEL UNSAFE
 AS $BODY$
-DELETE FROM sessions WHERE user_id = input_user_id;
-INSERT INTO sessions(user_id) VALUES (input_user_id) RETURNING sessions.id;
+  -- Remove expired sessions (index-friendly cleanup)
+  DELETE FROM sessions WHERE expires < CURRENT_TIMESTAMP;
+  -- Remove any existing session(s) for this user
+  DELETE FROM sessions WHERE user_id = input_user_id;
+  -- Create the new session
+  INSERT INTO sessions(user_id) VALUES (input_user_id) RETURNING sessions.id;
 $BODY$;
 
 ALTER FUNCTION public.create_session(integer) OWNER TO auth;
@@ -159,6 +187,7 @@ SELECT json_build_object(
   'firstName', users.first_name,
   'lastName', users.last_name,
   'phone', users.phone,
+  'optOut', users.opt_out,
   'expires', sessions.expires
 ) AS user
 FROM sessions
@@ -177,11 +206,11 @@ CREATE OR REPLACE FUNCTION public.register(
     VOLATILE PARALLEL UNSAFE
 AS $BODY$
 DECLARE
-  input_email varchar(80) := LOWER(TRIM((input->>'email')::varchar));
-  input_first_name varchar(20) := TRIM((input->>'firstName')::varchar);
-  input_last_name varchar(20) := TRIM((input->>'lastName')::varchar);
-  input_phone varchar(23) := TRIM((input->>'phone')::varchar);
-  input_password varchar(80) := (input->>'password')::varchar;
+  input_email text := trim(input->>'email');
+  input_first_name text := trim(input->>'firstName');
+  input_last_name text := trim(input->>'lastName');
+  input_phone text := trim(input->>'phone');
+  input_password text := input->>'password';
 BEGIN
   PERFORM id FROM users WHERE email = input_email;
   IF NOT FOUND THEN
@@ -190,7 +219,7 @@ BEGIN
       RETURNING
         json_build_object(
           'sessionId', create_session(users.id),
-          'user', json_build_object('id', users.id, 'role', 'student', 'email', input_email, 'firstName', input_first_name, 'lastName', input_last_name, 'phone', input_phone, 'optOut', false)
+          'user', json_build_object('id', users.id, 'role', 'student', 'email', input_email, 'firstName', input_first_name, 'lastName', input_last_name, 'phone', input_phone, 'optOut', users.opt_out)
         ) INTO user_session;
   ELSE -- user is registering account that already exists so set sessionId and user to null so client can let them know
   	SELECT authenticate(input) INTO user_session;

package/eslint.config.mjs

@@ -0,0 +1,48 @@
+import prettier from 'eslint-config-prettier'
+import { fileURLToPath } from 'node:url'
+import { includeIgnoreFile } from '@eslint/compat'
+import js from '@eslint/js'
+import svelte from 'eslint-plugin-svelte'
+import { defineConfig } from 'eslint/config'
+import globals from 'globals'
+import ts from 'typescript-eslint'
+import svelteConfig from './svelte.config.js'
+
+const prettierIgnorePath = fileURLToPath(new URL('./.prettierignore', import.meta.url))
+
+export default defineConfig(
+	includeIgnoreFile(prettierIgnorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		},
+		rules: {
+			'svelte/no-at-html-tags': 'warn',
+			'svelte/require-each-key': 'warn'
+		}
+	}
+)

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sveltekit-auth-example",
 	"description": "SvelteKit Authentication Example",
-	"version": "5.0.3",
+	"version": "5.1.0",
 	"author": "Nate Stuyvesant",
 	"license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
 	"repository": {
@@ -20,52 +20,55 @@
 		"postgresql"
 	],
 	"scripts": {
-		"start": "node build",
 		"dev": "vite dev",
+		"prepare": "svelte-kit sync || echo ''",
 		"build": "vite build",
 		"package": "svelte-kit package",
-		"preview": "vite preview",
+		"preview": "vite preview --port 3000 --open",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint . --ignore-path ./.eslintignore",
-		"format": "prettier --write . --ignore-path ./.eslintignore"
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
 	},
 	"engines": {
-		"node": "^20.18.0"
+		"node": "^24.14.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sendgrid/mail": "^8.1.4",
-		"pg": "^8.14.1"
+		"@sendgrid/mail": "^8.1.6",
+		"google-auth-library": "^10.6.1",
+		"pg": "^8.20.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.23.0",
-		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.20.4",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@eslint/js": "^10.0.1",
+		"@playwright/test": "^1.58.2",
+		"@sveltejs/adapter-node": "^5.5.4",
+		"@sveltejs/kit": "^2.54.0",
+		"@sveltejs/mcp": "^0.1.21",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.2.1",
 		"@types/bootstrap": "5.2.10",
-		"@types/google.accounts": "^0.0.15",
-		"@types/jsonwebtoken": "^9.0.9",
-		"@types/pg": "^8.11.11",
-		"bootstrap": "^5.3.4",
-		"eslint": "^9.23.0",
-		"eslint-config-prettier": "^10.1.1",
-		"eslint-plugin-prettier": "^5.2.6",
-		"eslint-plugin-svelte": "^3.5.1",
-		"globals": "^16.0.0",
-		"google-auth-library": "^9.15.1",
-		"jsonwebtoken": "^9.0.2",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"sass": "^1.86.3",
-		"svelte": "^5.25.6",
-		"svelte-check": "^4.1.5",
+		"@types/google.accounts": "^0.0.18",
+		"@types/jsonwebtoken": "^9.0.10",
+		"@types/pg": "^8.18.0",
+		"eslint": "^10.0.3",
+		"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",
+		"prettier-plugin-svelte": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"svelte": "^5.53.10",
+		"svelte-check": "^4.4.5",
 		"tslib": "^2.8.1",
-		"typescript": "^5.8.2",
-		"typescript-eslint": "^8.29.0",
-		"vite": "^6.2.5",
-		"vitest": "^3.1.1"
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.57.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18",
+		"vitest-browser-svelte": "^2.0.2"
 	},
-	"packageManager": "yarn@4.8.1",
-	"prettier": "./prettier.config.mjs"
+	"packageManager": "yarn@4.13.0"
 }

package/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+	testDir: './tests',
+	testMatch: '**/*.e2e.test.ts',
+	use: {
+		baseURL: 'http://localhost:3000'
+	},
+	webServer: {
+		// In local dev, use the same dev server you run manually.
+		// In CI, fall back to a production-like preview build.
+		command: process.env.CI
+			? 'yarn build && yarn preview -- --port 3000'
+			: 'yarn dev -- --port 3000',
+		env: {
+			...process.env,
+			E2E_BYPASS_RECAPTCHA: 'true',
+			E2E_BRAINTREE_UNIQUE_ORDER_ID: 'true'
+		},
+		url: 'http://localhost:3000',
+		reuseExistingServer: !process.env.CI,
+		timeout: 120_000
+	}
+})

package/prettier.config.mjs

@@ -1,17 +1,26 @@
 export default {
 	$schema: 'https://json.schemastore.org/prettierrc',
 	useTabs: true,
-	tabWidth: 2,
-	semi: false,
-	arrowParens: 'avoid',
 	singleQuote: true,
 	trailingComma: 'none',
 	printWidth: 100,
-	plugins: ['prettier-plugin-svelte'],
+	tabWidth: 2,
+	semi: false,
+	arrowParens: 'avoid',
+
+	plugins: ['prettier-plugin-svelte', 'prettier-plugin-sql', 'prettier-plugin-tailwindcss'],
 	overrides: [
 		{
 			files: '*.svelte',
 			options: { parser: 'svelte' }
+		},
+		{
+			files: '*.sql',
+			options: {
+				parser: 'sql',
+				language: 'postgresql'
+			}
 		}
-	]
+	],
+	tailwindStylesheet: './src/routes/layout.css'
 }

package/src/app.html

@@ -12,7 +12,7 @@
 		></script>
 		%sveltekit.head%
 	</head>
-	<body>
+	<body data-sveltekit-preload-data="hover">
 		<div id="svelte">%sveltekit.body%</div>
 	</body>
 </html>

package/src/hooks.server.ts

@@ -3,8 +3,7 @@ import { query } from '$lib/server/db'
 
 // Attach authorization to each server request (role may have changed)
 async function attachUserToRequestEvent(sessionId: string, event: RequestEvent) {
-	const sql = `SELECT * FROM get_session($1);`
-	const { rows } = await query(sql, [sessionId])
+	const { rows } = await query('SELECT * FROM get_session($1::uuid)', [sessionId], 'get-session')
 	if (rows?.length > 0) {
 		event.locals.user = <User>rows[0].get_session
 	}
@@ -12,10 +11,15 @@ async function attachUserToRequestEvent(sessionId: string, event: RequestEvent)
 
 // Invoked for each endpoint called and initially for SSR router
 export const handle: Handle = async ({ event, resolve }) => {
-	const { cookies } = event
-	const sessionId = cookies.get('session')
+	const { cookies, url } = event
+
+	// Skip auth overhead for static asset requests
+	if (url.pathname.startsWith('/_app/')) {
+		return resolve(event)
+	}
 
 	// before endpoint or page is called
+	const sessionId = cookies.get('session')
 	if (sessionId) {
 		await attachUserToRequestEvent(sessionId, event)
 	}

package/src/lib/server/db.ts

@@ -1,16 +1,68 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { QueryResult } from 'pg'
+import type { QueryResult, QueryResultRow } from 'pg'
 import pg from 'pg'
-import { DATABASE_URL } from '$env/static/private'
+import { env } from '$env/dynamic/private'
+
+/**
+ * Generic function signature for executing a typed SQL query.
+ *
+ * @template T The row type returned from the database, extending QueryResultRow.
+ * @param sql The parameterized SQL query string.
+ * @param params Optional positional parameters to bind to the query.
+ * @returns A promise resolving to the typed QueryResult.
+ */
+type QueryFunction = <T extends QueryResultRow>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[],
+	name?: string
+) => Promise<QueryResult<T>>
+
+let queryFn: QueryFunction
 
 const pool = new pg.Pool({
 	max: 10, // default
-	connectionString: DATABASE_URL,
-	ssl: {
-		// If your postgresql.conf does not have `ssl = on`, remove the entire ssl property or you will get an error
-		rejectUnauthorized: false
-	}
+	idleTimeoutMillis: 10000,
+	connectionTimeoutMillis: 5000,
+	connectionString: env.DATABASE_URL,
+	ssl: env.DATABASE_SSL === 'true' ? { rejectUnauthorized: false } : false
 })
 
-type PostgresQueryResult = (sql: string, params?: any[]) => Promise<QueryResult<any>>
-export const query: PostgresQueryResult = (sql, params?) => pool.query(sql, params)
+pool.on('error', (err: Error) => {
+	console.error('Unexpected error on idle client', err)
+})
+
+queryFn = <T extends QueryResultRow>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[],
+	name?: string
+) => pool.query<T>(name ? { name, text: sql, values: params } : { text: sql, values: params })
+
+/**
+ * Executes a parameterized SQL query against the PostgreSQL database.
+ *
+ * @template T - The expected shape of rows returned by the query. Must extend QueryResultRow.
+ * @param sql - The SQL query string. Use $1, $2, etc. for parameterized queries.
+ * @param params - Optional array of parameter values to bind to the query placeholders.
+ * @returns A Promise resolving to a PostgreSQL QueryResult containing typed rows and metadata.
+ * @throws {Error} If the database connection fails or the query is invalid.
+ *
+ * @example
+ * ```typescript
+ * // Simple query without parameters
+ * const result = await query('SELECT * FROM users');
+ * console.log(result.rows);
+ *
+ * // Parameterized query with type safety
+ * const result = await query<User>('SELECT * FROM users WHERE id = $1', [userId]);
+ * console.log(result.rows[0].name); // TypeScript knows this is a User
+ *
+ * // Insert with multiple parameters
+ * await query(
+ *   'INSERT INTO products (name, price) VALUES ($1, $2)',
+ *   ['Widget', 29.99]
+ * );
+ * ```
+ */
+export const query = <T extends QueryResultRow = any>(
+	sql: string,
+	params?: (string | number | boolean | object | null)[]
+): Promise<QueryResult<T>> => queryFn<T>(sql, params)

package/src/routes/+error.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 </script>
 
-<h1>{$page.status}</h1>
-<h4>{$page.error?.message}</h4>
+<h1>{page.status}</h1>
+<h4>{page.error?.message}</h4>