sveltekit-auth-example 1.0.20 → 1.0.23

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,7 +1,17 @@
 # Backlog
-* 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.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
+
+# 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

package/README.md

@@ -28,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)
 
@@ -62,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.20",
+  "version": "1.0.23",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -18,8 +18,7 @@
     "authentication",
     "example",
     "google",
-    "postgresql",
-    "example"
+    "postgresql"
   ],
   "scripts": {
     "start": "node build",
@@ -38,26 +37,23 @@
   },
   "type": "module",
   "dependencies": {
-    "dotenv": "^16.0.2",
-    "google-auth-library": "^8.5.1",
-    "jsonwebtoken": "^8.5.1",
     "pg": "^8.8.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "latest",
     "@sveltejs/kit": "latest",
     "@types/bootstrap": "5.2.4",
-    "@types/cookie": "^0.5.1",
     "@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",
-    "bootstrap-icons": "^1.9.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",
+    "jsonwebtoken": "^8.5.1",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "sass": "^1.54.9",

package/src/app.d.ts

@@ -13,9 +13,19 @@ declare namespace App {
 
 	// interface Platform {}
 
-  // interface PrivateEnv {} // $env/dynamic/private
-
-	// interface PublicEnv {} // $env/dynamic/public
+  interface PrivateEnv { // $env/static/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/static/public
+    PUBLIC_GOOGLE_CLIENT_ID: string
+  }
 }
 
 interface AuthenticationResult {
@@ -43,10 +53,6 @@ interface GoogleCredentialResponse {
 		| 'btn_confirm_add_session'
 }
 
-interface ImportMetaEnv {
-  VITE_GOOGLE_CLIENT_ID: string
-}
-
 interface MessageAddressee {
   email: string
   name?: string

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

@@ -2,7 +2,7 @@
 
 import type { Page } from '@sveltejs/kit'
 import type { Readable, Writable } from 'svelte/store'
-import { config } from '$lib/config'
+import { PUBLIC_GOOGLE_CLIENT_ID } from '$env/static/public'
 
 export default function useAuth(
 	page: Readable<Page>,
@@ -44,7 +44,7 @@ export default function useAuth(
 
 	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 })
+		id.initialize({ client_id: PUBLIC_GOOGLE_CLIENT_ID, callback: googleCallback })
 
 		if (htmlId) {
 			// render button instead of prompt
@@ -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/_db.ts → lib/server/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 → lib/server/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/+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

@@ -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

@@ -1,13 +1,9 @@
 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
+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()
@@ -24,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,17 +1,16 @@
 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 '$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
 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')
@@ -48,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

@@ -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'
+import { query } from '$lib/server/db'
 
-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/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.'
   }
 }

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
-}