feat: Add email auth

src/lib/auth.ts

@@ -9,6 +9,10 @@ const client = new ConvexHttpClient(process.env.PUBLIC_CONVEX_URL!);
 export const auth = betterAuth({
 	secret: process.env.BETTER_AUTH_SECRET!,
 	database: convexAdapter(client),
+	emailAndPassword: {
+		enabled: true,
+		requireEmailVerification: false,
+	},
 	socialProviders: {
 		google: {
 			clientId: process.env.GOOGLE_CLIENT_ID!,

src/lib/components/auth/email-auth-form.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { authClient } from '$lib/backend/auth/client.js';
+	import { goto } from '$app/navigation';
+
+	let { mode = $bindable('sign-in') }: { mode: 'sign-in' | 'sign-up' } = $props();
+
+	let email = $state('');
+	let password = $state('');
+	let name = $state('');
+	let loading = $state(false);
+	let error = $state('');
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		loading = true;
+		error = '';
+
+		try {
+			if (mode === 'sign-up') {
+				const result = await authClient.signUp.email({
+					email,
+					password,
+					name,
+					callbackURL: '/chat'
+				});
+				
+				if (result.error) {
+					error = result.error.message || 'Failed to create account';
+				} else {
+					await goto('/chat');
+				}
+			} else {
+				const result = await authClient.signIn.email({
+					email,
+					password,
+					callbackURL: '/chat'
+				});
+				
+				if (result.error) {
+					error = result.error.message || 'Invalid email or password';
+				} else {
+					await goto('/chat');
+				}
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'An error occurred';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function toggleMode() {
+		mode = mode === 'sign-in' ? 'sign-up' : 'sign-in';
+		error = '';
+	}
+</script>
+
+<div class="w-full max-w-sm">
+	<form onsubmit={handleSubmit} class="space-y-6">
+		{#if mode === 'sign-up'}
+			<div class="space-y-2">
+				<Label for="name" class="text-sm font-medium">Name</Label>
+				<Input
+					id="name"
+					type="text"
+					bind:value={name}
+					placeholder="Enter your name"
+					required
+					disabled={loading}
+					class="w-full"
+				/>
+			</div>
+		{/if}
+		
+		<div class="space-y-2">
+			<Label for="email" class="text-sm font-medium">Email</Label>
+			<Input
+				id="email"
+				type="email"
+				bind:value={email}
+				placeholder="Enter your email"
+				required
+				disabled={loading}
+				class="w-full"
+			/>
+		</div>
+		
+		<div class="space-y-2">
+			<Label for="password" class="text-sm font-medium">Password</Label>
+			<Input
+				id="password"
+				type="password"
+				bind:value={password}
+				placeholder="Enter your password"
+				required
+				disabled={loading}
+				class="w-full"
+			/>
+		</div>
+
+		{#if error}
+			<div class="text-destructive bg-destructive/10 border-destructive/20 text-sm p-3 rounded-lg border">
+				{error}
+			</div>
+		{/if}
+
+		<Button type="submit" class="w-full" {loading}>
+			{mode === 'sign-in' ? 'Sign In' : 'Create Account'}
+		</Button>
+		
+		<div class="text-center">
+			<button
+				type="button"
+				class="text-primary hover:text-primary/80 text-sm underline-offset-4 hover:underline transition-colors"
+				onclick={toggleMode}
+				disabled={loading}
+			>
+				{mode === 'sign-in' ? "Don't have an account? Sign up" : 'Already have an account? Sign in'}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/login/+page.svelte

@@ -2,7 +2,11 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Icons from '$lib/components/icons';
 	import { authClient } from '$lib/backend/auth/client.js';
+	import EmailAuthForm from '$lib/components/auth/email-auth-form.svelte';
 	import DeviconGoogle from '~icons/devicon/google';
+	import MailIcon from '~icons/lucide/mail';
+
+	let showEmailForm = $state(false);
 
 	async function signInGitHub() {
 		await authClient.signIn.social({ provider: 'github', callbackURL: '/chat' });
@@ -13,12 +17,36 @@
 	}
 </script>
 
-<div class="flex h-svh flex-col place-items-center justify-center gap-4">
+<div class="flex h-svh flex-col place-items-center justify-center gap-6 p-4">
-	<h1 class="text-2xl font-bold">Sign in to thom.chat</h1>
+	<div class="text-center">
-	<Button variant="outline" onClickPromise={signInGitHub}>
+		<h1 class="text-2xl font-bold">Sign in to thom.chat</h1>
-		<Icons.GitHub /> Continue with GitHub
+		<p class="text-muted-foreground text-sm mt-2">Choose your preferred sign-in method</p>
-	</Button>
+	</div>
-	<Button variant="outline" onClickPromise={signInGoogle}>
+
-		<DeviconGoogle /> Continue with Google
+	{#if !showEmailForm}
-	</Button>
+		<div class="flex w-full max-w-sm flex-col gap-3">
+			<Button variant="outline" onClickPromise={signInGoogle} class="w-full">
+				<DeviconGoogle /> Continue with Google
+			</Button>
+			<Button variant="outline" onClickPromise={signInGitHub} class="w-full">
+				<Icons.GitHub /> Continue with GitHub
+			</Button>
+			<Button 
+				variant="outline" 
+				onclick={() => showEmailForm = true}
+				class="w-full"
+			>
+				<MailIcon /> Continue with Email
+			</Button>
+		</div>
+	{:else}
+		<EmailAuthForm />
+		<Button 
+			variant="ghost" 
+			onclick={() => showEmailForm = false}
+			class="text-muted-foreground text-sm"
+		>
+			← Back to other options
+		</Button>
+	{/if}
 </div>