feat(mvp): phase 3 - authentication system

Implement local auth flow: login, registration, logout, JWT access/refresh tokens in HTTP-only cookies, hooks.server.ts middleware, guest mode support, Superforms + Zod validation, and reusable auth/authorize middleware.
2026-03-24 20:45:14 +03:00
parent f1b1aa5975
commit 2c001df322
19 changed files with 751 additions and 28 deletions
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { superForm } from 'sveltekit-superforms';
+	import type { PageData } from './$types.js';
+
+	let { data }: { data: PageData } = $props();
+
+	const { form, errors, enhance, submitting } = superForm(data.form);
+</script>
+
+<svelte:head>
+	<title>Register — Web App Launcher</title>
+</svelte:head>
+
+<main class="flex min-h-screen items-center justify-center bg-background text-foreground">
+	<div class="w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-lg">
+		<h1 class="mb-6 text-center text-2xl font-bold text-card-foreground">Create Account</h1>
+
+		<form method="POST" use:enhance class="space-y-4">
+			<div>
+				<label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground">
+					Display Name
+				</label>
+				<input
+					id="displayName"
+					name="displayName"
+					type="text"
+					autocomplete="name"
+					bind:value={$form.displayName}
+					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+					placeholder="Your name"
+				/>
+				{#if $errors.displayName}
+					<p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
+					Email
+				</label>
+				<input
+					id="email"
+					name="email"
+					type="email"
+					autocomplete="email"
+					bind:value={$form.email}
+					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+					placeholder="you@example.com"
+				/>
+				{#if $errors.email}
+					<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
+					Password
+				</label>
+				<input
+					id="password"
+					name="password"
+					type="password"
+					autocomplete="new-password"
+					bind:value={$form.password}
+					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+					placeholder="At least 6 characters"
+				/>
+				{#if $errors.password}
+					<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
+				{/if}
+			</div>
+
+			<button
+				type="submit"
+				disabled={$submitting}
+				class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if $submitting}
+					Creating account...
+				{:else}
+					Create Account
+				{/if}
+			</button>
+		</form>
+
+		<p class="mt-4 text-center text-sm text-muted-foreground">
+			Already have an account?
+			<a href="/login" class="font-medium text-primary hover:underline">Sign in</a>
+		</p>
+	</div>
+</main>