sveltekit-auth-example 1.0.18 → 1.0.21

package/.env-sample

@@ -0,0 +1,8 @@
+DATABASE_URL=postgres://REPLACE_WITH_USER:REPLACE_WITH_PASSWORD@localhost:5432/auth
+DOMAIN=http://localhost:3000
+JWT_SECRET=replace_with_your_own
+SEND_IN_BLUE_URL=https://api.sendinblue.com
+SEND_IN_BLUE_KEY=REPLACE_WITH_YOUR_OWN
+SEND_IN_BLUE_FROM='{ "email":"sender@example.com", "name":"First Last" }'
+SEND_IN_BLUE_ADMINS='{ "email":"admin@example.com", "name":"First Last" }'
+PUBLIC_GOOGLE_CLIENT_ID=REPLACE_WITH_YOUR_OWN

package/CHANGELOG.md

@@ -1,10 +1,20 @@
 # Backlog
-* Add username and Avatar icon to menu bar
-* [Possible Bug] Getting HTTP 401 on https://play.google.com/log?format=json&hasfast=true&authuser=0 from google-auth-library. As I didn't explicitly request logging, it could be that Safari is preventing Google from further invading our privacy. Will require some investigation. The site works regardless.
-* Consider not setting defaultUser in loginSession as it would simplify +layout.svelte.
-* Refactor $env/dynamic/private and public
 * Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 1.0.21
+* Refactor to use $env/static/private and public, dropping dotenv dependency
+* Remove @types/cookie and bootstrap-icons dependencies
+
+# 1.0.20
+* Bump dependencies
+* Add service-worker
+* Add dropdown, avatarm and user's first name to navbar once user is logged in
+* Refactor user session and update typing
+
+# 1.0.19
+* Added SvelteKit's cookies implementation in RequestEvent
+* [Bug] Logout then go to http://localhost/admin gives error on auth.ts:39
+
 # 1.0.18
 * Bump dependencies
 

package/README.md

@@ -1,7 +1,8 @@
 # SvelteKit Authentication and Authorization Example
 
 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).
+areas of the website by role (admin, teacher, student). As almost every recent release of SvelteKit introduced breaking changes, this project attempts to
+maintain compatibility with the latest release.
 
 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).
 
@@ -27,9 +28,9 @@ The website supports two types of authentication:
 The forgot password functionality uses [**SendInBlue**](https://www.sendinblue.com) to send the email. You would need to have a **SendInBlue** account and set three 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 **SendInBlue** (just happen to be familiar with their API because of another project).
 
 ## Prerequisites
-- PostgreSQL 14 or higher
-- Node.js 18.7.0 or higher
-- npm 8.18.0 or higher
+- PostgreSQL 14.5 or higher
+- Node.js 18.9.0 or higher
+- npm 8.19.1 or higher
 - Google API client
 - SendInBlue account (only used for emailing password reset link - the sample can run without it but forgot password will not work)
 
@@ -61,7 +62,7 @@ SEND_IN_BLUE_URL=https://api.sendinblue.com
 SEND_IN_BLUE_KEY=replace_with_your_own
 SEND_IN_BLUE_FROM='{ "email":"jdoe@example.com", "name":"John Doe" }'
 SEND_IN_BLUE_ADMINS='{ "email":"jdoe@example.com", "name":"John Doe" }'
-VITE_GOOGLE_CLIENT_ID=replace_with_your_own
+PUBLIC_GOOGLE_CLIENT_ID=replace_with_your_own
 ```
 
 ## Run locally

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sveltekit-auth-example",
   "description": "SvelteKit Authentication Example",
-  "version": "1.0.18",
+  "version": "1.0.21",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -33,13 +33,11 @@
 		"format": "prettier --write ."
   },
   "engines": {
-    "node": "~18.8.0",
+    "node": "~18.9.0",
     "npm": "^8.19.1"
   },
   "type": "module",
   "dependencies": {
-    "cookie": "^0.5.0",
-    "dotenv": "^16.0.2",
     "google-auth-library": "^8.5.1",
     "jsonwebtoken": "^8.5.1",
     "pg": "^8.8.0"
@@ -47,26 +45,24 @@
   "devDependencies": {
     "@sveltejs/adapter-node": "latest",
     "@sveltejs/kit": "latest",
-    "@types/bootstrap": "5.2.3",
-    "@types/cookie": "^0.5.1",
+    "@types/bootstrap": "5.2.4",
     "@types/google.accounts": "0.0.2",
     "@types/jsonwebtoken": "^8.5.9",
     "@types/pg": "^8.6.5",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
-    "bootstrap": "^5.2.0",
-    "bootstrap-icons": "^1.9.1",
+    "bootstrap": "^5.2.1",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "sass": "^1.54.8",
-    "svelte": "^3.50.0",
+    "sass": "^1.54.9",
+    "svelte": "^3.50.1",
     "svelte-check": "^2.9.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.3",
     "vite": "^3.1.0"
   }
 }

package/src/app.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /// <reference types="bootstrap" />
 /// <reference types="google.accounts" />
 
@@ -11,19 +13,29 @@ declare namespace App {
 
 	// interface Platform {}
 
-  // interface PrivateEnv {} // $env/dynamic/private
-
-	// interface PublicEnv {} // $env/dynamic/public
+  interface PrivateEnv { // $env/dynamic/private
+    DATABASE_URL: string
+    DOMAIN: string
+    JWT_SECRET: string
+    SEND_IN_BLUE_URL: string
+    SEND_IN_BLUE_KEY: string
+    SEND_IN_BLUE_FROM: string
+    SEND_IN_BLUE_ADMINS: string
+  } 
+
+	interface PublicEnv { // $env/dynamic/public
+    PUBLIC_GOOGLE_CLIENT_ID: string
+  }
 }
 
-type AuthenticationResult = {
+interface AuthenticationResult {
   statusCode: number
   status: string
   user: User
   sessionId: string
 }
 
-type Credentials = {
+interface Credentials {
   email: string
   password: string
 }
@@ -41,16 +53,12 @@ interface GoogleCredentialResponse {
 		| 'btn_confirm_add_session'
 }
 
-interface ImportMetaEnv {
-  VITE_GOOGLE_CLIENT_ID: string
-}
-
-type MessageAddressee = {
+interface MessageAddressee {
   email: string
   name?: string
 }
 
-type Message = {
+interface Message {
   sender?: MessageAddressee
   to?: MessageAddressee[]
   subject: string
@@ -81,7 +89,7 @@ interface SendInBlueRequest extends RequestInit {
   }
 }
 
-type User = {
+interface UserProperties {
   id: number
   role: 'student' | 'teacher' | 'admin'
   password?: string
@@ -91,13 +99,13 @@ type User = {
   phone?: string
 }
 
-type UserSession = {
+type User = UserProperties | undefined
+
+interface UserSession {
   id: string,
   user: User
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 interface Window {
   google?: any
   grecaptcha: any

package/src/{hooks.ts → hooks.server.ts}

@@ -1,9 +1,8 @@
-import * as cookie from 'cookie'
 import type { Handle, RequestEvent } from '@sveltejs/kit'
 import { query } from './routes/_db'
 
 // Attach authorization to each server request (role may have changed)
-async function attachUserToRequest(sessionId: string, event: RequestEvent) {
+async function attachUserToRequestEvent(sessionId: string, event: RequestEvent) {
   const sql = `
     SELECT * FROM get_session($1);`
   const { rows } = await query(sql, [sessionId])
@@ -12,24 +11,20 @@ async function attachUserToRequest(sessionId: string, event: RequestEvent) {
   }
 }
 
-function deleteCookieIfNoUser(event: RequestEvent, response: Response) {
-  if (!event.locals.user) {
-    response.headers.set('Set-Cookie', `session=; Path=/; HttpOnly; SameSite=Lax; Expires=${new Date().toUTCString()}`)
-  }
-}
-
 // 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')
 
   // before endpoint or page is called
-  const cookies = cookie.parse(event.request.headers.get('Cookie') || '')
-  if (cookies.session) {
-    await attachUserToRequest(cookies.session, event)
+  if (sessionId) {
+    await attachUserToRequestEvent(sessionId, event)
   }
 
   const response = await resolve(event)
 
   // after endpoint or page is called
-  deleteCookieIfNoUser(event, response)
+  if (!event.locals.user) cookies.delete('session')
+
   return response
 }

package/src/lib/auth.ts

@@ -1,130 +1,130 @@
-import type { Page } from '@sveltejs/kit' 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Page } from '@sveltejs/kit'
 import type { Readable, Writable } from 'svelte/store'
-import { config } from '$lib/config'
-import { defaultUser } from '../stores'
+import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
 
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any
-export default function useAuth(page: Readable<Page>, loginSession: Writable<User>, goto: (url: string | URL, opts?: { replaceState?: boolean; noscroll?: boolean; keepfocus?: boolean; state?: any; }) => Promise<any>) {
-  let user: User
-  loginSession.subscribe(value => {
-    user = value
-  })
+export default function useAuth(
+	page: Readable<Page>,
+	loginSession: Writable<User>,
+	goto: (
+		url: string | URL,
+		opts?: { replaceState?: boolean; noscroll?: boolean; keepfocus?: boolean; state?: any }
+	) => Promise<any>
+) {
+	let user: User
+	loginSession.subscribe((value) => {
+		user = value
+	})
 
-  let referrer: string | null
-  page.subscribe(value => {
+	let referrer: string | null
+	page.subscribe((value) => {
 		referrer = value.url.searchParams.get('referrer')
 	})
 
-  async function googleCallback(response: GoogleCredentialResponse) {
-    const res = await fetch('/auth/google', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ token: response.credential })
-    })
-
-    if (res.ok) {
-      const fromEndpoint = await res.json()
-      loginSession.set(fromEndpoint.user) // update loginSession store
-      const { role } = fromEndpoint.user
-      if (referrer) return goto(referrer)
-      if (role === 'teacher') return goto('/teachers')
-      if (role === 'admin') return goto('/admin')
-      if (location.pathname === '/login') goto('/') // logged in so go home
-    }
-  }
+	async function googleCallback(response: GoogleCredentialResponse) {
+		const res = await fetch('/auth/google', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ token: response.credential })
+		})
 
-  function initializeSignInWithGoogle(htmlId?: string) {
-    const { id } = window.google.accounts // assumes <script src="https://accounts.google.com/gsi/client" async defer></script> is in app.html
-    id.initialize({ client_id: config.googleClientId, callback: googleCallback })
+		if (res.ok) {
+			const fromEndpoint = await res.json()
+			loginSession.set(fromEndpoint.user) // update loginSession store
+			const { role } = fromEndpoint.user
+			if (referrer) return goto(referrer)
+			if (role === 'teacher') return goto('/teachers')
+			if (role === 'admin') return goto('/admin')
+			if (location.pathname === '/login') goto('/') // logged in so go home
+		}
+	}
 
-    if (htmlId) { // render button instead of prompt
-      return id.renderButton(
-        document.getElementById(htmlId), {
-          theme: 'filled_blue',
-          size: 'large',
-          width: '367'
-        }
-      )
-    }
+	function initializeSignInWithGoogle(htmlId?: string) {
+		const { id } = window.google.accounts // assumes <script src="https://accounts.google.com/gsi/client" async defer></script> is in app.html
+		id.initialize({ client_id: PUBLIC_GOOGLE_CLIENT_ID, callback: googleCallback })
 
-    if (!user) id.prompt()
-  }
+		if (htmlId) {
+			// render button instead of prompt
+			return id.renderButton(document.getElementById(htmlId), {
+				theme: 'filled_blue',
+				size: 'large',
+				width: '367'
+			})
+		}
 
-  function setloginSession(user: User | null) {
-    loginSession.update(s => ({
-      ...s,
-      user
-    }))
-  }
+		if (!user) id.prompt()
+	}
 
-  async function registerLocal(user: User) {
-    try {
-      const res = await fetch('/auth/register', {
-        method: 'POST',
-        body: JSON.stringify(user), // server needs to ignore user.role and always set it to 'student'
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      if (!res.ok)  {
-        if (res.status == 401) // user already existed and passwords didn't match (otherwise, we login the user)
-          throw new Error('Sorry, that username is already in use.')
-        throw new Error(res.statusText) // should only occur if there's a database error
-      }
+	async function registerLocal(user: User) {
+		try {
+			const res = await fetch('/auth/register', {
+				method: 'POST',
+				body: JSON.stringify(user), // server needs to ignore user.role and always set it to 'student'
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+			if (!res.ok) {
+				if (res.status == 401)
+					// user already existed and passwords didn't match (otherwise, we login the user)
+					throw new Error('Sorry, that username is already in use.')
+				throw new Error(res.statusText) // should only occur if there's a database error
+			}
 
-      // res.ok
-      const fromEndpoint = await res.json()
-      loginSession.set(fromEndpoint.user) // update store so user is logged in
-      goto('/')
-    } catch (err) {
-      console.error('Register error', err)
-      if (err instanceof Error) {
-        throw new Error(err.message)
-      }
-    }
-  }
+			// res.ok
+			const fromEndpoint = await res.json()
+			loginSession.set(fromEndpoint.user) // update store so user is logged in
+			goto('/')
+		} catch (err) {
+			console.error('Register error', err)
+			if (err instanceof Error) {
+				throw new Error(err.message)
+			}
+		}
+	}
 
-  async function loginLocal(credentials: Credentials) {
-    try {
-      const res = await fetch('/auth/login', {
-        method: 'POST',
-        body: JSON.stringify(credentials),
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-      const fromEndpoint = await res.json()
-      if (res.ok) {
-        setloginSession(fromEndpoint.user)
-        const { role } = fromEndpoint.user
-        if (referrer) return goto(referrer)
-        if (role === 'teacher') return goto('/teachers')
-        if (role === 'admin') return goto('/admin')
-        return goto('/')
-      } else {
-        throw new Error(fromEndpoint.message)
-      }
-    } catch (err) {
-      if (err instanceof Error) {
-        console.error('Login error', err)
-        throw new Error(err.message)
-      }
-    }
-  }
+	async function loginLocal(credentials: Credentials) {
+		try {
+			const res = await fetch('/auth/login', {
+				method: 'POST',
+				body: JSON.stringify(credentials),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+			const fromEndpoint = await res.json()
+			if (res.ok) {
+				loginSession.set(fromEndpoint.user)
+				const { role } = fromEndpoint.user
+				if (referrer) return goto(referrer)
+				if (role === 'teacher') return goto('/teachers')
+				if (role === 'admin') return goto('/admin')
+				return goto('/')
+			} else {
+				throw new Error(fromEndpoint.message)
+			}
+		} catch (err) {
+			if (err instanceof Error) {
+				console.error('Login error', err)
+				throw new Error(err.message)
+			}
+		}
+	}
 
-  async function logout() {
-    // Request server delete httpOnly cookie called loginSession
-    const url = '/auth/logout'
-    const res = await fetch(url, {
-      method: 'POST'
-    })
-    if (res.ok) {
-      loginSession.set(defaultUser) // delete loginSession.user from 
-      goto('/login')
-    } else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
-  }
+	async function logout() {
+		// Request server delete httpOnly cookie called loginSession
+		const url = '/auth/logout'
+		const res = await fetch(url, {
+			method: 'POST'
+		})
+		if (res.ok) {
+			loginSession.set(undefined) // delete loginSession.user from
+			goto('/login')
+		} else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
+	}
 
-  return { initializeSignInWithGoogle, registerLocal, loginLocal, logout }
-}
+	return { initializeSignInWithGoogle, registerLocal, loginLocal, logout }
+}

package/src/routes/+layout.svelte

@@ -20,6 +20,7 @@
 
   onMount(async () => {
     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
 		initializeSignInWithGoogle()
 	})
@@ -37,20 +38,50 @@
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <a class="navbar-brand" href="/">Auth</a>
+    <a class="navbar-brand" href="/">SvelteKit-Auth-Example</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
-      <div class="navbar-nav">
-        <a class="nav-link active" aria-current="page" href="/">Home</a>
-        <a class="nav-link" href="/info">Info</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession.id === 0} href="/profile">Profile</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession?.role !== 'admin'} href="/admin">Admin</a>
-        <a class="nav-link" class:d-none={!$loginSession || $loginSession?.role === 'student'} href="/teachers">Teachers</a>
-        <a class="nav-link" class:d-none={!!$loginSession} href="/login">Login</a>
-        <a on:click|preventDefault={logout} class="nav-link" class:d-none={!$loginSession || $loginSession.id === 0} href={'#'}>Logout</a>
-      </div>
+
+      <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 on:click|preventDefault={logout} class="dropdown-item" class:d-none={!$loginSession || $loginSession.id === 0} href={'#'}>Logout</a>
+              </li>
+            </ul>
+          </li>
+        {:else}
+          <li class="nav-item">
+            <a class="nav-link" href="/login">Login</a>
+          </li>
+        {/if}
+      </ul>
     </div>
   </div>
 </nav>
@@ -80,4 +111,9 @@
   .toast {
     z-index: 9999;
   }
+
+  .avatar {
+    position: relative;
+    top: -1.5px;
+  }
 </style>

package/src/routes/_db.ts

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import dotenv from 'dotenv'
 import type { QueryResult} from 'pg'
 import pg from 'pg'
-
-dotenv.config()
+import { DATABASE_URL } from '$env/static/private'
 
 const pool = new pg.Pool({
   max: 10, // default
-  connectionString: process.env.DATABASE_URL,
+  connectionString: DATABASE_URL,
   ssl: {
     rejectUnauthorized: false
   }

package/src/routes/_send-in-blue.ts

@@ -1,11 +1,7 @@
-import dotenv from 'dotenv'
+import { SEND_IN_BLUE_KEY, SEND_IN_BLUE_URL, SEND_IN_BLUE_FROM, SEND_IN_BLUE_ADMINS } from '$env/static/private'
 
-dotenv.config()
-
-const SEND_IN_BLUE_KEY = process.env.SEND_IN_BLUE_KEY
-const SEND_IN_BLUE_URL = process.env.SEND_IN_BLUE_URL
-const SEND_IN_BLUE_FROM = <MessageAddressee> JSON.parse(process.env.SEND_IN_BLUE_FROM || '')
-const SEND_IN_BLUE_ADMINS = <MessageAddressee> JSON.parse(process.env.SEND_IN_BLUE_ADMINS || '')
+const sender = <MessageAddressee> JSON.parse(SEND_IN_BLUE_FROM || '')
+const to  = <MessageAddressee> JSON.parse(SEND_IN_BLUE_ADMINS || '')
 
 // POST or PUT submission to SendInBlue
 const submit = async (method: string, url: string, data: Partial<SendInBlueContact> | SendInBlueMessage) => {
@@ -23,7 +19,4 @@ const submit = async (method: string, url: string, data: Partial<SendInBlueConta
   }
 }
 
-const sender =  SEND_IN_BLUE_FROM
-const to  = SEND_IN_BLUE_ADMINS
-
 export const sendMessage = async (message: Message) => submit('POST', '/v3/smtp/email', { sender, to: [to], ...message })

package/src/routes/admin/+page.server.ts

@@ -4,8 +4,8 @@ import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({locals})=> {
 	const { user } = locals
 	const authorized = ['admin']
-	if (user && !authorized.includes(user.role)) {
-		throw redirect(302, '/login?referrer=/admin');
+	if (!user || !authorized.includes(user.role)) {
+		throw redirect(302, '/login?referrer=/admin')
 	}
 
 	return {

package/src/routes/auth/[slug]/+server.ts

@@ -16,11 +16,12 @@ export const POST: RequestHandler = async (event) => {
 					sql = `CALL delete_session($1);`
 					result = await query(sql, [event.locals.user.id])
 				}
-				return new Response(JSON.stringify({ message: 'Logout successful.' }), {
+				return json({ message: 'Logout successful.' }, {
 					headers: {
 						'Set-Cookie': `session=; Path=/; SameSite=Lax; HttpOnly; Expires=${new Date().toUTCString()}`
 					}
 				})
+
 			case 'login':
 				sql = `SELECT authenticate($1) AS "authenticationResult";`
 				break

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

@@ -1,14 +1,10 @@
 import type { RequestHandler } from './$types'
+import { JWT_SECRET, DOMAIN } from '$env/static/private'
 import type { Secret } from 'jsonwebtoken'
 import jwt from 'jsonwebtoken'
-import dotenv from 'dotenv'
 import { query } from '../../_db'
 import { sendMessage } from '../../_send-in-blue'
 
-dotenv.config()
-const DOMAIN = process.env.DOMAIN
-const JWT_SECRET = process.env.JWT_SECRET
-
 export const POST: RequestHandler = async event => {
   const body = await event.request.json()
   const sql = `SELECT id as "userId" FROM users WHERE email = $1 LIMIT 1;`

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

@@ -1,17 +1,16 @@
-import { error } from '@sveltejs/kit'
+import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import { OAuth2Client } from 'google-auth-library'
-import { query } from '../../_db';
-import { config } from '$lib/config'
+import { query } from '../../_db'
+import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
 
 // Verify JWT per https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
 async function getGoogleUserFromJWT(token: string): Promise<Partial<User>> {
   try {
-    const clientId = config.googleClientId
-    const client = new OAuth2Client(clientId)
+    const client = new OAuth2Client(PUBLIC_GOOGLE_CLIENT_ID)
     const ticket = await client.verifyIdToken({
       idToken: token,
-      audience: clientId
+      audience: PUBLIC_GOOGLE_CLIENT_ID
     });
     const payload = ticket.getPayload()
     if (!payload) throw error(500, 'Google authentication did not get the expected payload')
@@ -51,15 +50,14 @@ export const POST: RequestHandler = async event => {
     // Prevent hooks.ts's handler() from deleting cookie thinking no one has authenticated
     event.locals.user = userSession.user
 
-    return new Response(JSON.stringify({
+    return json({
       message: 'Successful Google Sign-In.',
       user: userSession.user
-    }), {
+    }, {
       headers: {
       'Set-Cookie': `session=${userSession.id}; Path=/; SameSite=Lax; HttpOnly;`}
-      }
-    )
-
+    })
+    
   } catch (err) {
     let message = ''
     if (err instanceof Error) message = err.message

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

@@ -1,36 +1,35 @@
-import { json as json$1 } from '@sveltejs/kit';
-import dotenv from 'dotenv'
+import { json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
-import type  { JwtPayload } from 'jsonwebtoken'
+import type { JwtPayload } from 'jsonwebtoken'
 import jwt from 'jsonwebtoken'
 import { query } from '../../_db'
+import { JWT_SECRET } from '$env/static/private'
 
-dotenv.config()
+export const PUT: RequestHandler = async (event) => {
+	const body = await event.request.json()
+	const { token, password } = body
 
-const JWT_SECRET =  <jwt.Secret> process.env.JWT_SECRET
+	// Check the validity of the token and extract userId
+	try {
+		const decoded = <JwtPayload> jwt.verify(token, <jwt.Secret> JWT_SECRET)
+		const userId = decoded.subject
 
-export const PUT: RequestHandler = async event => {
-  const body = await event.request.json()
-  const { token, password } = body
+		// Update the database with the new password
+		const sql = `CALL reset_password($1, $2);`
+		await query(sql, [userId, password])
 
-  // Check the validity of the token and extract userId
-  try {
-    const decoded = <JwtPayload> jwt.verify(token, JWT_SECRET)
-    const userId = decoded.subject
-
-    // Update the database with the new password
-    const sql = `CALL reset_password($1, $2);`
-    await query(sql, [userId, password])
-
-    return json$1({
-  message: 'Password successfully reset.'
-})
-  } catch (error) {
-    // Technically, I should check error.message to make sure it's not a DB issue
-    return json$1({
-  message: 'Password reset token expired.'
-}, {
-      status: 403
-    })
-  }
+		return json({
+			message: 'Password successfully reset.'
+		})
+	} catch (error) {
+		// Technically, I should check error.message to make sure it's not a DB issue
+		return json(
+			{
+				message: 'Password reset token expired.'
+			},
+			{
+				status: 403
+			}
+		)
+	}
 }

package/src/routes/profile/+page.server.ts

@@ -5,7 +5,7 @@ export const load: PageServerLoad = async ({ locals }) => {
   const { user } = locals // populated by /src/hooks.ts
 
   const authorized = ['admin', 'teacher', 'student'] // must be logged-in
-  if (user && !authorized.includes(user.role)) {
+  if (!user || !authorized.includes(user.role)) {
     throw redirect(302, '/login?referrer=/profile')
   }
 

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

@@ -54,6 +54,7 @@
 
 
   const passwordMatch = () => {
+    if (!user) return false // placate TypeScript
     if (!user.password) user.password = ''
     return user.password == confirmPassword.value
   }
@@ -68,47 +69,49 @@
     <div class="card-body">
       <h4><strong>Register</strong></h4>
       <p>Welcome to our community.</p>
-      <form id="register" autocomplete="on" novalidate class="mt-3">
-        <div class="mb-3">
-          <div id="googleButton"></div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="email">Email</label>
-          <input bind:this={focusedField} type="email" class="form-control" bind:value={user.email} required placeholder="Email" id="email" autocomplete="email"/>
-          <div class="invalid-feedback">Email address required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="password">Password</label>
-          <input type="password" id="password" class="form-control" bind:value={user.password} required 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="password">Confirm password</label>
-          <input type="password" id="password" class="form-control" bind:this={confirmPassword} required minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
-          <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="firstName">First name</label>
-          <input bind:value={user.firstName} class="form-control" id="firstName" placeholder="First name" required autocomplete="given-name"/>
-          <div class="invalid-feedback">First name required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="lastName">Last name</label>
-          <input bind:value={user.lastName} class="form-control" id="lastName" placeholder="Last name" required autocomplete="family-name"/>
-          <div class="invalid-feedback">Last name required</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="phone">Phone</label>
-          <input type="tel" bind:value={user.phone} id="phone" class="form-control" placeholder="Phone" autocomplete="tel-local"/>
-        </div>
-      
-        {#if message}
-          <p class="text-danger">{message}</p>
-        {/if}
-      
-        <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
-      </form>
+      {#if user}
+        <form id="register" autocomplete="on" novalidate class="mt-3">
+          <div class="mb-3">
+            <div id="googleButton"></div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="email">Email</label>
+            <input bind:this={focusedField} type="email" class="form-control" bind:value={user.email} required placeholder="Email" id="email" autocomplete="email"/>
+            <div class="invalid-feedback">Email address required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="password">Password</label>
+            <input type="password" id="password" class="form-control" bind:value={user.password} required 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="password">Confirm password</label>
+            <input type="password" id="password" class="form-control" bind:this={confirmPassword} required minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
+            <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="firstName">First name</label>
+            <input bind:value={user.firstName} class="form-control" id="firstName" placeholder="First name" required autocomplete="given-name"/>
+            <div class="invalid-feedback">First name required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="lastName">Last name</label>
+            <input bind:value={user.lastName} class="form-control" id="lastName" placeholder="Last name" required autocomplete="family-name"/>
+            <div class="invalid-feedback">Last name required</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="phone">Phone</label>
+            <input type="tel" bind:value={user.phone} id="phone" class="form-control" placeholder="Phone" autocomplete="tel-local"/>
+          </div>
+        
+          {#if message}
+            <p class="text-danger">{message}</p>
+          {/if}
+        
+          <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
+        </form>
+      {/if}
     </div>
   </div>
 </div>

package/src/routes/teachers/+page.server.ts

@@ -2,8 +2,9 @@ import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({locals}) => {
+	const { user } = locals
 	const authorized = ['admin', 'teacher']
-	if (!locals.user || !authorized.includes(locals.user.role)) {
+	if (!user || !authorized.includes(user.role)) {
 		throw redirect(302, '/login?referrer=/teachers')
 	}
 

package/src/service-worker.ts

@@ -0,0 +1,74 @@
+/// <reference lib="webworker" />
+import { build, files, version } from '$service-worker'
+
+const worker = <ServiceWorkerGlobalScope> <unknown> self
+const cacheName = `cache${version}`
+const toCache = build.concat(files)
+const staticAssets = new Set(toCache)
+
+worker.addEventListener('install', event => {
+	// console.log('[Service Worker] Installation')
+	event.waitUntil(
+		caches
+			.open(cacheName)
+			.then(cache => cache.addAll(toCache))
+			.then(() => {
+				worker.skipWaiting()
+			})
+			.catch(error => console.error(error))
+	)
+})
+
+worker.addEventListener('activate', event => {
+	// console.log('[Service Worker] Activation')
+	event.waitUntil(
+		caches.keys()
+			.then(async (keys) => {
+				for (const key of keys) {
+					if (key !== cacheName) await caches.delete(key)
+				}
+			})
+	)
+	worker.clients.claim() // or should this be inside the caches.keys().then()?
+})
+
+// Fetch from network into cache and fall back to cache if user offline
+async function fetchAndCache(request: Request) {
+	const cache = await caches.open(`offline${version}`)
+
+	try {
+		const response = await fetch(request)
+		cache.put(request, response.clone())
+		return response
+	} catch (err) {
+		const response = await cache.match(request)
+		if (response) return response
+		throw err
+	}
+}
+
+worker.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return
+
+	const url = new URL(event.request.url)
+	// console.log(`[Service Worker] Fetch ${url}`)
+
+	// don't try to handle data: or blob: URIs
+	const isHttp = url.protocol.startsWith('http')
+	const isDevServerRequest = url.hostname === self.location.hostname && url.port !== self.location.port
+	const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname)
+	const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset
+
+	if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
+		event.respondWith(
+			(async () => {
+				// always serve static files and bundler-generated assets from cache.
+				// if your application has other URLs with data that will never change,
+				// set this variable to true for them and they will only be fetched once.
+				const cachedAsset = isStaticAsset && (await caches.match(event.request))
+
+				return cachedAsset || fetchAndCache(event.request)
+			})()
+		)
+	}
+})

package/src/stores.ts

@@ -1,17 +1,11 @@
-import { writable } from 'svelte/store'
+import { writable, type Writable } from 'svelte/store'
 
 export const toast = writable({
-  title: '',
-  body: '',
-  isOpen: false
+	title: '',
+	body: '',
+	isOpen: false
 })
 
 // While server determines whether the user is logged in by examining RequestEvent.locals.user, the
 // loginSession is updated so all parts of the SPA client-side see the user and role.
-
-export const defaultUser: User = {
-  id: 0, // the not-logged-in user id
-  role: 'student' // default role for users who are not logged in
-}
-
-export const loginSession = writable(defaultUser)
+export const loginSession = <Writable<User>> writable(undefined)

package/svelte.config.js

@@ -31,6 +31,9 @@ const config = {
 				'object-src': ['none'],
 				'base-uri': ['self']
 			}
+		},
+		files: {
+			serviceWorker: 'src/service-worker.ts'
 		}
 	}
 }

package/src/lib/config.ts

@@ -1,4 +0,0 @@
-// Only include data that is not sensitive
-export const config = {
-  googleClientId: import.meta.env.VITE_GOOGLE_CLIENT_ID
-}