@svgrid/create 2.7.0 → 2.8.0

package/templates/sveltekit/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
   import '../app.css'
   import { theme, presets } from '$lib/theme.svelte'
 
-  let { children } = $props()
+  let { children, data } = $props()
 
   // Apply on mount so the picker's starting value wins over the stylesheet, and
   // on every later change. Runs client-side only - the server-rendered HTML is
@@ -31,6 +31,14 @@
   <button type="button" onclick={() => theme.toggleMode()} aria-pressed={theme.mode === 'dark'}>
     {theme.mode === 'dark' ? 'Dark' : 'Light'}
   </button>
+
+  {#if data?.user}
+    <span class="who">{data.user.email} <em>({data.user.role})</em></span>
+    <!-- A form, not a link: see routes/logout/+page.server.ts for why. -->
+    <form class="out" method="POST" action="/logout"><button type="submit">Sign out</button></form>
+  {:else}
+    <a class="who" href="/login">Sign in</a>
+  {/if}
 </header>
 
 <main>
@@ -68,6 +76,13 @@
     cursor: pointer;
     min-width: 4.5rem;
   }
+  .who {
+    margin-inline-start: auto;
+    font-size: 0.875rem;
+    color: var(--sg-header-fg);
+  }
+  .who em { color: var(--sg-muted, #64748b); font-style: normal; }
+  .out { margin: 0; }
   main {
     padding: 1.25rem;
     font-family: system-ui, sans-serif;

package/templates/sveltekit/src/routes/login/+page.server.ts

@@ -0,0 +1,51 @@
+import { fail, redirect } from '@sveltejs/kit'
+import { dev } from '$app/environment'
+import type { Actions, PageServerLoad } from './$types'
+import {
+  SESSION_COOKIE,
+  createSession,
+  sessionCookieOptions,
+  verifyCredentials,
+} from '$lib/server/auth'
+
+export const load: PageServerLoad = ({ locals, url }) => {
+  // Already signed in? Nothing to do here.
+  if (locals.user) redirect(303, safeRedirect(url.searchParams.get('redirectTo')))
+  return { redirectTo: safeRedirect(url.searchParams.get('redirectTo')) }
+}
+
+/**
+ * Only ever redirect to a path on this site. Echoing an arbitrary `redirectTo`
+ * back into a Location header is an open redirect: an attacker mails a link to
+ * your real login page that lands the user on theirs afterwards.
+ */
+function safeRedirect(target: string | null): string {
+  if (!target) return '/people'
+  // Must start with a single slash - "//evil.test" and "https://evil.test" are
+  // both absolute, and the browser would happily follow them off-site.
+  if (!target.startsWith('/') || target.startsWith('//')) return '/people'
+  return target
+}
+
+export const actions: Actions = {
+  default: async ({ request, cookies, url }) => {
+    const data = await request.formData()
+    const email = String(data.get('email') ?? '')
+    const password = String(data.get('password') ?? '')
+    const redirectTo = safeRedirect(String(data.get('redirectTo') ?? '') || url.searchParams.get('redirectTo'))
+
+    if (!email || !password) {
+      return fail(400, { email, error: 'Enter your email and password.' })
+    }
+
+    const user = await verifyCredentials(email, password)
+    if (!user) {
+      // One message for both "no such user" and "wrong password": a specific
+      // one tells an attacker which emails are registered.
+      return fail(401, { email, error: 'Those credentials did not match.' })
+    }
+
+    cookies.set(SESSION_COOKIE, createSession(user.id), sessionCookieOptions(!dev))
+    redirect(303, redirectTo)
+  },
+}

package/templates/sveltekit/src/routes/login/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { enhance } from '$app/forms'
+  import type { ActionData, PageData } from './$types'
+
+  let { data, form }: { data: PageData; form: ActionData } = $props()
+</script>
+
+<svelte:head><title>Sign in</title></svelte:head>
+
+<main class="login">
+  <h1>Sign in</h1>
+
+  <form method="POST" use:enhance>
+    <input type="hidden" name="redirectTo" value={data.redirectTo} />
+
+    <label for="email">Email</label>
+    <input id="email" name="email" type="email" autocomplete="username" required value={form?.email ?? ''} />
+
+    <label for="password">Password</label>
+    <input id="password" name="password" type="password" autocomplete="current-password" required />
+
+    {#if form?.error}
+      <!-- Announced, so a screen reader hears the failure rather than only
+           seeing the field reset. -->
+      <p class="error" role="alert">{form.error}</p>
+    {/if}
+
+    <button type="submit">Sign in</button>
+  </form>
+
+  <p class="hint">
+    Demo users: <code>admin@example.com</code> (admin) and
+    <code>viewer@example.com</code> (viewer). Password <code>password</code> for both.
+  </p>
+</main>
+
+<style>
+  .login { max-width: 22rem; margin: 4rem auto; padding: 0 1rem; }
+  form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.5rem; }
+  label { font-weight: 600; font-size: 0.875rem; }
+  input {
+    padding: 0.5rem 0.6rem; font: inherit;
+    border: 1px solid var(--sg-border, #cbd5e1); border-radius: var(--sg-radius, 8px);
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  input + label { margin-top: 0.75rem; }
+  button {
+    margin-top: 1.25rem; padding: 0.55rem 0.9rem; font: inherit; font-weight: 600;
+    color: #fff; background: var(--sg-accent, #2563eb);
+    border: 0; border-radius: var(--sg-radius, 8px); cursor: pointer;
+  }
+  .error { margin: 0.75rem 0 0; color: var(--sg-danger, #dc2626); font-size: 0.875rem; }
+  .hint { margin-top: 2rem; font-size: 0.8125rem; color: var(--sg-muted, #64748b); line-height: 1.6; }
+  code { font-size: 0.9em; }
+</style>

package/templates/sveltekit/src/routes/logout/+server.ts

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit'
+import { dev } from '$app/environment'
+import type { RequestHandler } from './$types'
+import { SESSION_COOKIE, destroySession, sessionCookieOptions } from '$lib/server/auth'
+
+/**
+ * Sign out.
+ *
+ * An endpoint rather than a form action, because signing out has no page to
+ * render - a `+page.server.ts` with no `+page.svelte` beside it is not a route
+ * SvelteKit will post a form to, and returns 415.
+ *
+ * POST only, deliberately. A GET logout link fires from any prefetcher or
+ * `<img src="/logout">` on a page you do not control. SvelteKit's origin check
+ * covers this POST, and the session cookie is SameSite=Lax, so a cross-site
+ * form cannot drive it either.
+ */
+export const POST: RequestHandler = async ({ cookies }) => {
+  // Drop the session server-side as well as clearing the cookie, so a copy of
+  // the id taken earlier stops working immediately.
+  destroySession(cookies.get(SESSION_COOKIE))
+  cookies.delete(SESSION_COOKIE, sessionCookieOptions(!dev))
+  redirect(303, '/login')
+}

package/templates/sveltekit/src/routes/people/+page.server.ts

@@ -1,14 +1,23 @@
+import { error } from '@sveltejs/kit'
 import type { Actions, PageServerLoad } from './$types'
 import { listPeople, renamePerson, type Person } from '$lib/people'
 
-export const load: PageServerLoad = ({ url }) => {
+// hooks.server.ts already refused this request if nobody is signed in, so the
+// load can assume a user. It still reads `locals.user` rather than trusting a
+// query parameter or a client-sent id.
+export const load: PageServerLoad = ({ url, locals }) => {
   const sortBy = (url.searchParams.get('sort') ?? 'name') as keyof Person
   const desc = url.searchParams.get('dir') === 'desc'
-  return { rows: listPeople(sortBy, desc), sortBy, desc }
+  return { rows: listPeople(sortBy, desc), sortBy, desc, canEdit: locals.user?.role === 'admin' }
 }
 
 export const actions: Actions = {
-  rename: async ({ request }) => {
+  rename: async ({ request, locals }) => {
+    // The check lives on the server. `canEdit` above only hides the UI, and
+    // hiding a button stops nobody from posting the form by hand.
+    if (locals.user?.role !== 'admin') {
+      error(403, 'Only an admin can rename people.')
+    }
     const data = await request.formData()
     renamePerson(Number(data.get('id')), String(data.get('name')))
     return { success: true }

package/templates/sveltekit/src/routes/people/+page.svelte

@@ -6,11 +6,13 @@
 
   let { data } = $props()
 
-  const columns: GridColumns<Person> = [
-    { field: 'name', header: 'Name', editable: true },
+  // Editing is offered only to an admin. The server enforces it either way
+  // (see the rename action) - this just avoids showing an edit that will fail.
+  const columns: GridColumns<Person> = $derived([
+    { field: 'name', header: 'Name', editable: data.canEdit },
     { field: 'role', header: 'Role' },
     { field: 'year', header: 'Year' },
-  ]
+  ])
 
   // Header click -> URL -> server sorts -> load returns ordered rows.
   function onSortingChange(sorting: Array<{ id: string; desc: boolean }>) {
@@ -27,7 +29,7 @@
 
   // Committed edit -> form action -> database.
   async function onCellValueChange(e: { row: Person; columnId: string; newValue: unknown }) {
-    if (e.columnId !== 'name') return
+    if (e.columnId !== 'name' || !data.canEdit) return
     const body = new FormData()
     body.set('id', String(e.row.id))
     body.set('name', String(e.newValue))
@@ -36,7 +38,10 @@
 </script>
 
 <h1>People</h1>
-<p>Click a header to sort - the order lives in the URL. Double-click a name to edit it.</p>
+<p>
+  Click a header to sort - the order lives in the URL.
+  {#if data.canEdit}Double-click a name to edit it.{:else}Sign in as an admin to edit names.{/if}
+</p>
 
 <SvGrid
   data={data.rows}