sveltekit-auth-example 2.0.0 → 2.0.2

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

@@ -2,20 +2,19 @@ import { error, json } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import { query } from '$lib/server/db'
 
-export const PUT: RequestHandler = async event => {
-  const { user } = event.locals
+export const PUT: RequestHandler = async (event) => {
+	const { user } = event.locals
 
-  if (!user)
-    error(401, 'Unauthorized - must be logged-in.');
+	if (!user) error(401, 'Unauthorized - must be logged-in.')
 
-  try {
-    const userUpdate = await event.request.json()
-    await query(`CALL update_user($1, $2);`, [user.id, JSON.stringify(userUpdate)])
-  } catch (err) {
-    error(503, 'Could not communicate with database.');
-  }
+	try {
+		const userUpdate = await event.request.json()
+		await query(`CALL update_user($1, $2);`, [user.id, JSON.stringify(userUpdate)])
+	} catch (err) {
+		error(503, 'Could not communicate with database.')
+	}
 
-  return json({
-    message: 'Successfully updated user profile.'
-  })
-}
+	return json({
+		message: 'Successfully updated user profile.'
+	})
+}

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

@@ -12,7 +12,8 @@ export const POST: RequestHandler = async (event) => {
 	try {
 		switch (slug) {
 			case 'logout':
-				if (event.locals.user) { // else they are logged out / session 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])
 				}
@@ -26,7 +27,7 @@ export const POST: RequestHandler = async (event) => {
 				sql = `SELECT register($1) AS "authenticationResult";`
 				break
 			default:
-				error(404, 'Invalid endpoint.');
+				error(404, 'Invalid endpoint.')
 		}
 
 		// Only /auth/login and /auth/register at this point
@@ -34,21 +35,25 @@ export const POST: RequestHandler = async (event) => {
 
 		// 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))
-			error(400, 'Please supply all required fields: email, password, first and last name.');
+			error(400, 'Please supply all required fields: email, password, first and last name.')
 
 		result = await query(sql, [JSON.stringify(body)])
 	} catch (err) {
-		error(503, 'Could not communicate with database.');
+		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
-		error(authenticationResult.statusCode, authenticationResult.status);
+		error(authenticationResult.statusCode, authenticationResult.status)
 
 	// Ensures hooks.server.ts:handle() will not delete session cookie
 	event.locals.user = authenticationResult.user
-	cookies.set('session', authenticationResult.sessionId, { httpOnly: true, sameSite: 'lax', path: '/' })
+	cookies.set('session', authenticationResult.sessionId, {
+		httpOnly: true,
+		sameSite: 'lax',
+		path: '/'
+	})
 	return json({ message: authenticationResult.status, user: authenticationResult.user })
 }

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

@@ -6,32 +6,32 @@ import { JWT_SECRET, DOMAIN, SENDGRID_SENDER } from '$env/static/private'
 import { query } from '$lib/server/db'
 import { sendMessage } from '$lib/server/sendgrid'
 
-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])
+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])
 
-  if (rows.length > 0) {
-    const { userId } = rows[0]
-    // Create JWT with userId expiring in 30 mins
-    const secret = JWT_SECRET
-    const token = jwt.sign({ subject: userId }, <Secret> secret, {
-      expiresIn: '30m'
-    })
+	if (rows.length > 0) {
+		const { userId } = rows[0]
+		// Create JWT with userId expiring in 30 mins
+		const secret = JWT_SECRET
+		const token = jwt.sign({ subject: userId }, <Secret>secret, {
+			expiresIn: '30m'
+		})
 
-    // Email URL with token to user
-    const message: MailDataRequired = {
-      to: { email: body.email },
-      from: SENDGRID_SENDER,
-      subject: 'Password reset',
-      categories: ['account'],
-      html: `
+		// Email URL with token to user
+		const message: MailDataRequired = {
+			to: { email: body.email },
+			from: SENDGRID_SENDER,
+			subject: 'Password reset',
+			categories: ['account'],
+			html: `
         <a href="${DOMAIN}/auth/reset/${token}">Reset my password</a>. Your browser will open and ask you to provide a
         new password with a confirmation then redirect you to your login page.
       `
-    }
-    sendMessage(message)
-  }
+		}
+		sendMessage(message)
+	}
 
-  return new Response(undefined, { status: 204 })
-}
+	return new Response(undefined, { status: 204 })
+}

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

@@ -6,58 +6,57 @@ 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 client = new OAuth2Client(PUBLIC_GOOGLE_CLIENT_ID)
-    const ticket = await client.verifyIdToken({
-      idToken: token,
-      audience: PUBLIC_GOOGLE_CLIENT_ID
-    });
-    const payload = ticket.getPayload()
-    if (!payload) error(500, 'Google authentication did not get the expected payload');
-    
-    return {
-      firstName: payload['given_name'] || 'UnknownFirstName',
-      lastName: payload['family_name'] || 'UnknownLastName',
-      email: payload['email']
-    }
-  } catch (err) {
-    let message = ''
-    if (err instanceof Error) message = err.message
-    error(500, `Google user could not be authenticated: ${message}`);
-  }
+	try {
+		const client = new OAuth2Client(PUBLIC_GOOGLE_CLIENT_ID)
+		const ticket = await client.verifyIdToken({
+			idToken: token,
+			audience: PUBLIC_GOOGLE_CLIENT_ID
+		})
+		const payload = ticket.getPayload()
+		if (!payload) error(500, 'Google authentication did not get the expected payload')
+
+		return {
+			firstName: payload['given_name'] || 'UnknownFirstName',
+			lastName: payload['family_name'] || 'UnknownLastName',
+			email: payload['email']
+		}
+	} catch (err) {
+		let message = ''
+		if (err instanceof Error) message = err.message
+		error(500, `Google user could not be authenticated: ${message}`)
+	}
 }
 
 // Upsert user and get session ID
 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 (err) {
-    let message = ''
-    if (err instanceof Error) message = err.message
-    error(500, `Gmail user could not be upserted: ${message}`);
-  }
+	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 (err) {
+		let message = ''
+		if (err instanceof Error) message = err.message
+		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 => {
-  const { cookies } = event
+export const POST: RequestHandler = async (event) => {
+	const { cookies } = event
 
-  try {
-    const { token } = await event.request.json()
-    const user = await getGoogleUserFromJWT(token)
-    const userSession = await upsertGoogleUser(user)
+	try {
+		const { token } = await event.request.json()
+		const user = await getGoogleUserFromJWT(token)
+		const userSession = await upsertGoogleUser(user)
 
-    // Prevent hooks.server.ts's handler() from deleting cookie thinking no one has authenticated
-    event.locals.user = userSession.user
+		// Prevent hooks.server.ts's handler() from deleting cookie thinking no one has authenticated
+		event.locals.user = userSession.user
 
-    cookies.set('session', userSession.id, { httpOnly: true, sameSite: 'lax', path: '/' })
-    return json({ message: 'Successful Google Sign-In.', user: userSession.user })
-    
-  } catch (err) {
-    let message = ''
-    if (err instanceof Error) message = err.message
-    error(401, message);
-  }
-}
+		cookies.set('session', userSession.id, { httpOnly: true, sameSite: 'lax', path: '/' })
+		return json({ message: 'Successful Google Sign-In.', user: userSession.user })
+	} catch (err) {
+		let message = ''
+		if (err instanceof Error) message = err.message
+		error(401, message)
+	}
+}

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

@@ -11,7 +11,7 @@ export const PUT: RequestHandler = async (event) => {
 
 	// Check the validity of the token and extract userId
 	try {
-		const decoded = <JwtPayload> jwt.verify(token, <jwt.Secret> JWT_SECRET)
+		const decoded = <JwtPayload>jwt.verify(token, <jwt.Secret>JWT_SECRET)
 		const userId = decoded.subject
 
 		// Update the database with the new password

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

@@ -1,105 +1,127 @@
 <script lang="ts">
-  import type { PageData } from './$types'
-  import { onMount } from 'svelte'
-  import { goto } from '$app/navigation'
-  import { toast } from '../../../../stores'
-  import { focusOnFirstError } from '$lib/focus'
-
-  export let data: PageData
-
-  let focusedField: HTMLInputElement
-  let password: string
-  let confirmPassword: HTMLInputElement
-  let message: string
-
-  onMount(() => {
-    focusedField.focus()
-  })
-
-  const passwordMatch = () => {
-    if (!password) password = ''
-    return password == confirmPassword.value
-  }
-
-  const resetPassword = async () => {
-    message = ''
-    const form = <HTMLFormElement> document.getElementById('reset')
-
-    if (!passwordMatch()) {
-      confirmPassword.classList.add('is-invalid')
-    }
-
-    if (form.checkValidity()) {
-
-      const url = `/auth/reset`
-      const res = await fetch(url, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          token: data.token,
-          password
-        })
-      })
-
-      if (res.ok) {
-        $toast = {
-          title: 'Password Reset Succesful',
-          body: 'Your password was reset. Please login.',
-          isOpen: true
-        }
-
-        goto('/login')
-      } else {
-        const body = await res.json()
-        console.log('Failed reset', body)
-        message = body.message
-      } 
-
-    } else {
-      form.classList.add('was-validated')
-      focusOnFirstError(form)
-    }
-
-  }
+	import type { PageData } from './$types'
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import { toast } from '../../../../stores'
+	import { focusOnFirstError } from '$lib/focus'
+
+	export let data: PageData
+
+	let focusedField: HTMLInputElement
+	let password: string
+	let confirmPassword: HTMLInputElement
+	let message: string
+
+	onMount(() => {
+		focusedField.focus()
+	})
+
+	const passwordMatch = () => {
+		if (!password) password = ''
+		return password == confirmPassword.value
+	}
+
+	const resetPassword = async () => {
+		message = ''
+		const form = <HTMLFormElement>document.getElementById('reset')
+
+		if (!passwordMatch()) {
+			confirmPassword.classList.add('is-invalid')
+		}
+
+		if (form.checkValidity()) {
+			const url = `/auth/reset`
+			const res = await fetch(url, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					token: data.token,
+					password
+				})
+			})
+
+			if (res.ok) {
+				$toast = {
+					title: 'Password Reset Succesful',
+					body: 'Your password was reset. Please login.',
+					isOpen: true
+				}
+
+				goto('/login')
+			} else {
+				const body = await res.json()
+				console.log('Failed reset', body)
+				message = body.message
+			}
+		} else {
+			form.classList.add('was-validated')
+			focusOnFirstError(form)
+		}
+	}
 </script>
 
 <svelte:head>
-  <title>New Password</title>
+	<title>New Password</title>
 </svelte:head>
 
 <div class="d-flex justify-content-center mt-5">
-  <div class="card login">
-    <div class="card-body">
-      <form id="reset" autocomplete="on" novalidate>
-        <h4><strong>New Password</strong></h4>
-        <p>Please provide a new password.</p>
-        <div class="mb-3">
-          <label class="form-label" for="password">Password</label>
-          <input class="form-control" id="password" type="password" bind:value={password} bind:this={focusedField} minlength="8" maxlength="80" placeholder="Password" autocomplete="new-password"/>
-          <div class="invalid-feedback">Password with 8 chars or more required</div>
-          <div class="form-text">Password minimum length 8, must have one capital letter, 1 number, and one unique character.</div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label" for="passwordConfirm">Password (retype)</label>
-          <input class="form-control" id="passwordConfirm" type="password" required={!!password} bind:this={confirmPassword} minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
-          <div class="invalid-feedback">Passwords must match</div>
-        </div>
-
-        {#if message}
-          <p class="text-danger">{message}</p>
-        {/if}
-        <div class="d-grid gap-2">
-          <button on:click|preventDefault={resetPassword} class="btn btn-primary btn-lg">Send Email</button>
-        </div>
-      </form>
-    </div>
-  </div>
+	<div class="card login">
+		<div class="card-body">
+			<form id="reset" autocomplete="on" novalidate>
+				<h4><strong>New Password</strong></h4>
+				<p>Please provide a new password.</p>
+				<div class="mb-3">
+					<label class="form-label" for="password">Password</label>
+					<input
+						class="form-control"
+						id="password"
+						type="password"
+						bind:value={password}
+						bind:this={focusedField}
+						minlength="8"
+						maxlength="80"
+						placeholder="Password"
+						autocomplete="new-password"
+					/>
+					<div class="invalid-feedback">Password with 8 chars or more required</div>
+					<div class="form-text">
+						Password minimum length 8, must have one capital letter, 1 number, and one unique
+						character.
+					</div>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="passwordConfirm">Password (retype)</label>
+					<input
+						class="form-control"
+						id="passwordConfirm"
+						type="password"
+						required={!!password}
+						bind:this={confirmPassword}
+						minlength="8"
+						maxlength="80"
+						placeholder="Password (again)"
+						autocomplete="new-password"
+					/>
+					<div class="invalid-feedback">Passwords must match</div>
+				</div>
+
+				{#if message}
+					<p class="text-danger">{message}</p>
+				{/if}
+				<div class="d-grid gap-2">
+					<button on:click|preventDefault={resetPassword} class="btn btn-primary btn-lg"
+						>Send Email</button
+					>
+				</div>
+			</form>
+		</div>
+	</div>
 </div>
 
 <style lang="scss">
-  .card-body {
-    width: 25rem;
-  }
-</style>
+	.card-body {
+		width: 25rem;
+	}
+</style>

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

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

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

@@ -1,77 +1,88 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import { goto } from '$app/navigation'
-  import { toast } from '../../stores'
-  import { focusOnFirstError } from '$lib/focus'
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import { toast } from '../../stores'
+	import { focusOnFirstError } from '$lib/focus'
 
-  let focusedField: HTMLInputElement
-  let email: string
-  let message: string
+	let focusedField: HTMLInputElement
+	let email: string
+	let message: string
 
-  onMount(() => {
-    focusedField.focus()
-  })
+	onMount(() => {
+		focusedField.focus()
+	})
 
-  const sendPasswordReset = async () => {
-    message = ''
-    const form = <HTMLFormElement> document.getElementById('forgot')
+	const sendPasswordReset = async () => {
+		message = ''
+		const form = <HTMLFormElement>document.getElementById('forgot')
 
-    if (form.checkValidity()) {
-      if (email.toLowerCase().includes('gmail.com')) {
-        return message = 'Gmail passwords must be reset on Manage Your Google Account.'
-      }
-      const url = `/auth/forgot`
-      const res = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ email })
-      })
-    
-      if (res.ok) {
-        $toast = {
-          title: 'Password Reset',
-          body: 'Please check your inbox for a password reset email (junk mail, too).',
-          isOpen: true
-        }
-        return goto('/')
-      }
-    } else {
-      form.classList.add('was-validated')
-      focusOnFirstError(form)
-    }
-  }
+		if (form.checkValidity()) {
+			if (email.toLowerCase().includes('gmail.com')) {
+				return (message = 'Gmail passwords must be reset on Manage Your Google Account.')
+			}
+			const url = `/auth/forgot`
+			const res = await fetch(url, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({ email })
+			})
+
+			if (res.ok) {
+				$toast = {
+					title: 'Password Reset',
+					body: 'Please check your inbox for a password reset email (junk mail, too).',
+					isOpen: true
+				}
+				return goto('/')
+			}
+		} else {
+			form.classList.add('was-validated')
+			focusOnFirstError(form)
+		}
+	}
 </script>
 
 <svelte:head>
-  <title>Forgot Password</title>
+	<title>Forgot Password</title>
 </svelte:head>
 
 <div class="d-flex justify-content-center mt-5">
-  <div class="card">
-    <div class="card-body">
-      <form id="forgot" autocomplete="on" novalidate>
-        <h4><strong>Forgot password</strong></h4>
-        <p>Hey, you're human. We get it.</p>
-        <div class="mb-3">
-          <label class="form-label" for="email">Email</label>
-          <input bind:this={focusedField} bind:value={email} type="email" id="email" class="form-control" required placeholder="Email" autocomplete="email"/>
-          <div class="invalid-feedback">Email address required</div>
-        </div>
-        {#if message}
-          <p class="text-danger">{message}</p>
-        {/if}
-        <div class="d-grid gap-2">
-          <button on:click|preventDefault={sendPasswordReset} class="btn btn-primary btn-lg">Send Email</button>
-        </div>
-      </form>
-    </div>
-  </div>
+	<div class="card">
+		<div class="card-body">
+			<form id="forgot" autocomplete="on" novalidate>
+				<h4><strong>Forgot password</strong></h4>
+				<p>Hey, you're human. We get it.</p>
+				<div class="mb-3">
+					<label class="form-label" for="email">Email</label>
+					<input
+						bind:this={focusedField}
+						bind:value={email}
+						type="email"
+						id="email"
+						class="form-control"
+						required
+						placeholder="Email"
+						autocomplete="email"
+					/>
+					<div class="invalid-feedback">Email address required</div>
+				</div>
+				{#if message}
+					<p class="text-danger">{message}</p>
+				{/if}
+				<div class="d-grid gap-2">
+					<button on:click|preventDefault={sendPasswordReset} class="btn btn-primary btn-lg"
+						>Send Email</button
+					>
+				</div>
+			</form>
+		</div>
+	</div>
 </div>
 
 <style lang="scss">
-  .card-body {
-    width: 25rem;
-  }
-</style>
+	.card-body {
+		width: 25rem;
+	}
+</style>

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

@@ -1,5 +1,5 @@
 <svelte:head>
-  <title>Info Page</title>
+	<title>Info Page</title>
 </svelte:head>
 
 <h1>Info</h1>