sveltekit-auth-example 1.0.7 → 1.0.10

package/.eslintrc.cjs

@@ -10,7 +10,7 @@ module.exports = {
 	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2019
+		ecmaVersion: 2020
 	},
 	env: {
 		browser: true,

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 1.0.10
+* Bump dependencies
+* Adjust for changes to SvelteKit
+* Improve typings
+
+# 1.0.9
+* Bump dependencies
+* Adjust for changes to SvelteKit with respect to vite
+
 # 1.0.7
 * Bump dependencies and verify against latest SvelteKit
 * Additional changes for register PostgreSQL function

package/README.md

@@ -30,9 +30,9 @@ Pages use the session.user.role to determine whether they are authorized. While
 The forgot password functionality uses SendInBlue 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.
 
 ## Prerequisites
-- PostgreSQL 13 or higher
-- Node.js 16.13.0 or higher
-- npm 8.1.0 or higher
+- PostgreSQL 14 or higher
+- Node.js 16.16.0 or higher
+- npm 8.14.0 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)
 
@@ -53,7 +53,7 @@ npm install
 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).
+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.
 
 3. Create an **.env** file at the top level of the project with the following values (substituting your own id and PostgreSQL username and password):
 ```bash
@@ -83,4 +83,4 @@ The db_create.sql script adds three users to the database with obvious roles:
 
 ## My ask of you
 
-Please report any issues or areas where the code can be optimized. I am still learning Svelte and SvelteKit. All feedback is appreciated.
+Please report any issues or areas where the code can be optimized.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sveltekit-auth-example",
   "description": "SvelteKit Authentication Example",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -22,24 +22,25 @@
     "example"
   ],
   "scripts": {
-    "dev": "svelte-kit dev",
+    "start": "node build",
+    "dev": "vite dev",
     "serve": "npm run dev -- --open",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview",
+    "build": "vite build",
+    "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "engines": {
-    "node": "~16.15.0",
-    "npm": "^8.8.0"
+    "node": "~18.7.0",
+    "npm": "^8.15.1"
   },
   "type": "module",
   "dependencies": {
     "cookie": "^0.5.0",
-    "dotenv": "^16.0.0",
-    "google-auth-library": "^8.0.2",
+    "dotenv": "^16.0.1",
+    "google-auth-library": "^8.1.1",
     "jsonwebtoken": "^8.5.1",
     "pg": "^8.7.3",
     "pg-native": "^3.0.0"
@@ -47,22 +48,25 @@
   "devDependencies": {
     "@sveltejs/adapter-node": "latest",
     "@sveltejs/kit": "latest",
+    "@types/bootstrap": "5.2.1",
+    "@types/cookie": "^0.5.1",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/pg": "^8.6.5",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
-    "@typescript-eslint/parser": "^5.22.0",
-    "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.8.1",
-    "eslint": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "bootstrap": "^5.2.0",
+    "bootstrap-icons": "^1.9.1",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^3.4.1",
-    "prettier": "^2.6.2",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "sass": "^1.51.0",
-    "svelte": "^3.48.0",
-    "svelte-check": "^2.7.0",
-    "svelte-preprocess": "^4.10.6",
+    "sass": "^1.54.0",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
   }
 }

package/src/{global.d.ts → app.d.ts}

@@ -1,4 +1,5 @@
 /// <reference types="@sveltejs/kit" />
+/// <reference types="bootstrap" />
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -12,18 +13,12 @@ declare namespace App {
 	// interface Platform {}
 
 	interface Session {
-    reservationDate: Date
-    scheduledClass?: ScheduledClass
     user?: User
   }
 
 	// interface Stuff {}
 }
 
-interface ImportMetaEnv {
-  VITE_GOOGLE_CLIENT_ID: string
-}
-
 type AuthenticationResult = {
   statusCode: number
   status: string
@@ -36,14 +31,31 @@ type Credentials = {
   password: string
 }
 
+interface GoogleCredentialResponse {
+	credential: string
+	select_by:
+		| 'auto'
+		| 'user'
+		| 'user_1tap'
+		| 'user_2tap'
+		| 'btn'
+		| 'btn_confirm'
+		| 'btn_add_session'
+		| 'btn_confirm_add_session'
+}
+
+interface ImportMetaEnv {
+  VITE_GOOGLE_CLIENT_ID: string
+}
+
 type MessageAddressee = {
   email: string
   name?: string
 }
 
 type Message = {
-  sender?: MessageAddressee[]
-  to: MessageAddressee[]
+  sender?: MessageAddressee
+  to?: MessageAddressee[]
   subject: string
   htmlContent?: string
   textContent?: string
@@ -51,9 +63,30 @@ type Message = {
   contact?: Person
 }
 
+interface SendInBlueContact {
+  updateEnabled: boolean
+  email: string
+  emailBlacklisted: boolean
+  attributes: {
+    NAME: string
+    SURNAME: string
+  }
+}
+
+interface SendInBlueMessage extends Message {
+  sender: MessageAddressee
+  to: MessageAddressee[]
+}
+
+interface SendInBlueRequest extends RequestInit {
+  headers: {
+    'api-key': string
+  }
+}
+
 type User = {
-  id?: number
-  role?: 'student' | 'teacher' | 'admin'
+  id: number
+  role: 'student' | 'teacher' | 'admin'
   password?: string
   firstName?: string
   lastName?: string
@@ -68,4 +101,6 @@ type UserSession = {
 
 interface Window {
   google?: any
+  grecaptcha: any
+  bootstrap: Bootstrap
 }

package/src/app.html

@@ -4,9 +4,9 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div id="svelte">%sveltekit.body%</div>
 	</body>
-</html>
+</html>

package/src/hooks.ts

@@ -14,7 +14,7 @@ async function attachUserToRequest(sessionId: string, event: RequestEvent) {
 
 function deleteCookieIfNoUser(event: RequestEvent, response: Response) {
   if (!event.locals.user) {
-    response.headers['Set-Cookie'] = `session=; Path=/; HttpOnly; SameSite=Lax; Expires=${new Date().toUTCString()}`
+    response.headers.set('Set-Cookie', `session=; Path=/; HttpOnly; SameSite=Lax; Expires=${new Date().toUTCString()}`)
   }
 }
 
@@ -27,7 +27,9 @@ export const handle: Handle = async ({ event, resolve }) => {
     await attachUserToRequest(cookies.session, event)
   }
 
-  const response = await resolve(event)
+  const response = await resolve(event, {
+		ssr: !event.request.url.includes('/admin')
+	})
 
   // after endpoint or page is called
   deleteCookieIfNoUser(event, response)

package/src/lib/auth.ts

@@ -10,15 +10,15 @@ type Page = Readable<{
   error: Error | null;
 }>
 
-export default function useAuth(page: Page, session: Writable<any>, goto) {
+export default function useAuth(page: Page, session: Writable<any>, goto: (url: string | URL, opts?: { replaceState?: boolean; noscroll?: boolean; keepfocus?: boolean; state?: any; }) => Promise<any>) {
 
   // Required to use session.set()
-  let sessionValue
+  let sessionValue: App.Session
   session.subscribe(value => {
     sessionValue = value
   })
 
-  let referrer
+  let referrer: string | null
   page.subscribe(value => {
 		referrer = value.url.searchParams.get('referrer')
 	})
@@ -67,7 +67,7 @@ export default function useAuth(page: Page, session: Writable<any>, goto) {
     }))
   }
 
-  async function googleCallback(response) {
+  async function googleCallback(response: GoogleCredentialResponse) {
     const res = await fetch('/auth/google', {
       method: 'POST',
       headers: {
@@ -105,12 +105,14 @@ export default function useAuth(page: Page, session: Writable<any>, goto) {
         throw new Error(fromEndpoint.message)
       }
     } catch (err) {
-      console.error('Login error', err)
-      throw new Error(err.message)
+      if (err instanceof Error) {
+        console.error('Login error', err)
+        throw new Error(err.message)
+      }
     }
   }
 
-  async function loginLocal(credentials) {
+  async function loginLocal(credentials: Credentials) {
     try {
       const res = await fetch('/auth/login', {
         method: 'POST',
@@ -131,8 +133,10 @@ export default function useAuth(page: Page, session: Writable<any>, goto) {
         throw new Error(fromEndpoint.message)
       }
     } catch (err) {
-      console.error('Login error', err)
-      throw new Error(err.message)
+      if (err instanceof Error) {
+        console.error('Login error', err)
+        throw new Error(err.message)
+      }
     }
   }
 

package/src/lib/focus.ts

@@ -1,8 +1,6 @@
-type FocusResult = (formName: HTMLFormElement) => void
-
-export const focusOnFirstError: FocusResult = (form: HTMLFormElement) => {
+export const focusOnFirstError = (form: HTMLFormElement) => {
   for(const field of form.elements) {
-    if (!field.checkValidity()) {
+    if (field instanceof HTMLInputElement && !field.checkValidity()) {
       field.focus()
       break
     }

package/src/routes/__error.svelte

@@ -1,15 +1,18 @@
 <script lang="ts" context="module">
-  export const load = ({ error, status }) => {
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = ({ error, status }) => {
+    const { message } = <Error> error
     return {
       props: {
-        errorMessage: `${status}: ${error.message}`
+        errorMessage: `${status}: ${message}`
       }
     }
   }
 </script>
 
 <script lang="ts">
-  export let errorMessage
+  export let errorMessage = ''
 </script>
 
 <h1>Error</h1>

package/src/routes/__layout.svelte

@@ -8,12 +8,7 @@
   // Vue.js Composition API style
 	const { loadScript, initializeSignInWithGoogle, logout } = useAuth(page, session, goto)
 
-  let sessionValue
-  session.subscribe(value => {
-		sessionValue = value
-	})
-
-  let Toast
+  let Toast: any
 
   onMount(async() => {
     await import('bootstrap/js/dist/collapse')

package/src/routes/_db.ts

@@ -5,13 +5,13 @@ import pg from 'pg'
 
 dotenv.config()
 
-const pgNativePool = new pg.native.Pool({
+const pool = new pg.Pool({
   max: 10, // default
-  connectionString: process.env['DATABASE_URL'],
+  connectionString: process.env.DATABASE_URL,
   ssl: {
     rejectUnauthorized: false
   }
 })
 
 type PostgresQueryResult = (sql: string, params?: any[]) => Promise<QueryResult<any>>
-export const query: PostgresQueryResult = (sql, params?) => pgNativePool.query(sql, params)
+export const query: PostgresQueryResult = (sql, params?) => pool.query(sql, params)

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

@@ -2,14 +2,14 @@ import dotenv from 'dotenv'
 
 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 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 || '')
 
 // POST or PUT submission to SendInBlue
-const submit = async (method, url, data) => {
-  const response: Response = await fetch(`${SEND_IN_BLUE_URL}${url}`, {
+const submit = async (method: string, url: string, data: Partial<SendInBlueContact> | SendInBlueMessage) => {
+  const response: Response = await fetch(`${SEND_IN_BLUE_URL}${url}`, <SendInBlueRequest> {
     method,
     headers: {
       'Content-Type': 'application/json',
@@ -23,7 +23,7 @@ const submit = async (method, url, data) => {
   }
 }
 
-const sender = SEND_IN_BLUE_FROM
+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 })
+export const sendMessage = async (message: Message) => submit('POST', '/v3/smtp/email', { sender, to: [to], ...message })

package/src/routes/admin.svelte

@@ -1,9 +1,9 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit'
 
-	export const load: Load = async ({ session }) => {
+	export const load: Load = async ({ fetch, session }) => {
 		const authorized = ['admin']
-		if (!authorized.includes(session.user?.role)) {
+		if (session.user && !authorized.includes(session.user.role)) {
 			return {
 				status: 302,
 				redirect: '/login?referrer=/admin'
@@ -28,7 +28,7 @@
 </script>
 
 <script lang="ts">
-	export let message
+	export let message = ''
 </script>
 
 <svelte:head>

package/src/routes/api/v1/_auth.ts

@@ -0,0 +1,5 @@
+import type { RequestEvent } from "@sveltejs/kit"
+
+export function requestAuthorized(event: RequestEvent, roles: string[]): boolean {
+  return !!event.locals.user && roles.includes(event.locals.user.role)
+}

package/src/routes/api/v1/admin.ts

@@ -1,9 +1,8 @@
 import type { RequestHandler } from '@sveltejs/kit'
+import { requestAuthorized } from './_auth'
 
-export const get: RequestHandler = async event => {
-  const authorized = ['admin']
-
-  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+export const GET: RequestHandler = async event => {
+  if (!requestAuthorized(event, ['admin'])) {
     return {
       status: 401,
       body: {

package/src/routes/api/v1/teacher.ts

@@ -1,9 +1,8 @@
 import type { RequestHandler } from '@sveltejs/kit'
+import { requestAuthorized } from './_auth'
 
-export const get: RequestHandler = async event=> {
-  const authorized = ['admin', 'teacher']
-
-  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+export const GET: RequestHandler = async event=> {
+  if (!requestAuthorized(event, ['admin', 'teacher'])) {
     return {
       status: 401,
       body: {

package/src/routes/api/v1/user.ts

@@ -1,10 +1,9 @@
 import type { RequestHandler } from '@sveltejs/kit'
 import { query } from '../../_db'
+import { requestAuthorized } from './_auth'
 
-export const put: RequestHandler = async event => {
-  const authorized = ['admin', 'teacher', 'student']
-
-  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+export const PUT: RequestHandler = async event => {
+  if (!requestAuthorized(event, ['admin', 'teacher', 'student'])) {
     return {
       status: 401,
       body: {

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

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit'
 import { query } from '../_db'
 
-export const post: RequestHandler = async event => {
+export const POST: RequestHandler = async event => {
   const { slug } = event.params
 
   let result

package/src/routes/auth/forgot.ts

@@ -6,10 +6,10 @@ import { query } from '../_db'
 import { sendMessage } from '../_send-in-blue'
 
 dotenv.config()
-const DOMAIN = process.env['DOMAIN']
-const JWT_SECRET: Secret = process.env['JWT_SECRET']
+const DOMAIN = process.env.DOMAIN
+const JWT_SECRET = process.env.JWT_SECRET
 
-export const post: RequestHandler = async event => {
+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;`
   const { rows } = await query(sql, [body.email])
@@ -18,7 +18,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, {
+    const token = jwt.sign({ subject: userId }, <Secret> secret, {
       expiresIn: '30m'
     })
 

package/src/routes/auth/google.ts

@@ -4,7 +4,7 @@ import { query } from '../_db';
 import { config } from '$lib/config'
 
 // Verify JWT per https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
-async function getGoogleUserFromJWT(token: string): Promise<User> {
+async function getGoogleUserFromJWT(token: string): Promise<Partial<User>> {
   try {
     const clientId = config.googleClientId
     const client = new OAuth2Client(clientId)
@@ -13,29 +13,34 @@ async function getGoogleUserFromJWT(token: string): Promise<User> {
       audience: clientId
     });
     const payload = ticket.getPayload()
+    if (!payload) throw new Error('Google authentication did not get the expected payload')
     return {
-      firstName: payload['given_name'],
-      lastName: payload['family_name'],
+      firstName: payload['given_name'] || 'UnknownFirstName',
+      lastName: payload['family_name'] || 'UnknownLastName',
       email: payload['email']
     }
-  } catch (error) {
-    throw new Error(`Google user could not be authenticated: ${error.message}`)
+  } catch (err) {
+    let message = ''
+    if (err instanceof Error) message = err.message
+    throw new Error(`Google user could not be authenticated: ${message}`)
   }
 }
 
 // Upsert user and get session ID
-async function upsertGoogleUser(user: User): Promise<UserSession> {
+async function upsertGoogleUser(user: Partial<User>): Promise<UserSession> {
   try {
     const sql = `SELECT start_gmail_user_session($1) AS user_session;`
     const { rows } = await query(sql, [JSON.stringify(user)])
     return <UserSession> rows[0].user_session
-  } catch (error) {
-    throw new Error(`GMail user could not be upserted: ${error.message}`)
+  } catch (err) {
+    let message = ''
+    if (err instanceof Error) message = err.message
+    throw new Error(`GMail user could not be upserted: ${message}`)
   }
 }
 
 // Returns local user if Google user authenticated (and authorized our app)
-export const post: RequestHandler = async event => {
+export const POST: RequestHandler = async event => {
   try {
     const { token } = await event.request.json()
     const user = await getGoogleUserFromJWT(token)
@@ -54,11 +59,13 @@ export const post: RequestHandler = async event => {
         user: userSession.user
       }
     }
-  } catch (error) {
+  } catch (err) {
+    let message = ''
+    if (err instanceof Error) message = err.message
     return { // session cookie deleted by hooks.js handle()
       status: 401,
       body: {
-        message: error.message
+        message: message
       }
     }
   }

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

@@ -34,7 +34,7 @@
 
   const resetPassword = async () => {
     message = ''
-    const form = document.forms['reset']
+    const form = <HTMLFormElement> document.getElementById('reset')
 
     if (!passwordMatch()) {
       confirmPassword.classList.add('is-invalid')

package/src/routes/auth/reset/index.ts

@@ -6,9 +6,9 @@ import { query } from '../../_db'
 
 dotenv.config()
 
-const JWT_SECRET = process.env['JWT_SECRET']
+const JWT_SECRET =  <jwt.Secret> process.env.JWT_SECRET
 
-export const put: RequestHandler = async event => {
+export const PUT: RequestHandler = async event => {
   const body = await event.request.json()
   const { token, password } = body
 

package/src/routes/forgot.svelte

@@ -14,7 +14,7 @@
 
   const sendPasswordReset = async () => {
     message = ''
-    const form = document.forms['forgot']
+    const form = <HTMLFormElement> document.getElementById('forgot')
 
     if (form.checkValidity()) {
       if (email.toLowerCase().includes('gmail.com')) {

package/src/routes/login.svelte

@@ -16,14 +16,16 @@
 
   async function login() {
     message = ''
-    const form = document.forms['signIn']
+    const form = <HTMLFormElement> document.getElementById('signIn')
 
     if (form.checkValidity()) {
       try {
         await loginLocal(credentials)
       } catch (err) {
-        console.error('Login error', err.message)
-        message = err.message
+        if (err instanceof Error) {
+          console.error('Login error', err.message)
+          message = err.message
+        }
       }
     } else {
       form.classList.add('was-validated')

package/src/routes/profile.svelte

@@ -3,7 +3,7 @@
 
   export const load: Load = ({ session }) => {
     const authorized = ['admin', 'teacher', 'student'] // must be logged-in
-		if (!authorized.includes(session.user?.role)) {
+		if (session.user && !authorized.includes(session.user.role)) {
 			return {
 				status: 302,
 				redirect: '/login?referrer=/profile'
@@ -20,6 +20,7 @@
 </script>
 
 <script lang="ts">
+  import { onMount } from 'svelte'
   import { session } from '$app/stores'
   import { focusOnFirstError } from '$lib/focus';
 
@@ -28,11 +29,15 @@
   let confirmPassword: HTMLInputElement
   export let user: User
 
+  onMount(() => {
+    focusedField.focus()
+	})
+
   async function update() {
     message = ''
-    const form = document.forms['profile']
+    const form = <HTMLFormElement> document.getElementById('profile')
 
-    if (!user.email.includes('gmail.com') && !passwordMatch()) {
+    if (!user?.email?.includes('gmail.com') && !passwordMatch()) {
       confirmPassword.classList.add('is-invalid')
       return
     }
@@ -72,7 +77,7 @@
       <h4><strong>Profile</strong></h4>
       <p>Update your information.</p>
       <form id="profile" autocomplete="on" novalidate class="mt-3">
-        {#if !user.email.includes('gmail.com')}
+        {#if !user?.email?.includes('gmail.com')}
           <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"/>
@@ -92,7 +97,7 @@
         {/if}
         <div class="mb-3">
           <label class="form-label" for="firstName">First name</label>
-          <input bind:value={user.firstName} class="form-control" id="firstName" required placeholder="First name" autocomplete="given-name"/>
+          <input bind:this={focusedField} bind:value={user.firstName} class="form-control" id="firstName" required placeholder="First name" autocomplete="given-name"/>
           <div class="invalid-feedback">First name required</div>
         </div>
         <div class="mb-3">

package/src/routes/register.svelte

@@ -23,7 +23,9 @@
 
   let focusedField: HTMLInputElement
 
-  let user = {
+  let user: User = {
+    id: 0,
+    role: 'student',
     firstName: '',
     lastName: '',
     password: '',
@@ -34,7 +36,7 @@
   let message: string
 
   async function register() {
-    const form = document.forms['register']
+    const form = <HTMLFormElement> document.getElementById('register')
     message = ''
 
     if (!passwordMatch()) {
@@ -46,8 +48,10 @@
       try {
         await registerLocal(user)
       } catch (err) {
-        console.error('Login error', err.message)
-        message = err.message
+        if (err instanceof Error) {
+          message = err.message
+          console.error('Login error', message)
+        }
       }
     } else {
       form.classList.add('was-validated')
@@ -59,7 +63,7 @@
   onMount(() => {
     focusedField.focus()
     initializeSignInWithGoogle()
-    google.accounts.id.renderButton(
+    window.google.accounts.id.renderButton(
       document.getElementById('googleButton'),
       { theme: 'filled_blue', size: 'large', width: '367' }  // customization attributes
     )

package/src/routes/teachers.svelte

@@ -1,9 +1,9 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit'
 
-	export const load: Load = async ({ session }) => {
+	export const load: Load = async ({ fetch, session }) => {
     const authorized = ['admin', 'teacher']
-		if (!authorized.includes(session.user?.role)) {
+		if (!session.user || !authorized.includes(session.user.role)) {
 			return {
 				status: 302,
 				redirect: '/login?referrer=/teachers'
@@ -27,7 +27,7 @@
 </script>
 
 <script lang="ts">
-	export let message
+	export let message = ''
 </script>
 
 <svelte:head>

package/svelte.config.js

@@ -33,11 +33,6 @@ const config = {
 				'base-uri': ['self'],
 				// 'require-trusted-types-for': ["'script'"] // will require effort to get this working
 			}
-		},
-		vite: {
-			serviceWorker: {
-				files: (filepath) => !/\.DS_Store/.test(filepath)
-			}
 		}
 	}
 }

package/tsconfig.json

@@ -1,32 +1,13 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM"],
-		"target": "es2019",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
 		"allowJs": true,
 		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
 }

package/vite.config.js

@@ -0,0 +1,16 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()],
+	serviceWorker: {
+		files: (filepath) => !/\.DS_Store/.test(filepath)
+	},
+	server: {
+		host: 'localhost',
+		port: 3000,
+		open: 'http://localhost:3000'
+	}
+}
+
+export default config