sveltekit-auth-example 1.0.3

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

@@ -0,0 +1,116 @@
+<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 { onMount } from 'svelte'
+  import { goto } from '$app/navigation'
+  import { toast } from '../../../stores'
+  import { focusOnFirstError } from '$lib/focus'
+
+  export let token: string
+
+  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 = document.forms['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,
+          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>
+</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>
+
+<style lang="scss">
+  .card-body {
+    width: 25rem;
+  }
+</style>

package/src/routes/auth/reset/index.ts

@@ -0,0 +1,39 @@
+import dotenv from 'dotenv'
+import type { RequestHandler } from '@sveltejs/kit'
+import type  { JwtPayload } from 'jsonwebtoken'
+import jwt from 'jsonwebtoken'
+import { query } from '../../_db'
+
+dotenv.config()
+
+const JWT_SECRET = process.env['JWT_SECRET']
+
+export const put: RequestHandler = async event => {
+  const body = await event.request.json()
+  const { token, password } = body
+
+  // 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 {
+      status: 200,
+      body: {
+        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.'
+      }
+    }
+  }
+}

package/src/routes/forgot.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  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
+
+  onMount(() => {
+    focusedField.focus()
+  })
+
+  const sendPasswordReset = async () => {
+    message = ''
+    const form = document.forms['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)
+    }
+  }
+</script>
+
+<svelte:head>
+  <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>
+
+<style lang="scss">
+  .card-body {
+    width: 25rem;
+  }
+</style>

package/src/routes/index.svelte

@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<h4>Public</h4>

package/src/routes/info.svelte

@@ -0,0 +1,6 @@
+<svelte:head>
+  <title>Info Page</title>
+</svelte:head>
+
+<h1>Info</h1>
+<h4>Public</h4>

package/src/routes/login.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { goto } from '$app/navigation'
+  import { page, session } from '$app/stores'
+  import useAuth from '$lib/auth'
+  import { focusOnFirstError } from '$lib/focus'
+
+  const { loadScript, initializeSignInWithGoogle, loginLocal } = useAuth(page, session, goto)
+
+  let focusedField: HTMLInputElement
+  let message: string
+  const credentials: Credentials = {
+    email: '',
+    password: ''
+  }
+
+  async function login() {
+    message = ''
+    const form = document.forms['signIn']
+
+    if (form.checkValidity()) {
+      try {
+        await loginLocal(credentials)
+      } catch (err) {
+        console.error('Login error', err.message)
+        message = err.message
+      }
+    } else {
+      form.classList.add('was-validated')
+      focusOnFirstError(form)
+    }
+  }
+
+  onMount(async() => {
+    await loadScript() // probably cached
+    initializeSignInWithGoogle('googleButton')
+    focusedField.focus()
+	})
+</script>
+
+<svelte:head>
+  <title>Login Form</title>
+  <meta name='robots' content='noindex, nofollow'/>
+</svelte:head>
+
+<div class="d-flex justify-content-center mt-5">
+  <div class="card">
+    <div class="card-body">
+      <form id="signIn" autocomplete="on" novalidate>
+        <h4><strong>Sign In</strong></h4>
+        <p>Welcome back.</p>
+        <div>
+          <div class="mb-1">
+            <div id="googleButton"></div>
+          </div>
+          <div class="text-centered">
+            <div class="strike">
+              <span>or</span>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" for="email">Email</label>
+            <input type="email" class="form-control" bind:this={focusedField} bind:value={credentials.email} required placeholder="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 class="form-control" type="password" bind:value={credentials.password} required minlength="8" maxlength="80" placeholder="Password" autocomplete="current-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>
+        <div>
+          <a href="/forgot" class="text-black-50">Forgot Password?</a><br/>
+          <br/>
+        </div>
+        {#if message}
+          <p class="text-danger">{message}</p>
+        {/if}
+        <div class="d-grid gap-2">
+          <button on:click|preventDefault={login} class="btn btn-primary btn-lg">Sign In</button>
+        </div>
+      </form>
+    </div>
+    <div class="card-footer text-center bg-white">
+      <a href="/register" class="text-black-50">Don't have an account?</a>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .card-body {
+    width: 25rem;
+  }
+
+  .strike {
+    display: block;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap; 
+  }
+
+  .strike > span {
+    position: relative;
+    display: inline-block;
+  }
+
+  .strike > span:before,
+  .strike > span:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 9999px;
+    height: 1px;
+    background: darkgray;
+  }
+
+  .strike > span:before {
+    right: 100%;
+    margin-right: 10px;
+  }
+
+  .strike > span:after {
+    left: 100%;
+    margin-left: 10px;
+  }
+</style>

package/src/routes/profile.svelte

@@ -0,0 +1,122 @@
+<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 (!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 { session } from '$app/stores'
+  import { focusOnFirstError } from '$lib/focus';
+
+  let focusedField: HTMLInputElement
+  let message: string
+  let confirmPassword: HTMLInputElement
+  export let user: User
+
+  async function update() {
+    message = ''
+    const form = document.forms['profile']
+
+    if (!passwordMatch()) {
+      confirmPassword.classList.add('is-invalid')
+      return
+    }
+
+    if (form.checkValidity()) {
+      $session.user = JSON.parse(JSON.stringify(user)) // deep clone
+      const url = '/api/v1/user'
+      const res = await fetch(url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(user)
+      })
+      const reply = await res.json()
+      message = reply.message
+    } else {
+      form.classList.add('was-validated')
+      focusOnFirstError(form)
+    }
+
+  }
+
+  const passwordMatch = () => {
+    if (!user.password) user.password = ''
+    return user.password == confirmPassword.value
+  }
+</script>
+
+<svelte:head>
+  <title>Profile</title>
+</svelte:head>
+
+<div class="d-flex justify-content-center my-3">
+  <div class="card login">
+    <div class="card-body">
+      <h4><strong>Profile</strong></h4>
+      <p>Update your information.</p>
+      <form id="profile" autocomplete="on" novalidate class="mt-3">
+        {#if !user.email.includes('gmail.com')}
+          <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} minlength="8" maxlength="80" placeholder="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={!!user.password} 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>
+        {/if}
+        <div class="mb-3">
+          <label class="form-label" for="firstName">First name</label>
+          <input bind:value={user.firstName} class="form-control" id="firstName" required placeholder="First name" 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" required placeholder="Last name" 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>{message}</p>
+        {/if} 
+
+        <button type="button" on:click={update} class="btn btn-primary btn-lg">Update</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .card-body {
+    width: 25rem;
+  }
+</style>

package/src/routes/register.svelte

@@ -0,0 +1,133 @@
+<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 useAuth from '$lib/auth'
+  import { focusOnFirstError } from '$lib/focus'
+
+  const { initializeSignInWithGoogle, registerLocal } = useAuth(page, session, goto)
+
+  let focusedField: HTMLInputElement
+
+  let user = {
+    firstName: '',
+    lastName: '',
+    password: '',
+    email: '',
+    phone: ''
+  }
+  let confirmPassword: HTMLInputElement
+  let message: string
+
+  async function register() {
+    const form = document.forms['register']
+    message = ''
+
+    if (!passwordMatch()) {
+      confirmPassword.classList.add('is-invalid')
+      return
+    }
+
+    if (form.checkValidity()) {
+      try {
+        await registerLocal(user)
+      } catch (err) {
+        console.error('Login error', err.message)
+        message = err.message
+      }
+    } else {
+      form.classList.add('was-validated')
+      focusOnFirstError(form)
+    }
+  
+  }
+
+  onMount(() => {
+    focusedField.focus()
+    initializeSignInWithGoogle()
+    google.accounts.id.renderButton(
+      document.getElementById('googleButton'),
+      { theme: 'filled_blue', size: 'large', width: '367' }  // customization attributes
+    )
+  })
+
+
+  const passwordMatch = () => {
+    if (!user.password) user.password = ''
+    return user.password == confirmPassword.value
+  }
+</script>
+
+<svelte:head>
+  <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>
+      <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>{message}</p>
+        {/if}
+      
+        <button type="button" on:click={register} class="btn btn-primary btn-lg">Register</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .card-body {
+    width: 25rem;
+  }
+</style>

package/src/routes/teachers.svelte

@@ -0,0 +1,39 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit'
+
+	export const load: Load = async ({ session }) => {
+    const authorized = ['admin', 'teacher']
+		if (!authorized.includes(session.user?.role)) {
+			return {
+				status: 302,
+				redirect: '/login?referrer=/teachers'
+			}
+		}
+
+		const url = '/api/v1/teacher'
+		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>Teachers</title>
+</svelte:head>
+
+<h1>Teachers</h1>
+<h4>Teacher Or Admin Role</h4>
+<p>{message}</p>

package/src/stores.ts

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store'
+
+export const toast = writable({
+  title: '',
+  body: '',
+  isOpen: false
+})