sveltekit-auth-example 1.0.22 → 1.0.24

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.24
+* Bump dependencies
+
+# 1.0.23
+* Restructured server-side libraries to $lib/server based on https://github.com/sveltejs/kit/pull/6623
+* General cleanup
+
 # 1.0.22
 * Move google-auth-library and jsonwebtoken to devDependencies from dependencies and other cleanup to package.json
 

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.22",
+  "version": "1.0.24",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -33,7 +33,7 @@
   },
   "engines": {
     "node": "~18.9.0",
-    "npm": "^8.19.1"
+    "npm": "^8.19.2"
   },
   "type": "module",
   "dependencies": {
@@ -46,10 +46,10 @@
     "@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",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
     "bootstrap": "^5.2.1",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "google-auth-library": "^8.5.1",
@@ -62,6 +62,6 @@
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.8.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.2"
   }
 }

package/src/app.d.ts

@@ -13,7 +13,7 @@ declare namespace App {
 
 	// interface Platform {}
 
-  interface PrivateEnv { // $env/dynamic/private
+  interface PrivateEnv { // $env/static/private
     DATABASE_URL: string
     DOMAIN: string
     JWT_SECRET: string
@@ -23,7 +23,7 @@ declare namespace App {
     SEND_IN_BLUE_ADMINS: string
   } 
 
-	interface PublicEnv { // $env/dynamic/public
+	interface PublicEnv { // $env/static/public
     PUBLIC_GOOGLE_CLIENT_ID: string
   }
 }

package/src/app.html

@@ -2,7 +2,7 @@
 <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>
 		%sveltekit.head%

package/src/hooks.server.ts

@@ -1,5 +1,5 @@
 import type { Handle, RequestEvent } from '@sveltejs/kit'
-import { query } from './routes/_db'
+import { query } from '$lib/server/db'
 
 // Attach authorization to each server request (role may have changed)
 async function attachUserToRequestEvent(sessionId: string, event: RequestEvent) {

package/src/lib/auth.ts

@@ -62,7 +62,7 @@ export default function useAuth(
 		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'
+				body: JSON.stringify(user), // server ignores user.role - always set it to 'student' (lowest priv)
 				headers: {
 					'Content-Type': 'application/json'
 				}

package/src/routes/+layout.server.ts

@@ -1,8 +1,7 @@
 import type { LayoutServerLoad } from './$types'
 
-export const load: LayoutServerLoad = (event) => {
-  const locals = event.locals
-  const { user }: { user: User } = locals // locals.user set by hooks.ts/handle(), undefined if not logged in
+export const load: LayoutServerLoad = ({ locals }) => {
+  const { user } = locals // locals.user set by hooks.server.ts/handle(), undefined if not logged in
   return {
     user
   }

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 endpoint.'
-  }
+		message: 'Admin-only content from server.'
+	}
 }

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

@@ -1,6 +1,6 @@
-import { error, json} from '@sveltejs/kit'
+import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
-import { query } from '../../../_db'
+import { query } from '$lib/server/db'
 
 export const PUT: RequestHandler = async event => {
   const { user } = event.locals

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

@@ -1,6 +1,6 @@
 import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
-import { query } from '../../_db'
+import { query } from '$lib/server/db'
 
 export const POST: RequestHandler = async (event) => {
 	const { slug } = event.params
@@ -11,8 +11,7 @@ export const POST: RequestHandler = async (event) => {
 	try {
 		switch (slug) {
 			case 'logout':
-				if (event.locals.user) {
-					// if user is null, they are logged out anyway (session might have ended)
+				if (event.locals.user) { // else they are logged out / session ended
 					sql = `CALL delete_session($1);`
 					result = await query(sql, [event.locals.user.id])
 				}
@@ -50,7 +49,7 @@ export const POST: RequestHandler = async (event) => {
 		// includes when a user tries to register an existing email account with wrong password
 		throw error(authenticationResult.statusCode, authenticationResult.status)
 
-	// Ensures hooks.ts:handle() will not delete cookie just set
+	// Ensures hooks.server.ts:handle() will not delete session cookie
 	event.locals.user = authenticationResult.user
 
 	return json(

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

@@ -2,8 +2,8 @@ import type { RequestHandler } from './$types'
 import { JWT_SECRET, DOMAIN } from '$env/static/private'
 import type { Secret } from 'jsonwebtoken'
 import jwt from 'jsonwebtoken'
-import { query } from '../../_db'
-import { sendMessage } from '../../_send-in-blue'
+import { query } from '$lib/server/db'
+import { sendMessage } from '$lib/server/send-in-blue'
 
 export const POST: RequestHandler = async event => {
   const body = await event.request.json()
@@ -20,7 +20,6 @@ export const POST: RequestHandler = async event => {
 
     // Email URL with token to user
     const message: Message = {
-      // sender: JSON.parse(<string> VITE_EMAIL_FROM),
       to: [{ email: body.email }],
       subject: 'Password reset',
       tags: ['account'],

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

@@ -1,7 +1,7 @@
 import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import { OAuth2Client } from 'google-auth-library'
-import { query } from '../../_db'
+import { query } from '$lib/server/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
@@ -47,7 +47,7 @@ export const POST: RequestHandler = async event => {
     const user = await getGoogleUserFromJWT(token)
     const userSession = await upsertGoogleUser(user)
 
-    // Prevent hooks.ts's handler() from deleting cookie thinking no one has authenticated
+    // Prevent hooks.server.ts's handler() from deleting cookie thinking no one has authenticated
     event.locals.user = userSession.user
 
     return json({

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

@@ -2,8 +2,8 @@ import { json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import type { JwtPayload } from 'jsonwebtoken'
 import jwt from 'jsonwebtoken'
-import { query } from '../../_db'
 import { JWT_SECRET } from '$env/static/private'
+import { query } from '$lib/server/db'
 
 export const PUT: RequestHandler = async (event) => {
 	const body = await event.request.json()

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

@@ -52,7 +52,6 @@
     initializeSignInWithGoogle('googleButton')
   })
 
-
   const passwordMatch = () => {
     if (!user) return false // placate TypeScript
     if (!user.password) user.password = ''

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

@@ -9,6 +9,6 @@ export const load: PageServerLoad = async ({locals}) => {
 	}
 
   return {
-    message: 'Teachers or Admin-only content from endpoint.'
+    message: 'Teachers or Admin-only content from server.'
   }
 }