sveltekit-auth-example 1.0.3

package/src/lib/auth.ts

@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Readable, Writable } from 'svelte/store'
+import { config } from '$lib/config'
+
+type Page = Readable<{
+  url: URL;
+  params: Record<string, string>;
+  stuff: App.Stuff;
+  status: number;
+  error: Error | null;
+}>
+
+export default function useAuth(page: Page, session: Writable<any>, goto) {
+
+  // Required to use session.set()
+  let sessionValue
+  session.subscribe(value => {
+    sessionValue = value
+  })
+
+  let referrer
+  page.subscribe(value => {
+		referrer = value.url.searchParams.get('referrer')
+	})
+
+  const loadScript = () => new Promise( (resolve, reject) => {
+    const script = document.createElement('script')
+    script.id = 'gsiScript'
+    script.async = true
+    script.src = 'https://accounts.google.com/gsi/client'
+    script.onerror = (error) => reject(error)
+    script.onload = () => resolve(script)
+    document.body.appendChild(script)
+  })
+
+  function googleAccountsIdInitialize() {
+    return window.google.accounts.id.initialize({
+      client_id: config.googleClientId,
+      callback: googleCallback
+    })
+  }
+
+  function googleAccountsIdRenderButton(htmlId: string) {
+    return window.google.accounts.id.renderButton(
+      document.getElementById(htmlId), {
+        theme: 'filled_blue',
+        size: 'large',
+        width: '367'
+      }
+    )
+  }
+
+  function initializeSignInWithGoogle(htmlId?: string) {
+    googleAccountsIdInitialize()
+
+    if (htmlId) {
+      return googleAccountsIdRenderButton(htmlId)
+    }
+
+    if (!sessionValue.user) window.google.accounts.id.prompt()
+  }
+
+  function setSessionUser(user: User | null) {
+    session.update(s => ({
+      ...s,
+      user
+    }))
+  }
+
+  async function googleCallback(response) {
+    const res = await fetch('/auth/google', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ token: response.credential })
+    })
+    const fromEndpoint = await res.json()
+
+    if (res.ok) {
+      session.set({ user: fromEndpoint.user })
+      const { role } = fromEndpoint.user
+      if (referrer) return goto(referrer)
+      if (role === 'teacher') return goto('/teachers')
+      if (role === 'admin') return goto('/admin')
+      // Don't stay on login if successfully authenticated
+      if (window.location.pathname === '/login') goto('/')
+    }
+  }
+
+  async function registerLocal(user: User) {
+    try {
+      const res = await fetch('/auth/register', {
+        method: 'POST',
+        body: JSON.stringify(user),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      const fromEndpoint = await res.json()
+      if (res.ok) {
+        session.set({ user: fromEndpoint.user })
+        goto('/')
+      } else {
+        throw new Error(fromEndpoint.message)
+      }
+    } catch (err) {
+      console.error('Login error', err)
+      throw new Error(err.message)
+    }
+  }
+
+  async function loginLocal(credentials) {
+    try {
+      const res = await fetch('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify(credentials),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      const fromEndpoint = await res.json()
+      if (res.ok) {
+        setSessionUser(fromEndpoint.user)
+        const { role } = fromEndpoint.user
+        if (referrer) return goto(referrer)
+        if (role === 'teacher') return goto('/teachers')
+        if (role === 'admin') return goto('/admin')
+        return goto('/')
+      } else {
+        throw new Error(fromEndpoint.message)
+      }
+    } catch (err) {
+      console.error('Login error', err)
+      throw new Error(err.message)
+    }
+  }
+
+  async function logout() {
+    // Request server delete httpOnly cookie called session
+    const url = '/auth/logout'
+    const res = await fetch(url, {
+      method: 'POST'
+    })
+    if (res.ok) {
+      session.set({}) // delete session.user from 
+      goto('/login')
+    } else console.error(`Logout not successful: ${res.statusText} (${res.status})`)
+  }
+
+  return { loadScript, initializeSignInWithGoogle, registerLocal, loginLocal, logout }
+}

package/src/lib/config.ts

@@ -0,0 +1,4 @@
+// Only include data that is not sensitive
+export const config = {
+  googleClientId: import.meta.env.VITE_GOOGLE_CLIENT_ID
+}

package/src/lib/focus.ts

@@ -0,0 +1,10 @@
+type FocusResult = (formName: HTMLFormElement) => void
+
+export const focusOnFirstError: FocusResult = (form: HTMLFormElement) => {
+  for(const field of form.elements) {
+    if (!field.checkValidity()) {
+      field.focus()
+      break
+    }
+  }
+}

package/src/routes/__error.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" context="module">
+  export const load = ({ error, status }) => {
+    return {
+      props: {
+        errorMessage: `${status}: ${error.message}`
+      }
+    }
+  }
+</script>
+
+<script lang="ts">
+  export let errorMessage
+</script>
+
+<h1>Error</h1>
+<h4>{errorMessage}</h4>

package/src/routes/__layout.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { goto } from '$app/navigation'
+  import { page, session } from '$app/stores'
+  import { toast } from '../stores'
+  import useAuth from '$lib/auth'
+
+  // Vue.js Composition API style
+	const { loadScript, initializeSignInWithGoogle, logout } = useAuth(page, session, goto)
+
+  let sessionValue
+  session.subscribe(value => {
+		sessionValue = value
+	})
+
+  let Toast
+
+  onMount(async() => {
+    await import('bootstrap/js/dist/collapse')
+    Toast = (await import('bootstrap/js/dist/toast')).default
+		await loadScript()
+		initializeSignInWithGoogle()
+	})
+
+  const openToast = (open: boolean) => {
+    if (open) {
+      const toastDiv = <HTMLDivElement> document.getElementById('authToast')
+      const t = new Toast(toastDiv)
+      t.show()
+    }
+  }
+
+  $: openToast($toast.isOpen)
+</script>
+
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container">
+    <a class="navbar-brand" href="/">Auth</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarMain">
+      <div class="navbar-nav">
+        <a class="nav-link active" aria-current="page" href="/">Home</a>
+        <a class="nav-link" href="/info">Info</a>
+        <a class="nav-link" class:d-none={!$session.user} href="/profile">Profile</a>
+        <a class="nav-link" class:d-none={!$session.user || $session.user?.role !== 'admin'} href="/admin">Admin</a>
+        <a class="nav-link" class:d-none={!$session.user || $session.user?.role === 'student'} href="/teachers">Teachers</a>
+        <a class="nav-link" class:d-none={!!$session.user} href="/login">Login</a>
+        <a on:click|preventDefault={logout} class="nav-link" class:d-none={!$session.user} href={'#'}>Logout</a>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<main class="container">
+  <slot/>
+
+  <div id="authToast" class="toast position-fixed top-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header bg-primary text-white">
+      <strong class="me-auto">{$toast.title}</strong>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      {$toast.body}
+    </div>
+  </div>
+
+</main>
+
+<style lang="scss" global>
+  // Load Bootstrap's SCSS
+  @import 'bootstrap/scss/bootstrap';
+
+  // Make Retina displays crisper
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .toast {
+    z-index: 9999;
+  }
+</style>

package/src/routes/_db.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import dotenv from 'dotenv'
+import type { QueryResult} from 'pg'
+import pg from 'pg'
+
+dotenv.config()
+
+const pgNativePool = new pg.native.Pool({
+  max: 10, // default
+  connectionString: process.env['DATABASE_URL'],
+  ssl: {
+    rejectUnauthorized: false
+  }
+})
+
+type PostgresQueryResult = (sql: string, params?: any[]) => Promise<QueryResult<any>>
+export const query: PostgresQueryResult = (sql, params?) => pgNativePool.query(sql, params)

package/src/routes/_send-in-blue.ts

@@ -0,0 +1,29 @@
+import dotenv from 'dotenv'
+
+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'])
+
+// POST or PUT submission to SendInBlue
+const submit = async (method, url, data) => {
+  const response: Response = await fetch(`${SEND_IN_BLUE_URL}${url}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      'api-key': SEND_IN_BLUE_KEY
+    },
+    body: JSON.stringify(data)
+  })
+  if (!response.ok) {
+    console.error('Error from SendInBlue:', response)
+    throw new Error(`Error communicating with SendInBlue.`)
+  }
+}
+
+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/admin.svelte

@@ -0,0 +1,40 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit'
+
+	export const load: Load = async ({ session }) => {
+		const authorized = ['admin']
+		if (!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/admin.ts

@@ -0,0 +1,21 @@
+import type { RequestHandler } from '@sveltejs/kit'
+
+export const get: RequestHandler = async event => {
+  const authorized = ['admin']
+
+  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+    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

@@ -0,0 +1,21 @@
+import type { RequestHandler } from '@sveltejs/kit'
+
+export const get: RequestHandler = async event=> {
+  const authorized = ['admin', 'teacher']
+
+  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+    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

@@ -0,0 +1,36 @@
+import type { RequestHandler } from '@sveltejs/kit'
+import { query } from '../../_db'
+
+export const put: RequestHandler = async event => {
+  const authorized = ['admin', 'teacher', 'student']
+
+  if (!event.locals.user || !authorized.includes(event.locals.user.role)) {
+    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.'
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import type { RequestHandler } from '@sveltejs/kit'
+import { query } from '../_db'
+
+export const post: RequestHandler = async event => {
+  const { slug } = event.params
+
+  let result
+  let sql
+
+  try {
+    switch (slug) {
+      case 'login': 
+        sql = `SELECT authenticate($1) AS "authenticationResult";`
+        break
+      case 'register':
+        sql = `SELECT register($1) AS "authenticationResult";`
+        break
+      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 {
+          status: 200,
+          headers: {
+            'Set-Cookie': `session=; Path=/; SameSite=Lax; HttpOnly; Expires=${new Date().toUTCString()}`
+          },
+          body: {
+            message: 'Logout successful.'
+          }
+        }
+      default:
+        return {
+          status: 404,
+          body: {
+            message: 'Invalid endpoint.',
+            user: null
+          }
+        }
+    }
+
+    // Only /auth/login and /auth/register at this point
+    const body = await event.request.json()
+    result = await query(sql, [JSON.stringify(body)])
+
+  } catch (error) {
+    return {
+      status: 503,
+      body: {
+        message: 'Could not communicate with database.',
+        user: null
+      }
+    }
+  }
+
+  const { authenticationResult }: { authenticationResult: AuthenticationResult } = result.rows[0]
+
+  if (!authenticationResult.user) {
+    return {
+      status: authenticationResult.statusCode,
+      body: {
+        message: authenticationResult.status,
+        user: null,
+        sessionId: null
+      }
+    }
+  }
+
+  // Prevent hooks.ts:handle() from deleting cookie we just set
+  event.locals.user = authenticationResult.user
+
+  return {
+    status: authenticationResult.statusCode,
+    headers: { // database expires sessions in 2 hours (could do it here too)
+      'Set-Cookie': `session=${authenticationResult.sessionId}; Path=/; SameSite=Lax; HttpOnly;`
+    },
+    body: {
+      message: authenticationResult.status,
+      user: authenticationResult.user,
+    }
+  }
+}

package/src/routes/auth/forgot.ts

@@ -0,0 +1,42 @@
+import type { RequestHandler } from '@sveltejs/kit'
+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: Secret = process.env['JWT_SECRET']
+
+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, {
+      expiresIn: '30m'
+    })
+
+    // 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'],
+      htmlContent: `
+        <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)
+  }
+
+  return {
+    status: 204
+  }
+}

package/src/routes/auth/google.ts

@@ -0,0 +1,65 @@
+import type { RequestHandler } from '@sveltejs/kit'
+import { OAuth2Client } from 'google-auth-library'
+import { query } from '../_db';
+import { config } from '$lib/config'
+
+// Verify JWT per https://developers.google.com/identity/gsi/web/guides/verify-google-id-token
+async function getGoogleUserFromJWT(token: string): Promise<User> {
+  try {
+    const clientId = config.googleClientId
+    const client = new OAuth2Client(clientId)
+    const ticket = await client.verifyIdToken({
+      idToken: token,
+      audience: clientId
+    });
+    const payload = ticket.getPayload()
+    return {
+      firstName: payload['given_name'],
+      lastName: payload['family_name'],
+      email: payload['email']
+    }
+  } catch (error) {
+    throw new Error(`Google user could not be authenticated: ${error.message}`)
+  }
+}
+
+// Upsert user and get session ID
+async function upsertGoogleUser(user: 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 (error) {
+    throw new Error(`GMail user could not be upserted: ${error.message}`)
+  }
+}
+
+// Returns local user if Google user authenticated (and authorized our app)
+export const post: RequestHandler = async event => {
+  try {
+    const { token } = await event.request.json()
+    const user = await getGoogleUserFromJWT(token)
+    const userSession = await upsertGoogleUser(user)
+
+    // 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
+      }
+    }
+  } catch (error) {
+    return { // session cookie deleted by hooks.js handle()
+      status: 401,
+      body: {
+        message: error.message
+      }
+    }
+  }
+}