sveltekit-auth-example 2.0.0 → 2.0.2

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

@@ -1,57 +1,56 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import { goto } from '$app/navigation'
-  import { loginSession } from '../../stores'
-  import { focusOnFirstError } from '$lib/focus'
-  import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import { loginSession } from '../../stores'
+	import { focusOnFirstError } from '$lib/focus'
+	import { initializeGoogleAccounts, renderGoogleButton } from '$lib/google'
 
-  let focusedField: HTMLInputElement
+	let focusedField: HTMLInputElement
 
-  let user: User = {
-    id: 0,
-    role: 'student',
-    firstName: '',
-    lastName: '',
-    password: '',
-    email: '',
-    phone: ''
-  }
-  let confirmPassword: HTMLInputElement
-  let message: string
+	let user: User = {
+		id: 0,
+		role: 'student',
+		firstName: '',
+		lastName: '',
+		password: '',
+		email: '',
+		phone: ''
+	}
+	let confirmPassword: HTMLInputElement
+	let message: string
 
-  async function register() {
-    const form = <HTMLFormElement> document.getElementById('register')
-    message = ''
+	async function register() {
+		const form = <HTMLFormElement>document.getElementById('register')
+		message = ''
 
-    if (!passwordMatch()) {
-      confirmPassword.classList.add('is-invalid')
-      return
-    }
+		if (!passwordMatch()) {
+			confirmPassword.classList.add('is-invalid')
+			return
+		}
 
-    if (form.checkValidity()) {
-      try {
-        await registerLocal(user)
-      } catch (err) {
-        if (err instanceof Error) {
-          message = err.message
-          console.log('Login error', message)
-        }
-      }
-    } else {
-      form.classList.add('was-validated')
-      focusOnFirstError(form)
-    }
-  
-  }
+		if (form.checkValidity()) {
+			try {
+				await registerLocal(user)
+			} catch (err) {
+				if (err instanceof Error) {
+					message = err.message
+					console.log('Login error', message)
+				}
+			}
+		} else {
+			form.classList.add('was-validated')
+			focusOnFirstError(form)
+		}
+	}
 
-  onMount(() => {
-    initializeGoogleAccounts()
-    renderGoogleButton()
+	onMount(() => {
+		initializeGoogleAccounts()
+		renderGoogleButton()
 
-    focusedField.focus()
-  })
+		focusedField.focus()
+	})
 
-  async function registerLocal(user: User) {
+	async function registerLocal(user: User) {
 		try {
 			const res = await fetch('/auth/register', {
 				method: 'POST',
@@ -79,71 +78,127 @@
 		}
 	}
 
-  const passwordMatch = () => {
-    if (!user) return false // placate TypeScript
-    if (!user.password) user.password = ''
-    return user.password == confirmPassword.value
-  }
+	const passwordMatch = () => {
+		if (!user) return false // placate TypeScript
+		if (!user.password) user.password = ''
+		return user.password == confirmPassword.value
+	}
 </script>
 
 <svelte:head>
-  <title>Register</title>
+	<title>Register</title>
 </svelte:head>
 
 <div class="d-flex justify-content-center my-3">
-  <div class="card login">
-    <div class="card-body">
-      <h4><strong>Register</strong></h4>
-      <p>Welcome to our community.</p>
-      {#if user}
-        <form id="register" autocomplete="on" novalidate class="mt-3">
-          <div class="mb-3">
-            <div id="googleButton"></div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label" for="email">Email</label>
-            <input bind:this={focusedField} type="email" class="form-control" bind:value={user.email} required placeholder="Email" id="email" autocomplete="email"/>
-            <div class="invalid-feedback">Email address required</div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label" for="password">Password</label>
-            <input type="password" id="password" class="form-control" bind:value={user.password} required 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="password">Confirm password</label>
-            <input type="password" id="password" class="form-control" bind:this={confirmPassword} required minlength="8" maxlength="80" placeholder="Password (again)" autocomplete="new-password"/>
-            <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="firstName">First name</label>
-            <input bind:value={user.firstName} class="form-control" id="firstName" placeholder="First name" required autocomplete="given-name"/>
-            <div class="invalid-feedback">First name required</div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label" for="lastName">Last name</label>
-            <input bind:value={user.lastName} class="form-control" id="lastName" placeholder="Last name" required autocomplete="family-name"/>
-            <div class="invalid-feedback">Last name required</div>
-          </div>
-          <div class="mb-3">
-            <label class="form-label" for="phone">Phone</label>
-            <input type="tel" bind:value={user.phone} id="phone" class="form-control" placeholder="Phone" autocomplete="tel-local"/>
-          </div>
-        
-          {#if message}
-            <p class="text-danger">{message}</p>
-          {/if}
-        
-          <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
-        </form>
-      {/if}
-    </div>
-  </div>
+	<div class="card login">
+		<div class="card-body">
+			<h4><strong>Register</strong></h4>
+			<p>Welcome to our community.</p>
+			{#if user}
+				<form id="register" autocomplete="on" novalidate class="mt-3">
+					<div class="mb-3">
+						<div id="googleButton"></div>
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="email">Email</label>
+						<input
+							bind:this={focusedField}
+							type="email"
+							class="form-control"
+							bind:value={user.email}
+							required
+							placeholder="Email"
+							id="email"
+							autocomplete="email"
+						/>
+						<div class="invalid-feedback">Email address required</div>
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="password">Password</label>
+						<input
+							type="password"
+							id="password"
+							class="form-control"
+							bind:value={user.password}
+							required
+							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="password">Confirm password</label>
+						<input
+							type="password"
+							id="password"
+							class="form-control"
+							bind:this={confirmPassword}
+							required
+							minlength="8"
+							maxlength="80"
+							placeholder="Password (again)"
+							autocomplete="new-password"
+						/>
+						<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="firstName">First name</label>
+						<input
+							bind:value={user.firstName}
+							class="form-control"
+							id="firstName"
+							placeholder="First name"
+							required
+							autocomplete="given-name"
+						/>
+						<div class="invalid-feedback">First name required</div>
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="lastName">Last name</label>
+						<input
+							bind:value={user.lastName}
+							class="form-control"
+							id="lastName"
+							placeholder="Last name"
+							required
+							autocomplete="family-name"
+						/>
+						<div class="invalid-feedback">Last name required</div>
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="phone">Phone</label>
+						<input
+							type="tel"
+							bind:value={user.phone}
+							id="phone"
+							class="form-control"
+							placeholder="Phone"
+							autocomplete="tel-local"
+						/>
+					</div>
+
+					{#if message}
+						<p class="text-danger">{message}</p>
+					{/if}
+
+					<button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
+				</form>
+			{/if}
+		</div>
+	</div>
 </div>
 
 <style lang="scss">
-  .card-body {
-    width: 25rem;
-  }
-</style>
+	.card-body {
+		width: 25rem;
+	}
+</style>

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

@@ -1,14 +1,14 @@
 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', 'teacher']
 	if (!user || !authorized.includes(user.role)) {
-		redirect(302, '/login?referrer=/teachers');
+		redirect(302, '/login?referrer=/teachers')
 	}
 
-  return {
-    message: 'Teachers or Admin-only content from server.'
-  }
+	return {
+		message: 'Teachers or Admin-only content from server.'
+	}
 }

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

@@ -4,9 +4,9 @@
 </script>
 
 <svelte:head>
-  <title>Teachers</title>
+	<title>Teachers</title>
 </svelte:head>
 
 <h1>Teachers</h1>
 <h4>Teacher Or Admin Role</h4>
-<p>{data.message}</p>
+<p>{data.message}</p>

package/src/stores.ts

@@ -8,6 +8,6 @@ export const toast = writable({
 
 // 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 loginSession = <Writable<User>> writable(undefined)
+export const loginSession = <Writable<User>>writable(undefined)
 
 export const googleInitialized = writable(false)

package/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-node'
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 const production = process.env.NODE_ENV === 'production'
 

package/.prettierrc

@@ -1,9 +0,0 @@
-{
-	"useTabs": true,
-	"semi": false,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}