sveltekit-auth-example 1.0.11 → 1.0.14

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

@@ -0,0 +1,66 @@
+import { error, json } from '@sveltejs/kit'
+import type { Action } from './$types'
+import { query } from '../../_db'
+
+export const POST: Action = async (event) => {
+	const { slug } = event.params
+
+	let result
+	let sql
+
+	try {
+		switch (slug) {
+			case 'logout':
+				if (event.locals.user) {
+					// if user is null, they are logged out anyway (session might have ended)
+					sql = `CALL delete_session($1);`
+					result = await query(sql, [event.locals.user.id])
+				}
+				return new Response(JSON.stringify({ message: 'Logout successful.' }), {
+					headers: {
+						'Set-Cookie': `session=; Path=/; SameSite=Lax; HttpOnly; Expires=${new Date().toUTCString()}`
+					}
+				})
+			case 'login':
+				sql = `SELECT authenticate($1) AS "authenticationResult";`
+				break
+			case 'register':
+				sql = `SELECT register($1) AS "authenticationResult";`
+				break
+			default:
+				throw error(404, 'Invalid endpoint.')
+		}
+
+		// Only /auth/login and /auth/register at this point
+		const body = await event.request.json()
+
+		// While client checks for these to be non-null, register() in the database does not
+		if (slug == 'register' && (!body.email || !body.password || !body.firstName || !body.lastName))
+			throw error(400, 'Please supply all required fields: email, password, first and last name.')
+
+		result = await query(sql, [JSON.stringify(body)])
+	} catch (err) {
+		throw error(503, 'Could not communicate with database.')
+	}
+
+	const { authenticationResult }: { authenticationResult: AuthenticationResult } = result.rows[0]
+
+	if (!authenticationResult.user)
+		// 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
+	event.locals.user = authenticationResult.user
+
+	return json(
+		{
+			message: authenticationResult.status,
+			user: authenticationResult.user
+		},
+		{
+			headers: {
+				'Set-Cookie': `session=${authenticationResult.sessionId}; Path=/; SameSite=Lax; HttpOnly;`
+			}
+		}
+	)
+}

package/src/routes/auth/{forgot.ts → forgot/+server.ts}

@@ -1,15 +1,15 @@
-import type { RequestHandler } from '@sveltejs/kit'
+import type { Action } from './$types'
 import type { Secret } from 'jsonwebtoken'
 import jwt from 'jsonwebtoken'
 import dotenv from 'dotenv'
-import { query } from '../_db'
-import { sendMessage } from '../_send-in-blue'
+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 => {
+export const POST: Action = 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])
@@ -36,7 +36,5 @@ export const POST: RequestHandler = async event => {
     sendMessage(message)
   }
 
-  return {
-    status: 204
-  }
+  return new Response(undefined, { status: 204 })
 }

package/src/routes/auth/{google.ts → google/+server.ts}

@@ -1,6 +1,7 @@
-import type { RequestHandler } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { Action } from './$types'
 import { OAuth2Client } from 'google-auth-library'
-import { query } from '../_db';
+import { query } from '../../_db';
 import { config } from '$lib/config'
 
 // Verify JWT per https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
@@ -13,7 +14,8 @@ async function getGoogleUserFromJWT(token: string): Promise<Partial<User>> {
       audience: clientId
     });
     const payload = ticket.getPayload()
-    if (!payload) throw new Error('Google authentication did not get the expected payload')
+    if (!payload) throw error(500, 'Google authentication did not get the expected payload')
+    
     return {
       firstName: payload['given_name'] || 'UnknownFirstName',
       lastName: payload['family_name'] || 'UnknownLastName',
@@ -22,7 +24,7 @@ async function getGoogleUserFromJWT(token: string): Promise<Partial<User>> {
   } catch (err) {
     let message = ''
     if (err instanceof Error) message = err.message
-    throw new Error(`Google user could not be authenticated: ${message}`)
+    throw error(500,`Google user could not be authenticated: ${message}`)
   }
 }
 
@@ -35,12 +37,12 @@ async function upsertGoogleUser(user: Partial<User>): Promise<UserSession> {
   } catch (err) {
     let message = ''
     if (err instanceof Error) message = err.message
-    throw new Error(`GMail user could not be upserted: ${message}`)
+    throw error(500,`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: Action = async event => {
   try {
     const { token } = await event.request.json()
     const user = await getGoogleUserFromJWT(token)
@@ -49,24 +51,18 @@ 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 {
-      status: 200,
-      headers: { // database expires sessions in 2 hours
-        'Set-Cookie': `session=${userSession.id}; Path=/; SameSite=Lax; HttpOnly;`
-      },
-      body: {
-        message: 'Successful Google Sign-In.',
-        user: userSession.user
+    return new Response(JSON.stringify({
+      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
-    return { // session cookie deleted by hooks.js handle()
-      status: 401,
-      body: {
-        message: message
-      }
-    }
+    throw error(401, message)
   }
 }

package/src/routes/auth/reset/{index.ts → +server.ts}

@@ -1,3 +1,4 @@
+import { json as json$1 } from '@sveltejs/kit';
 import dotenv from 'dotenv'
 import type { RequestHandler } from '@sveltejs/kit'
 import type  { JwtPayload } from 'jsonwebtoken'
@@ -21,19 +22,15 @@ export const PUT: RequestHandler = async event => {
     const sql = `CALL reset_password($1, $2);`
     await query(sql, [userId, password])
 
-    return {
-      status: 200,
-      body: {
-        message: 'Password successfully reset.'
-      }
-    }
+    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 {
-      status: 403,
-      body: {
-        message: 'Password reset token expired.'
-      }
-    }
+    return json$1({
+  message: 'Password reset token expired.'
+}, {
+      status: 403
+    })
   }
 }

package/src/routes/auth/reset/{[token].svelte → [token]/+page.svelte}

@@ -1,22 +1,11 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit'
-
-  export const load: Load = async event => {
-    return {
-      props: {
-        token: event.params.token
-      }
-    }
-  }
-</script>
-
 <script lang="ts">
+  import type { PageData } from './$types'
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
-  import { toast } from '../../../stores'
+  import { toast } from '../../../../stores'
   import { focusOnFirstError } from '$lib/focus'
 
-  export let token: string
+  export let data: PageData
 
   let focusedField: HTMLInputElement
   let password: string
@@ -49,7 +38,7 @@
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          token,
+          token: data.token,
           password
         })
       })

package/src/routes/auth/reset/[token]/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async event => {
+  return {
+    token: event.params.token
+  }
+}

package/src/routes/{forgot.svelte → forgot/+page.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
-  import { toast } from '../stores'
+  import { toast } from '../../stores'
   import { focusOnFirstError } from '$lib/focus'
 
   let focusedField: HTMLInputElement
@@ -18,7 +18,7 @@
 
     if (form.checkValidity()) {
       if (email.toLowerCase().includes('gmail.com')) {
-        return message = 'GMail passwords must be reset on Manage Your Google Account.'
+        return message = 'Gmail passwords must be reset on Manage Your Google Account.'
       }
       const url = `/auth/forgot`
       const res = await fetch(url, {

package/src/routes/{login.svelte → login/+page.svelte}

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
-  import { page, session } from '$app/stores'
+  import { page } from '$app/stores'
+  import { loginSession } from '../../stores'
   import useAuth from '$lib/auth'
   import { focusOnFirstError } from '$lib/focus'
 
-  const { loadScript, initializeSignInWithGoogle, loginLocal } = useAuth(page, session, goto)
+  const { initializeSignInWithGoogle, loginLocal } = useAuth(page, loginSession, goto)
 
   let focusedField: HTMLInputElement
   let message: string
@@ -34,7 +35,6 @@
   }
 
   onMount(async() => {
-    await loadScript() // probably cached
     initializeSignInWithGoogle('googleButton')
     focusedField.focus()
 	})

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

@@ -0,0 +1,15 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types'
+
+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)) {
+    throw redirect(302, '/login?referrer=/profile')
+  }
+
+  return {
+    user
+  }
+}

package/src/routes/{profile.svelte → profile/+page.svelte}

@@ -1,33 +1,15 @@
-<script context="module" lang="ts">
-  import type { Load } from '@sveltejs/kit'
-
-  export const load: Load = ({ session }) => {
-    const authorized = ['admin', 'teacher', 'student'] // must be logged-in
-		if (session.user && !authorized.includes(session.user.role)) {
-			return {
-				status: 302,
-				redirect: '/login?referrer=/profile'
-			}
-		}
-
-    return {
-      props: {
-        // Clone session.user so unsaved changes are NOT retained
-        user: JSON.parse(JSON.stringify(session.user))
-      }
-    }
-  }
-</script>
-
 <script lang="ts">
+	import type { PageData } from './$types'
   import { onMount } from 'svelte'
-  import { session } from '$app/stores'
-  import { focusOnFirstError } from '$lib/focus';
+  import { focusOnFirstError } from '$lib/focus'
+  import { loginSession } from '../../stores'
+
+  export let data: PageData
+  const { user } : {user : User } = data
 
   let focusedField: HTMLInputElement
   let message: string
   let confirmPassword: HTMLInputElement
-  export let user: User
 
   onMount(() => {
     focusedField.focus()
@@ -43,7 +25,6 @@
     }
 
     if (form.checkValidity()) {
-      $session.user = JSON.parse(JSON.stringify(user)) // deep clone
       const url = '/api/v1/user'
       const res = await fetch(url, {
         method: 'PUT',
@@ -54,6 +35,7 @@
       })
       const reply = await res.json()
       message = reply.message
+      $loginSession = JSON.parse(JSON.stringify(user)) // update loginSession store
     } else {
       form.classList.add('was-validated')
       focusOnFirstError(form)

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

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = ({ locals }) => {
+	const { user } = locals
+	if (user) { // Redirect to home if user is logged in already
+		throw redirect(302, '/');
+	}
+	return {}
+}

package/src/routes/{register.svelte → register/+page.svelte}

@@ -1,25 +1,12 @@
-<script context="module" lang="ts">
-  import type { Load } from '@sveltejs/kit'
-
-  export const load: Load = ({ session }) => {
-		if (session.user) { // Do not display if user is logged in
-			return {
-				status: 302,
-				redirect: '/'
-			}
-		}
-		return {}
-	}
-</script>
-
 <script lang="ts">
   import { onMount } from 'svelte'
   import { goto } from '$app/navigation'
-  import { page, session } from '$app/stores'
+  import { page } from '$app/stores'
+  import { loginSession } from '../../stores'
   import useAuth from '$lib/auth'
   import { focusOnFirstError } from '$lib/focus'
 
-  const { initializeSignInWithGoogle, registerLocal } = useAuth(page, session, goto)
+  const { initializeSignInWithGoogle, registerLocal } = useAuth(page, loginSession, goto)
 
   let focusedField: HTMLInputElement
 
@@ -50,7 +37,7 @@
       } catch (err) {
         if (err instanceof Error) {
           message = err.message
-          console.error('Login error', message)
+          console.log('Login error', message)
         }
       }
     } else {
@@ -62,11 +49,7 @@
 
   onMount(() => {
     focusedField.focus()
-    initializeSignInWithGoogle()
-    window.google.accounts.id.renderButton(
-      document.getElementById('googleButton'),
-      { theme: 'filled_blue', size: 'large', width: '367' }  // customization attributes
-    )
+    initializeSignInWithGoogle('googleButton')
   })
 
 
@@ -121,7 +104,7 @@
         </div>
       
         {#if message}
-          <p>{message}</p>
+          <p class="text-danger">{message}</p>
         {/if}
       
         <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>

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

@@ -0,0 +1,13 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = async ({locals}) => {
+	const authorized = ['admin', 'teacher']
+	if (!locals.user || !authorized.includes(locals.user.role)) {
+		throw redirect(302, '/login?referrer=/teachers')
+	}
+
+  return {
+    message: 'Teachers or Admin-only content from endpoint.'
+  }
+}

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+	export let data: PageData
+</script>
+
+<svelte:head>
+  <title>Teachers</title>
+</svelte:head>
+
+<h1>Teachers</h1>
+<h4>Teacher Or Admin Role</h4>
+<p>{data.message}</p>

package/src/stores.ts

@@ -4,4 +4,14 @@ export const toast = writable({
   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)

package/svelte.config.js

@@ -5,7 +5,6 @@ const production = process.env.NODE_ENV === 'production'
 
 const baseCsp = [
 	'self',
-	// 'strict-dynamic', // issues with datepicker on classes, add to calendar scripts
 	'https://www.gstatic.com/recaptcha/', // recaptcha
 	'https://accounts.google.com/gsi/', // sign-in w/google
 	'https://www.google.com/recaptcha/', // recapatcha
@@ -30,8 +29,7 @@ const config = {
 				'img-src': ['data:', 'blob:', ...baseCsp],
 				'style-src': ['unsafe-inline', ...baseCsp],
 				'object-src': ['none'],
-				'base-uri': ['self'],
-				// 'require-trusted-types-for': ["'script'"] // will require effort to get this working
+				'base-uri': ['self']
 			}
 		}
 	}

package/src/routes/__error.svelte

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

package/src/routes/admin.svelte

@@ -1,40 +0,0 @@
-<script context="module" lang="ts">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ fetch, session }) => {
-		const authorized = ['admin']
-		if (session.user && !authorized.includes(session.user.role)) {
-			return {
-				status: 302,
-				redirect: '/login?referrer=/admin'
-			}
-		}
-
-		const url = '/api/v1/admin'
-		const res = await fetch(url, {
-			method: 'GET',
-			headers: { 'Content-Type': 'application/json' }
-		})
-
-		// if !res.ok, error is returned as message
-		const { message } = await res.json()
-		return {
-			props: {
-				message
-			}
-		}
-
-	}
-</script>
-
-<script lang="ts">
-	export let message = ''
-</script>
-
-<svelte:head>
-  <title>Administration</title>
-</svelte:head>
-
-<h1>Admin</h1>
-<h4>Admin Role</h4>
-<p>{message}</p>

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

@@ -1,5 +0,0 @@
-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,20 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-import { requestAuthorized } from './_auth'
-
-export const GET: RequestHandler = async event => {
-  if (!requestAuthorized(event, ['admin'])) {
-    return {
-      status: 401,
-      body: {
-        message: 'Unauthorized - admin role required.'
-      }
-    }
-  }
-
-  return {
-    status: 200,
-    body: {
-      message: 'Admin-only content from endpoint.'
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-import { requestAuthorized } from './_auth'
-
-export const GET: RequestHandler = async event=> {
-  if (!requestAuthorized(event, ['admin', 'teacher'])) {
-    return {
-      status: 401,
-      body: {
-        message: 'Unauthorized - admin or teacher role required.'
-      }
-    }
-  }
-
-  return {
-    status: 200,
-    body: {
-      message: 'Teachers or Admin-only content from endpoint.'
-    }
-  }
-}

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

@@ -1,35 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-import { query } from '../../_db'
-import { requestAuthorized } from './_auth'
-
-export const PUT: RequestHandler = async event => {
-  if (!requestAuthorized(event, ['admin', 'teacher', 'student'])) {
-    return {
-      status: 401,
-      body: {
-        message: 'Unauthorized - must be logged-in.'
-      }
-    }
-  }
-
-  const sql = `CALL update_user($1, $2);`
-  try {
-    // Only permit update of the authenticated user
-    const body = await event.request.json()
-    await query(sql, [event.locals.user.id, JSON.stringify(body)])
-  } catch (error) {
-    return {
-      status: 503,
-      body: {
-        message: 'Could not communicate with database.'
-      }
-    }
-  }
-
-  return {
-    status: 200,
-    body: {
-      message: 'Successfully updated user profile.'
-    }
-  }
-}