sveltekit-auth-example 1.0.23 → 1.0.25

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Backlog
 * Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 1.0.25
+* Bump dependencies
+* Simplify Sign In With Google
+
+# 1.0.24
+* Bump dependencies
+
 # 1.0.23
 * Restructured server-side libraries to $lib/server based on https://github.com/sveltejs/kit/pull/6623
 * General cleanup

package/README.md

@@ -2,10 +2,12 @@
 
 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). As almost every recent release of SvelteKit introduced breaking changes, this project attempts to
-maintain compatibility with the latest release.
+maintain compatibility with the latest release and leverage new APIs.
 
 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).
 
+The project includes a Content Security Policy (CSP) in svelte.config.js.
+
 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
@@ -25,7 +27,7 @@ The website supports two types of authentication:
 
 > 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.
 
-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).
+The forgot password / password reset functionality uses a JWT and [**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** (used their API because on another project).
 
 ## Prerequisites
 - PostgreSQL 14.5 or higher

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sveltekit-auth-example",
   "description": "SvelteKit Authentication Example",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -32,8 +32,8 @@
 		"format": "prettier --write ."
   },
   "engines": {
-    "node": "~18.9.0",
-    "npm": "^8.19.1"
+    "node": "~18.9.1",
+    "npm": "^8.19.2"
   },
   "type": "module",
   "dependencies": {
@@ -46,22 +46,22 @@
     "@types/google.accounts": "0.0.2",
     "@types/jsonwebtoken": "^8.5.9",
     "@types/pg": "^8.6.5",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
     "bootstrap": "^5.2.1",
-    "eslint": "^8.23.1",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "google-auth-library": "^8.5.1",
+    "google-auth-library": "^8.5.2",
     "jsonwebtoken": "^8.5.1",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "sass": "^1.54.9",
+    "sass": "^1.55.0",
     "svelte": "^3.50.1",
     "svelte-check": "^2.9.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.8.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   }
 }

package/src/app.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%//favicon.png" sizes="any" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<script src="https://accounts.google.com/gsi/client" async defer></script>
+		<script nonce="%sveltekit.nonce%" src="https://accounts.google.com/gsi/client" async defer></script>
 		%sveltekit.head%
 	</head>
 	<body>

package/src/routes/+layout.svelte

@@ -4,7 +4,7 @@
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { loginSession, toast } from '../stores'
-  import useAuth from '$lib/auth'
+  import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
   import 'bootstrap/scss/bootstrap.scss' // preferred way to load Bootstrap SCSS for hot module reloading
 
 	export let data: LayoutServerData
@@ -13,18 +13,53 @@
   const { user } = data
   $loginSession = user
 
-  // Vue.js Composition API style
-	const { initializeSignInWithGoogle, logout } = useAuth(page, loginSession, goto)
-
   let Toast: any
 
   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()
+		window.google.accounts.id.initialize({
+      client_id: PUBLIC_GOOGLE_CLIENT_ID,
+      callback: googleCallback
+    })
+
+    if (!$loginSession) window.google.accounts.id.prompt()
 	})
 
+  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})`)
+	}
+
+  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
+      const referrer = $page.url.searchParams.get('referrer')
+			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
+		}
+	}
+
   const openToast = (open: boolean) => {
     if (open) {
       const toastDiv = <HTMLDivElement> document.getElementById('authToast')

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

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
-export const load: PageServerLoad = async ({locals})=> {
+export const load: PageServerLoad = async ({ locals }) => {
 	const { user } = locals
 	const authorized = ['admin']
 	if (!user || !authorized.includes(user.role)) {
@@ -9,6 +9,6 @@ export const load: PageServerLoad = async ({locals})=> {
 	}
 
 	return {
-    message: 'Admin-only content from server.'
-  }
+		message: 'Admin-only content from server.'
+	}
 }

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

@@ -3,11 +3,8 @@
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { loginSession } from '../../stores'
-  import useAuth from '$lib/auth'
   import { focusOnFirstError } from '$lib/focus'
 
-  const { initializeSignInWithGoogle, loginLocal } = useAuth(page, loginSession, goto)
-
   let focusedField: HTMLInputElement
   let message: string
   const credentials: Credentials = {
@@ -35,9 +32,42 @@
   }
 
   onMount(async() => {
-    initializeSignInWithGoogle('googleButton')
+    window.google.accounts.id.renderButton(document.getElementById('googleButton'), {
+				theme: 'filled_blue',
+				size: 'large',
+				width: '367'
+    })
     focusedField.focus()
 	})
+
+  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
+        const referrer = $page.url.searchParams.get('referrer')
+				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)
+			}
+		}
+	}
 </script>
 
 <svelte:head>

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

@@ -1,13 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
-  import { page } from '$app/stores'
   import { loginSession } from '../../stores'
-  import useAuth from '$lib/auth'
   import { focusOnFirstError } from '$lib/focus'
 
-  const { initializeSignInWithGoogle, registerLocal } = useAuth(page, loginSession, goto)
-
   let focusedField: HTMLInputElement
 
   let user: User = {
@@ -49,9 +45,41 @@
 
   onMount(() => {
     focusedField.focus()
-    initializeSignInWithGoogle('googleButton')
+    window.google.accounts.id.renderButton(document.getElementById('googleButton'), {
+				theme: 'filled_blue',
+				size: 'large',
+				width: '367'
+    })
   })
 
+  async function registerLocal(user: User) {
+		try {
+			const res = await fetch('/auth/register', {
+				method: 'POST',
+				body: JSON.stringify(user), // server ignores user.role - always set it to 'student' (lowest priv)
+				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)
+			}
+		}
+	}
+
   const passwordMatch = () => {
     if (!user) return false // placate TypeScript
     if (!user.password) user.password = ''

package/src/lib/auth.ts

@@ -1,130 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { Page } from '@sveltejs/kit'
-import type { Readable, Writable } from 'svelte/store'
-import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
-
-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) => {
-		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
-		}
-	}
-
-	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 (htmlId) {
-			// render button instead of prompt
-			return id.renderButton(document.getElementById(htmlId), {
-				theme: 'filled_blue',
-				size: 'large',
-				width: '367'
-			})
-		}
-
-		if (!user) id.prompt()
-	}
-
-	async function registerLocal(user: User) {
-		try {
-			const res = await fetch('/auth/register', {
-				method: 'POST',
-				body: JSON.stringify(user), // server ignores user.role - always set it to 'student' (lowest priv)
-				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)
-			}
-		}
-	}
-
-	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(undefined) // delete loginSession.user from
-			goto('/login')
-		} else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
-	}
-
-	return { initializeSignInWithGoogle, registerLocal, loginLocal, logout }
-}