initial with catppuccin theming

src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import './layout.css';
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { children } = $props();
+</script>
+
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+{@render children()}

src/routes/demo/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
+<a href={resolve('/demo/better-auth')}>better-auth</a>

src/routes/demo/better-auth/+page.server.ts

@@ -0,0 +1,20 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import type { PageServerLoad } from './$types';
+import { auth } from '$lib/server/auth';
+
+export const load: PageServerLoad = (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/demo/better-auth/login');
+	}
+	return { user: event.locals.user };
+};
+
+export const actions: Actions = {
+	signOut: async (event) => {
+		await auth.api.signOut({
+			headers: event.request.headers
+		});
+		return redirect(302, '/demo/better-auth/login');
+	}
+};

src/routes/demo/better-auth/+page.svelte

@@ -0,0 +1,12 @@
+<script lang='ts'>
+	import { enhance } from '$app/forms';
+	import type { PageServerData } from './$types';
+
+	let { data }: { data: PageServerData } = $props();
+</script>
+
+<h1>Hi, {data.user.name}!</h1>
+<p>Your user ID is {data.user.id}.</p>
+<form method="post" action="?/signOut" use:enhance>
+	<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Sign out</button>
+</form>

src/routes/demo/better-auth/login/+page.server.ts

@@ -0,0 +1,61 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import type { PageServerLoad } from './$types';
+import { auth } from '$lib/server/auth';
+import { APIError } from 'better-auth/api';
+
+export const load: PageServerLoad = (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/demo/better-auth');
+	}
+	return {};
+};
+
+export const actions: Actions = {
+	signInEmail: async (event) => {
+		const formData = await event.request.formData();
+		const email = formData.get('email')?.toString() ?? '';
+		const password = formData.get('password')?.toString() ?? '';
+
+		try {
+			await auth.api.signInEmail({
+				body: {
+					email,
+					password,
+					callbackURL: '/auth/verification-success'
+				}
+			});
+		} catch (error) {
+			if (error instanceof APIError) {
+				return fail(400, { message: error.message || 'Signin failed' });
+			}
+			return fail(500, { message: 'Unexpected error' });
+		}
+
+		return redirect(302, '/demo/better-auth');
+	},
+	signUpEmail: async (event) => {
+		const formData = await event.request.formData();
+		const email = formData.get('email')?.toString() ?? '';
+		const password = formData.get('password')?.toString() ?? '';
+		const name = formData.get('name')?.toString() ?? '';
+
+		try {
+			await auth.api.signUpEmail({
+				body: {
+					email,
+					password,
+					name,
+					callbackURL: '/auth/verification-success'
+				}
+			});
+		} catch (error) {
+			if (error instanceof APIError) {
+				return fail(400, { message: error.message || 'Registration failed' });
+			}
+			return fail(500, { message: 'Unexpected error' });
+		}
+
+		return redirect(302, '/demo/better-auth');
+	},
+};

src/routes/demo/better-auth/login/+page.svelte

@@ -0,0 +1,25 @@
+<script lang='ts'>
+	import { enhance } from '$app/forms';
+	import type { ActionData } from './$types';
+
+	let { form }: { form: ActionData } = $props();
+</script>
+
+<h1>Login</h1>
+<form method="post" action="?/signInEmail" use:enhance>
+	<label>
+		Email
+		<input type="email" name="email" class="mt-1 px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+	</label>
+	<label>
+		Password
+		<input type="password" name="password" class="mt-1 px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+	</label>
+	<label>
+		Name (for registration)
+		<input name="name" class="mt-1 px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
+	</label>
+	<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Login</button>
+	<button formaction="?/signUpEmail" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Register</button>
+</form>
+<p class="text-red-500">{form?.message ?? ''}</p>

src/routes/layout.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@import "@catppuccin/tailwindcss/mocha.css";
+
+#svelte-body {
+  background-color: black;
+}