feat: added auth page and the whole functionallity surrounding it.

feat: added tests (not working currently, will fix later)

chore: removed turnstile dep. will check later other options.

.env.local.example

@@ -1,8 +1,10 @@
-# Better Auth Cookie Secret
 BETTER_AUTH_SECRET=
-
-# Better Auth URL
 BETTER_AUTH_URL=
 
-# Database URL
 DATABASE_URL=
+
+EMAIL_HOST=
+EMAIL_PORT=
+EMAIL_SECURE=
+EMAIL_USER=
+EMAIL_PASSWORD=

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -40,3 +40,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "",
     "css": "src/app/globals.css",
-    "baseColor": "neutral",
+    "baseColor": "stone",
     "cssVariables": true,
     "prefix": ""
   },

package.json

@@ -13,48 +13,69 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "cross-env NODE_ENV=development tsx src/server.ts",
+		"email:dev": "cross-env NODE_ENV=development email dev --dir src/lib/mail/templates --port 3001",
+		"test": "cross-env NODE_ENV=test playwright test",
 		"build": "next build",
-		"start": "next start",
+		"start": "cross-env NODE_ENV=production node src/server.ts",
 		"db:push": "drizzle-kit push",
-		"db:migrate": "bun run db:push && bun run drizzle-kit migrate"
+		"db:migrate": "bun run db:push && bun run drizzle-kit migrate",
+		"db:generate": "auth generate --output src/lib/db/schema/index.ts --yes",
+		"db:update": "bun run db:generate && bun run db:push"
 	},
 	"dependencies": {
-		"@better-auth/drizzle-adapter": "^1.5.3",
+		"@better-auth/drizzle-adapter": "^1.5.4",
+		"@hookform/resolvers": "^5.2.2",
 		"@marsidev/react-turnstile": "^1.4.2",
 		"@nanostores/react": "^1.0.0",
-		"better-auth": "^1.5.3",
+		"@react-email/components": "1.0.8",
-		"bullmq": "^5.70.2",
+		"better-auth": "^1.5.4",
+		"bullmq": "^5.70.4",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
 		"dexie": "^4.3.0",
 		"dexie-react-hooks": "^4.2.0",
 		"dotenv": "^17.3.1",
 		"drizzle-orm": "^0.45.1",
-		"express": "^5.2.1",
+		"framer-motion": "^12.35.0",
 		"http-signature": "^1.4.0",
 		"ioredis": "^5.10.0",
+		"lucide-react": "^0.577.0",
 		"nanostores": "^1.1.1",
 		"next": "16.1.6",
 		"next-themes": "^0.4.6",
 		"node-forge": "^1.3.3",
+		"nodemailer": "^8.0.1",
 		"pg": "^8.20.0",
-		"react": "19.2.3",
+		"radix-ui": "^1.4.3",
-		"react-dom": "19.2.3",
+		"react": "19.2.4",
+		"react-dom": "19.2.4",
+		"react-hook-form": "^7.71.2",
 		"socket.io": "^4.8.3",
-		"socket.io-client": "^4.8.3"
+		"socket.io-client": "^4.8.3",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.5.0",
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
-		"@tailwindcss/postcss": "^4",
+		"@react-email/preview-server": "5.2.9",
+		"@tailwindcss/postcss": "^4.2.1",
 		"@types/bun": "^1.3.10",
-		"@types/node": "^20",
+		"@types/node": "^20.19.37",
+		"@types/nodemailer": "^7.0.11",
 		"@types/pg": "^8.18.0",
-		"@types/react": "^19",
+		"@types/react": "^19.2.14",
-		"@types/react-dom": "^19",
+		"@types/react-dom": "^19.2.3",
+		"auth": "^1.5.4",
 		"babel-plugin-react-compiler": "1.0.0",
 		"cross-env": "^10.1.0",
 		"drizzle-kit": "^0.31.9",
-		"tailwindcss": "^4",
+		"react-email": "5.2.9",
+		"shadcn": "^3.8.5",
+		"tailwindcss": "^4.2.1",
 		"tsx": "^4.21.0",
-		"typescript": "^5"
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3"
 	},
 	"ignoreScripts": [
 		"sharp",

playwright.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+// Load .env.local so workers have DATABASE_URL, BETTER_AUTH_SECRET, etc.
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: 1,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('')`. */
+		baseURL: 'http://localhost:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'bun run dev',
+		url: 'http://localhost:3000',
+		reuseExistingServer: !process.env.CI,
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+});

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/logo/sipher.svg

@@ -0,0 +1,11 @@
+<svg class="icon-192" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="512" height="512" fill="#080808" />
+	<rect x="32" y="32" width="448" height="448" stroke="#C8F000" stroke-width="6" fill="none" />
+	<polygon points="80,32 32,32 32,80" fill="#C8F000" opacity="0.15" />
+	<polygon points="432,32 480,32 480,80" fill="#C8F000" opacity="0.15" />
+	<polygon points="32,432 32,480 80,480" fill="#C8F000" opacity="0.15" />
+	<polygon points="480,432 480,480 432,480" fill="#C8F000" opacity="0.15" />
+	<path d="M 180 160 L 330 160 L 330 240 L 180 240 L 180 352 L 330 352" stroke="#C8F000" stroke-width="28"
+		stroke-linecap="square" fill="none" />
+	<rect x="32" y="248" width="448" height="6" fill="#FF3C3C" opacity="0.25" />
+</svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth"; // path to your auth file
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);

src/app/auth/components/ForgotPasswordForm.tsx

@@ -0,0 +1,103 @@
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const forgotPasswordSchema = z.object({
+	email: z.email("Please enter a valid email"),
+});
+
+export function ForgotPasswordForm({
+	setView,
+}: {
+	setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
+}) {
+	const form = useForm<z.infer<typeof forgotPasswordSchema>>({
+		resolver: zodResolver(forgotPasswordSchema),
+		defaultValues: {
+			email: "",
+		},
+	});
+
+	async function onSubmit(values: z.infer<typeof forgotPasswordSchema>) {
+		console.debug(`[ForgotPasswordForm] submitting reset request for ${values.email}`);
+		const { email } = values;
+
+		return new Promise<void>((resolve) => {
+			authClient.requestPasswordReset({
+				email,
+				redirectTo: `${window.location.origin}/auth?view=resetPassword`,
+			}, {
+				onSuccess: () => {
+					console.debug(`[ForgotPasswordForm] reset request successful for ${email}`);
+					toast.success("Reset link sent to your email");
+					// Clean up the form
+					form.reset();
+					resolve();
+				},
+				onError: (error) => {
+					console.debug(`[ForgotPasswordForm] reset request failed for ${email}: ${JSON.stringify(error)}`);
+					form.setError("root", { message: error.error.message });
+					toast.error(error.error.message);
+					// Clean up the form
+					form.reset();
+					resolve();
+				}
+			})
+		})
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+				<FormField
+					control={form.control}
+					name="email"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">
+								Email
+							</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="Enter your email"
+									type="email"
+									className="h-11 text-base bg-background border-border/50"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<Button
+					type="submit"
+					className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90"
+					disabled={form.formState.isSubmitting}
+				>
+					{form.formState.isSubmitting ? (
+						<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+					) : null}
+					Send reset link
+				</Button>
+
+				<div className="text-center text-sm text-muted-foreground">
+					<button
+						type="button"
+						onClick={() => setView("signIn")}
+						className="text-primary hover:underline underline-offset-4 font-semibold"
+						disabled={form.formState.isSubmitting}
+					>
+						Back to Sign In
+					</button>
+				</div>
+			</form>
+		</Form>
+	);
+}

src/app/auth/components/Modals.tsx

@@ -0,0 +1,348 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Eye, EyeOff, Loader2, Sparkles } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const verifyEmailSchema = z.object({
+	token: z.string().min(1, "Token is required"),
+});
+
+export function VerifyEmailModal({
+	isOpen,
+	setIsOpen,
+	email,
+}: {
+	isOpen: boolean;
+	setIsOpen: (isOpen: boolean) => void;
+	email: string;
+}) {
+	const form = useForm<z.infer<typeof verifyEmailSchema>>({
+		resolver: zodResolver(verifyEmailSchema),
+		defaultValues: {
+			token: "",
+		},
+	});
+
+	async function onSubmit(values: z.infer<typeof verifyEmailSchema>) {
+		console.debug(`[VerifyEmailModal] submitting verification for ${email}`);
+		const { token } = values;
+
+		return new Promise<void>((resolve) => {
+			authClient.verifyEmail(
+				{ query: { token } },
+				{
+					onSuccess: () => {
+						toast.success("Email verified successfully! You will now be redirected to the dashboard.");
+						setIsOpen(false);
+						form.reset();
+						resolve();
+					},
+					onError: (error) => {
+						console.debug(`[VerifyEmailModal] verification failed for ${email}: ${JSON.stringify(error)}`);
+						form.setError("token", { message: error.error.message });
+						toast.error(error.error.message);
+						resolve();
+					},
+				}
+			);
+		});
+	}
+
+	const handleResendVerification = () => {
+		authClient.sendVerificationEmail(
+			{ email },
+			{
+				onSuccess: () => {
+					toast.success("A new verification email has been sent.");
+				},
+				onError: (error) => {
+					toast.error(error.error.message);
+				},
+			}
+		);
+	};
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Verify Your Email</DialogTitle>
+					<DialogDescription>
+						A verification code has been sent to{" "}
+						<span className="font-semibold">{email}</span>. Please enter it
+						below.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							control={form.control}
+							name="token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Verification Code</FormLabel>
+									<FormControl>
+										<Input placeholder="Enter your code" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<DialogFooter className="flex-col-reverse sm:flex-row sm:justify-between items-center pt-2">
+							<div className="text-sm text-muted-foreground pt-2 sm:pt-0">
+								<span>No code? </span>
+								<button
+									type="button"
+									onClick={handleResendVerification}
+									className="text-primary hover:underline underline-offset-4 font-semibold"
+									disabled={form.formState.isSubmitting}
+								>
+									Resend
+								</button>
+							</div>
+							<Button type="submit" disabled={form.formState.isSubmitting}>
+								{form.formState.isSubmitting ? (
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								) : null}
+								Verify
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export function ResetPasswordModal({
+	isOpen,
+	setIsOpen,
+}: {
+	isOpen: boolean;
+	setIsOpen: (isOpen: boolean) => void;
+}) {
+	const searchParams = useSearchParams();
+	const router = useRouter();
+	const token = searchParams.get("token");
+	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+	const formSchema = z.object({
+		password: z.string().min(8, "Password must be at least 8 characters"),
+		confirmPassword: z.string(),
+	}).refine((data) => data.password === data.confirmPassword, {
+		message: "Passwords don't match",
+		path: ["confirmPassword"],
+	});
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const generatePassword = () => {
+		// Between 8 and 12 characters
+		const length = Math.floor(Math.random() * 5) + 8;
+		const lower = "abcdefghijklmnopqrstuvwxyz";
+		const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+		const numbers = "0123456789";
+		const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+
+		const allChars = lower + upper + numbers + symbols;
+
+		const getRandom = (max: number) => {
+			const randomValues = new Uint32Array(1);
+			window.crypto.getRandomValues(randomValues);
+			return randomValues[0] % max;
+		}
+
+		let password = "";
+		// Ensure at least one of each character type
+		password += lower[getRandom(lower.length)];
+		password += upper[getRandom(upper.length)];
+		password += numbers[getRandom(numbers.length)];
+		password += symbols[getRandom(symbols.length)];
+
+		for (let i = 4; i < length; i++) {
+			password += allChars[getRandom(allChars.length)];
+		}
+
+		// Fisher-Yates (aka Knuth) Shuffle
+		let passwordArray = password.split('');
+		for (let i = passwordArray.length - 1; i > 0; i--) {
+			const j = getRandom(i + 1);
+			[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
+		}
+		const shuffledPassword = passwordArray.join('');
+
+		form.setValue("password", shuffledPassword, { shouldValidate: true });
+		form.setValue("confirmPassword", shuffledPassword, { shouldValidate: true });
+		toast.info("Generated a secure password. Make sure to save it somewhere safe!", {
+			action: {
+				label: "Copy",
+				onClick: () => {
+					navigator.clipboard.writeText(shuffledPassword);
+					toast.success("Password copied to clipboard", {
+						closeButton: true,
+					});
+				},
+			},
+			closeButton: true,
+			duration: 10000,
+		});
+	};
+
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		if (!token) {
+			toast.error("Invalid password reset token.");
+			return;
+		}
+
+		return new Promise<void>((resolve) => {
+			authClient.resetPassword({
+				token,
+				newPassword: values.password,
+			}, {
+				onSuccess: () => {
+					toast.success("Password has been reset successfully!");
+					setIsOpen(false);
+					router.replace("/auth", {
+						scroll: false,
+					});
+					resolve();
+				},
+				onError: (error) => {
+					toast.error(error.error.message);
+					resolve();
+				}
+			});
+		})
+	}
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => {
+			setIsOpen(open);
+			if (!open) {
+				router.replace('/auth', {
+					scroll: false,
+				});
+			}
+		}}>
+			<DialogContent className="sm:max-w-md" showCloseButton={false}>
+				<DialogHeader>
+					<DialogTitle>Reset Password</DialogTitle>
+					<DialogDescription>
+						Enter your new password below. Make sure it's secure.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
+									<FormControl>
+										<div className="relative">
+											<Input
+												placeholder={showPassword ? "Enter your password" : "********"}
+												type={showPassword ? "text" : "password"}
+												className="h-11 text-base bg-background border-border/50 pr-10"
+												{...field}
+											/>
+											<button
+												type="button"
+												onClick={() => setShowPassword(!showPassword)}
+												className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
+											>
+												{showPassword ? (
+													<EyeOff className="w-5 h-5" />
+												) : (
+													<Eye className="w-5 h-5" />
+												)}
+											</button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="confirmPassword"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Confirm Password</FormLabel>
+									<FormControl>
+										<div className="relative">
+											<Input
+												placeholder={showConfirmPassword ? "Confirm your password" : "********"}
+												type={showConfirmPassword ? "text" : "password"}
+												className="h-11 text-base bg-background border-border/50 pr-10"
+												{...field}
+											/>
+											<button
+												type="button"
+												onClick={() =>
+													setShowConfirmPassword(!showConfirmPassword)
+												}
+												className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
+											>
+												{showConfirmPassword ? (
+													<EyeOff className="w-5 h-5" />
+												) : (
+													<Eye className="w-5 h-5" />
+												)}
+											</button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="flex justify-end">
+							<button
+								type="button"
+								onClick={generatePassword}
+								className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline flex items-center gap-1"
+								disabled={form.formState.isSubmitting}
+							>
+								<Sparkles className="w-3 h-3" />
+								<span>Generate Password</span>
+							</button>
+						</div>
+						<DialogFooter>
+							<Button type="submit" disabled={form.formState.isSubmitting} className="w-full">
+								{form.formState.isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+								Reset Password
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	)
+}

src/app/auth/components/SignInForm.tsx

@@ -0,0 +1,153 @@
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+export function SignInForm({
+	setView,
+}: {
+	setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
+	onEmailNotVerified: (email: string) => void;
+}) {
+	const [showPassword, setShowPassword] = useState(false);
+	const formSchema = z.object({
+		email: z.email("Please enter a valid email"),
+		password: z.string().min(8, "Password must be at least 8 characters"),
+	})
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			email: "",
+			password: "",
+		},
+	})
+
+	async function onSubmit(values: z.infer<typeof formSchema>) {
+		console.debug(`[SignInForm] submitting login for ${values.email}`);
+		const { email, password } = values;
+
+		const { error } = await authClient.signIn.email({
+			email,
+			password,
+			callbackURL: "/",
+		})
+
+		if (error) {
+			form.setError("root", { message: error.message });
+			toast.error(error.message);
+			return;
+		}
+
+		toast.success("Login successful");
+		form.reset();
+		return;
+
+	}
+
+	return (
+		<>
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+					<FormField
+						control={form.control}
+						name="email"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Email</FormLabel>
+								<FormControl>
+									<Input
+										placeholder="Enter your email"
+										type="email"
+										className="h-11 text-base bg-background border-border/50"
+										{...field}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
+								<FormControl>
+									<div className="relative">
+										<Input
+											placeholder="Enter your password"
+											type={showPassword ? "text" : "password"}
+											className="h-11 text-base bg-background border-border/50 pr-10"
+											{...field}
+										/>
+										<button
+											type="button"
+											onClick={() => setShowPassword(!showPassword)}
+											className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
+										>
+											{showPassword ? (
+												<EyeOff className="w-5 h-5" />
+											) : (
+												<Eye className="w-5 h-5" />
+											)}
+										</button>
+									</div>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<div className="flex justify-end">
+						<button
+							type="button"
+							onClick={() => setView("forgotPassword")}
+							className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline"
+							disabled={form.formState.isSubmitting}
+						>
+							Forgot password?
+						</button>
+					</div>
+
+					<Button
+						type="submit"
+						className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
+						disabled={form.formState.isSubmitting}
+					>
+						{form.formState.isSubmitting ? (
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						) : null}
+						Continue
+					</Button>
+
+					<div className="text-center text-sm text-muted-foreground text font-mono">
+						Don't have an account?{" "}
+						<button
+							type="button"
+							onClick={() => setView("signUp")}
+							className="text-primary hover:underline underline-offset-4 font-semibold text-nowrap"
+							disabled={form.formState.isSubmitting}
+						>
+							Sign up
+						</button>
+					</div>
+				</form>
+			</Form>
+		</>
+	)
+}

src/app/auth/components/SignUpForm.tsx

@@ -0,0 +1,263 @@
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Eye, EyeOff, Loader2, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const signUpFormSchema = z.object({
+	email: z.email("Please enter a valid email"),
+	password: z.string().min(8, "Password must be at least 8 characters"),
+	confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+	message: "Passwords don't match",
+	path: ["confirmPassword"],
+});
+
+export function SignUpForm({
+	setView,
+	onSuccess,
+}: {
+	setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
+	onSuccess: (email: string) => void;
+}) {
+	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+	const form = useForm<z.infer<typeof signUpFormSchema>>({
+		resolver: zodResolver(signUpFormSchema),
+		defaultValues: {
+			email: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	async function onSubmit(values: z.infer<typeof signUpFormSchema>) {
+		console.debug(`[SignUpForm] submitting registration for ${values.email}`);
+		const { email, password, confirmPassword } = values;
+
+		if (password !== confirmPassword) {
+			form.setError("confirmPassword", { message: "Passwords don't match" });
+			return;
+		}
+
+		await authClient.signUp.email({
+			email,
+			password,
+			name: email.split("@")[0],
+		}, {
+			onSuccess: () => {
+				console.debug(`[SignUpForm] registration successful for ${email}`);
+				toast.success("Registration successful, please check your email for the verification link!");
+				onSuccess(email);
+				return;
+			},
+			onError: (error: any) => {
+				console.debug(`[SignUpForm] registration failed for ${email}: ${JSON.stringify(error)}`);
+				if (error.error.code === "PASSWORD_COMPROMISED") {
+					toast.error("Password is compromised, please use a different password", {
+						action: {
+							label: "More details",
+							onClick: () => {
+								window.open("https://haveibeenpwned.com/Passwords", "_blank");
+							},
+						},
+						duration: 10000,
+					});
+				} else {
+					form.setError("root", { message: error.error.message });
+					toast.error(error.error.message);
+				}
+				// Clean up the form
+				form.reset();
+				return;
+			}
+		})
+
+	}
+
+	const generatePassword = () => {
+		// Between 8 and 12 characters
+		const length = Math.floor(Math.random() * 5) + 8;
+		const lower = "abcdefghijklmnopqrstuvwxyz";
+		const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+		const numbers = "0123456789";
+		const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+
+		const allChars = lower + upper + numbers + symbols;
+
+		const getRandom = (max: number) => {
+			const randomValues = new Uint32Array(1);
+			window.crypto.getRandomValues(randomValues);
+			return randomValues[0] % max;
+		}
+
+		let password = "";
+		// Ensure at least one of each character type
+		password += lower[getRandom(lower.length)];
+		password += upper[getRandom(upper.length)];
+		password += numbers[getRandom(numbers.length)];
+		password += symbols[getRandom(symbols.length)];
+
+		for (let i = 4; i < length; i++) {
+			password += allChars[getRandom(allChars.length)];
+		}
+
+		// Fisher-Yates (aka Knuth) Shuffle
+		let passwordArray = password.split('');
+		for (let i = passwordArray.length - 1; i > 0; i--) {
+			const j = getRandom(i + 1);
+			[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
+		}
+		const shuffledPassword = passwordArray.join('');
+
+		form.setValue("password", shuffledPassword, { shouldValidate: true });
+		form.setValue("confirmPassword", shuffledPassword, { shouldValidate: true });
+		toast.info("Generated a secure password. Make sure to save it somewhere safe!", {
+			action: {
+				label: "Copy",
+				onClick: () => {
+					navigator.clipboard.writeText(shuffledPassword);
+					toast.success("Password copied to clipboard", {
+						closeButton: true,
+					});
+				},
+			},
+			closeButton: true,
+			duration: 10000,
+		});
+	};
+
+	return (
+		<>
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+					<FormField
+						control={form.control}
+						name="email"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Email</FormLabel>
+								<FormControl>
+									<Input
+										placeholder="Enter your email"
+										type="email"
+										className="h-11 text-base bg-background border-border/50"
+										{...field}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
+								<FormControl>
+									<div className="relative">
+										<Input
+											placeholder={showPassword ? "Enter your password" : "********"}
+											type={showPassword ? "text" : "password"}
+											className="h-11 text-base bg-background border-border/50 pr-10"
+											{...field}
+										/>
+										<button
+											type="button"
+											onClick={() => setShowPassword(!showPassword)}
+											className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
+										>
+											{showPassword ? (
+												<EyeOff className="w-5 h-5" />
+											) : (
+												<Eye className="w-5 h-5" />
+											)}
+										</button>
+									</div>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="confirmPassword"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Confirm Password</FormLabel>
+								<FormControl>
+									<div className="relative">
+										<Input
+											placeholder={showConfirmPassword ? "Confirm your password" : "********"}
+											type={showConfirmPassword ? "text" : "password"}
+											className="h-11 text-base bg-background border-border/50 pr-10"
+											{...field}
+										/>
+										<button
+											type="button"
+											onClick={() =>
+												setShowConfirmPassword(!showConfirmPassword)
+											}
+											className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
+										>
+											{showConfirmPassword ? (
+												<EyeOff className="w-5 h-5" />
+											) : (
+												<Eye className="w-5 h-5" />
+											)}
+										</button>
+									</div>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<div className="flex justify-end">
+						<button
+							type="button"
+							onClick={generatePassword}
+							className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline flex items-center gap-1"
+							disabled={form.formState.isSubmitting}
+						>
+							<Sparkles className="w-3 h-3" />
+							<span>Generate Password</span>
+						</button>
+					</div>
+
+					<Button
+						type="submit"
+						className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90"
+						disabled={form.formState.isSubmitting}
+					>
+						{form.formState.isSubmitting ? (
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+						) : null}
+						Create Account
+					</Button>
+
+					<div className="text-center text-sm text-muted-foreground">
+						Already have an account?{" "}
+						<button
+							type="button"
+							onClick={() => setView("signIn")}
+							className="text-primary hover:underline underline-offset-4 font-semibold"
+							disabled={form.formState.isSubmitting}
+						>
+							Sign in
+						</button>
+					</div>
+				</form>
+			</Form>
+		</>
+	);
+}

src/app/auth/components/index.tsx

@@ -0,0 +1,6 @@
+export * from "./ForgotPasswordForm";
+export * from "./Modals";
+export * from "./settings-dropdown";
+export * from "./SignInForm";
+export * from "./SignUpForm";
+

src/app/auth/components/settings-dropdown.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Monitor, Moon, Settings, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+
+export function SettingsDropdown() {
+	const { setTheme, theme } = useTheme();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size="icon" className="h-auto p-2 text-muted-foreground hover:text-foreground focus:ring-0 focus:ring-offset-0">
+					<Settings className="size-5" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuLabel>Appearance</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<DropdownMenuSub>
+					<DropdownMenuSubTrigger>
+						{theme === 'light' ? <Sun className="mr-2 size-4" /> : theme === 'dark' ? <Moon className="mr-2 size-4" /> : <Monitor className="mr-2 size-4" />}
+						<span>Theme</span>
+					</DropdownMenuSubTrigger>
+					<DropdownMenuSubContent>
+						<DropdownMenuItem onClick={() => setTheme("light")}>
+							<Sun className="mr-2 size-4" />
+							<span>Light</span>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => setTheme("dark")}>
+							<Moon className="mr-2 size-4" />
+							<span>Dark</span>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => setTheme("system")}>
+							<Monitor className="mr-2 size-4" />
+							<span>System</span>
+						</DropdownMenuItem>
+					</DropdownMenuSubContent>
+				</DropdownMenuSub>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+} 

src/app/auth/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { ForgotPasswordForm, ResetPasswordModal, SettingsDropdown, SignInForm, SignUpForm, VerifyEmailModal } from "./components";
+
+export default function AuthPage() {
+
+	const searchParams = useSearchParams();
+	const method = searchParams.get("method") as "signUp" | "signIn";
+	const type = searchParams.get("type");
+
+	const { data: session, error: sessionError, isPending } = authClient.useSession();
+	const router = useRouter();
+	const [view, setView] = useState<"signIn" | "signUp" | "forgotPassword">(
+		type === "orgInvite" ? (method === "signUp" ? "signUp" : "signIn") : "signIn"
+	);
+	const [isResetPasswordModalOpen, setResetPasswordModalOpen] = useState(false);
+	const [isVerifyEmailModalOpen, setVerifyEmailModalOpen] = useState(false);
+	const [emailToVerify, setEmailToVerify] = useState("");
+
+	useEffect(() => {
+		const viewParam = searchParams.get("view");
+		if (viewParam?.startsWith("resetPassword")) {
+			setResetPasswordModalOpen(true);
+		}
+	}, [searchParams]);
+
+
+	if (session === undefined) {
+		return (
+			<div className="flex h-screen w-screen items-center justify-center bg-background">
+				<Loader2 className="h-10 w-10 animate-spin text-primary" />
+			</div>
+		)
+	} else if (session !== null && "user" in session) {
+		router.replace("/");
+	}
+
+	return (
+		<>
+			<ResetPasswordModal
+				isOpen={isResetPasswordModalOpen}
+				setIsOpen={setResetPasswordModalOpen}
+			/>
+			<VerifyEmailModal
+				isOpen={isVerifyEmailModalOpen}
+				setIsOpen={setVerifyEmailModalOpen}
+				email={emailToVerify}
+			/>
+
+			<div className="flex flex-col min-h-screen w-screen items-center justify-center bg-background gap-8 p-4 sm:p-0 ">
+				<div className="flex flex-col items-center gap-1">
+					<span className="font-display text-4xl sm:text-5xl tracking-[0.08em] text-primary">SiPher</span>
+					<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">Silent Whisper</span>
+				</div>
+				<Card className="relative w-full max-w-md bg-card text-card-foreground p-6 sm:p-8 rounded-lg shadow-2xl border-border">
+					<div className="absolute top-4 left-4">
+						<Button disabled={type === "orgInvite"} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" onClick={() => router.back()}>
+							<ArrowLeft className="w-5 h-5" />
+						</Button>
+					</div>
+					<div className="absolute top-4 right-4">
+						<SettingsDropdown />
+					</div>
+					<CardHeader className="flex flex-col items-center space-y-6 pt-8 text-center">
+						<CardTitle className="text-2xl font-semibold font-mono">
+							{view === "signIn" && "Sign In"}
+							{view === "signUp" && "Create an account"}
+							{view === "forgotPassword" && "Reset Password"}
+						</CardTitle>
+					</CardHeader>
+					<CardContent className="p-0 overflow-hidden">
+						<AnimatePresence mode="wait" initial={false}>
+							<motion.div
+								key={view}
+								initial={{ opacity: 0, x: 50 }}
+								animate={{ opacity: 1, x: 0 }}
+								exit={{ opacity: 0, x: -50 }}
+								transition={{ duration: 0.3 }}
+							>
+								{view === "signIn" ? (
+									<SignInForm
+										setView={setView}
+										onEmailNotVerified={(email) => {
+											setEmailToVerify(email);
+											setVerifyEmailModalOpen(true);
+										}}
+									/>
+								) : view === "signUp" ? (
+									<SignUpForm
+										setView={setView}
+										onSuccess={(email) => {
+											setEmailToVerify(email);
+											setVerifyEmailModalOpen(true);
+										}}
+									/>
+								) : (
+									<ForgotPasswordForm setView={setView} />
+								)}
+							</motion.div>
+						</AnimatePresence>
+					</CardContent>
+				</Card>
+				<div className="flex flex-col items-center gap-1">
+					<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">© 2026 Sipher. All rights reserved.</span>
+					<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">
+						Refuse to be dominated. Be free. <Link href="" target="_blank" className="text-primary underline">Create your own network.</Link>
+					</span>
+				</div>
+			</div>
+		</>
+	);
+}

src/app/globals.css

@@ -1,188 +1,211 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
+/* SiPher brand palette — Silent Whisper */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: "Inter", sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
-  --font-serif: "Playfair Display", serif;
-  --radius: 0.5rem;
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  --tracking-normal: var(--tracking-normal);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-md: var(--shadow-md);
-  --shadow: var(--shadow);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-2xs: var(--shadow-2xs);
-  --spacing: var(--spacing);
-  --letter-spacing: var(--letter-spacing);
-  --shadow-offset-y: var(--shadow-offset-y);
-  --shadow-offset-x: var(--shadow-offset-x);
-  --shadow-spread: var(--shadow-spread);
-  --shadow-blur: var(--shadow-blur);
-  --shadow-opacity: var(--shadow-opacity);
-  --color-shadow-color: var(--shadow-color);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
 :root {
-  --background: oklch(0.9848 0 0);
+	/* Brand tokens */
-  --foreground: oklch(0.1445 0 0);
+	--black: #080808;
-  --card: oklch(1.0000 0 0);
+	--surface: #0f0f0f;
-  --card-foreground: oklch(0.1445 0 0);
+	--card: #141414;
-  --popover: oklch(1.0000 0 0);
+	--border: #1f1f1f;
-  --popover-foreground: oklch(0.1445 0 0);
+	--muted: #2a2a2a;
-  --primary: oklch(0.1457 0 0);
+	--dim: #555;
-  --primary-foreground: oklch(0.9848 0 0);
+	--text: #e8e8e8;
-  --secondary: oklch(0.6909 0.1457 163.5382);
+	--subtle: #888;
-  --secondary-foreground: oklch(0.9848 0 0);
+	--acid: #c8f000;
-  --muted: oklch(0.9703 0 0);
+	--static: #ff3c3c;
-  --muted-foreground: oklch(0.5555 0 0);
+	--ghost: #9b9b9b;
-  --accent: oklch(0.8608 0.1340 168.3558);
+	--void: #080808;
-  --accent-foreground: oklch(0.2722 0.0523 166.7898);
+	--signal: #00e5ff;
-  --destructive: oklch(0.6368 0.2078 25.3259);
+
-  --destructive-foreground: oklch(0.9848 0 0);
+	/* Light mode — minimal variant for system preference */
-  --border: oklch(0.9219 0 0);
+	--background: #f5f5f5;
-  --input: oklch(0.9219 0 0);
+	--foreground: #0a0a0a;
-  --ring: oklch(0.6909 0.1457 163.5382);
+	--card: #ffffff;
-  --chart-1: oklch(0.1457 0 0);
+	--card-foreground: #0a0a0a;
-  --chart-2: oklch(0.6909 0.1457 163.5382);
+	--popover: #ffffff;
-  --chart-3: oklch(0.8608 0.1340 168.3558);
+	--popover-foreground: #0a0a0a;
-  --chart-4: oklch(0.6709 0.1163 168.0411);
+	--primary: #8a9a00;
-  --chart-5: oklch(0.3211 0 0);
+	--primary-foreground: #080808;
-  --radius: 0.5rem;
+	--secondary: #e8e8e8;
-  --sidebar: oklch(0.9848 0 0);
+	--secondary-foreground: #0a0a0a;
-  --sidebar-foreground: oklch(0.2697 0 0);
+	--muted: #e5e5e5;
-  --sidebar-primary: oklch(0.1457 0 0);
+	--muted-foreground: #555;
-  --sidebar-primary-foreground: oklch(0.9848 0 0);
+	--accent: #c8f000;
-  --sidebar-accent: oklch(0.8608 0.1340 168.3558);
+	--accent-foreground: #080808;
-  --sidebar-accent-foreground: oklch(0.2722 0.0523 166.7898);
+	--destructive: #ff3c3c;
-  --sidebar-border: oklch(0.9312 0 0);
+	--destructive-foreground: #ffffff;
-  --sidebar-ring: oklch(0.6909 0.1457 163.5382);
+	--border: #e5e5e5;
-  --font-sans: "Inter", sans-serif;
+	--input: #e5e5e5;
-  --font-serif: "Playfair Display", serif;
+	--ring: #8a9a00;
-  --font-mono: "JetBrains Mono", monospace;
+	--chart-1: #8a9a00;
-  --shadow-color: hsl(0, 0%, 0%);
+	--chart-2: #c8f000;
-  --shadow-opacity: 0.1;
+	--chart-3: #00e5ff;
-  --shadow-blur: 8px;
+	--chart-4: #9b9b9b;
-  --shadow-spread: 0px;
+	--chart-5: #555;
-  --shadow-offset-x: 0px;
+	--sidebar: #fafafa;
-  --shadow-offset-y: 2px;
+	--sidebar-foreground: #0a0a0a;
-  --letter-spacing: -0.01em;
+	--sidebar-primary: #8a9a00;
-  --spacing: 0.25rem;
+	--sidebar-primary-foreground: #080808;
-  --shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.05);
+	--sidebar-accent: #e5e5e5;
-  --shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.05);
+	--sidebar-accent-foreground: #0a0a0a;
-  --shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
+	--sidebar-border: #e5e5e5;
-  --shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
+	--sidebar-ring: #8a9a00;
-  --shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
+
-  --shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
+	--font-sans: "DM Sans", sans-serif;
-  --shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
+	--font-mono: "Space Mono", monospace;
-  --shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.25);
+	--font-display: "Bebas Neue", sans-serif;
-  --tracking-normal: -0.01em;
+
+	--radius: 0.2rem;
+	--tracking-normal: -0.01em;
+	--spacing: 0.25rem;
+
+	--shadow-2xs: 0px 2px 4px 0px rgb(0 0 0 / 0.04);
+	--shadow-xs: 0px 2px 4px 0px rgb(0 0 0 / 0.04);
+	--shadow-sm: 0px 2px 8px 0px rgb(0 0 0 / 0.06), 0px 1px 2px -1px rgb(0 0 0 / 0.06);
+	--shadow: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 1px 2px -1px rgb(0 0 0 / 0.08);
+	--shadow-md: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 2px 4px -1px rgb(0 0 0 / 0.08);
+	--shadow-lg: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 4px 6px -1px rgb(0 0 0 / 0.08);
+	--shadow-xl: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 8px 10px -1px rgb(0 0 0 / 0.08);
+	--shadow-2xl: 0px 2px 8px 0px rgb(0 0 0 / 0.15);
 }
 
 .dark {
-  --background: oklch(0.1457 0 0);
+	/* SiPher dark theme — primary brand identity */
-  --foreground: oklch(0.9848 0 0);
+	--background: var(--black);
-  --card: oklch(0.1698 0 0);
+	--foreground: var(--text);
-  --card-foreground: oklch(0.9848 0 0);
+	--card: #141414;
-  --popover: oklch(0.1698 0 0);
+	--card-foreground: var(--text);
-  --popover-foreground: oklch(0.9848 0 0);
+	--popover: var(--surface);
-  --primary: oklch(0.9848 0 0);
+	--popover-foreground: var(--text);
-  --primary-foreground: oklch(0.1457 0 0);
+	--primary: var(--acid);
-  --secondary: oklch(0.6909 0.1457 163.5382);
+	--primary-foreground: var(--void);
-  --secondary-foreground: oklch(0.9848 0 0);
+	--secondary: var(--muted);
-  --muted: oklch(0.2376 0 0);
+	--secondary-foreground: var(--text);
-  --muted-foreground: oklch(0.7153 0 0);
+	--muted: var(--muted);
-  --accent: oklch(0.8608 0.1340 168.3558);
+	--muted-foreground: var(--subtle);
-  --accent-foreground: oklch(0.2722 0.0523 166.7898);
+	--accent: var(--acid);
-  --destructive: oklch(0.3959 0.1331 25.7205);
+	--accent-foreground: var(--void);
-  --destructive-foreground: oklch(0.9848 0 0);
+	--destructive: var(--static);
-  --border: oklch(0.2686 0 0);
+	--destructive-foreground: #ffffff;
-  --input: oklch(0.2686 0 0);
+	--border: var(--border);
-  --ring: oklch(0.6909 0.1457 163.5382);
+	--input: var(--border);
-  --chart-1: oklch(0.9848 0 0);
+	--ring: var(--acid);
-  --chart-2: oklch(0.6909 0.1457 163.5382);
+	--chart-1: var(--acid);
-  --chart-3: oklch(0.8608 0.1340 168.3558);
+	--chart-2: var(--signal);
-  --chart-4: oklch(0.7557 0.1432 166.5106);
+	--chart-3: var(--static);
-  --chart-5: oklch(0.8452 0 0);
+	--chart-4: var(--ghost);
-  --radius: 0.5rem;
+	--chart-5: var(--subtle);
-  --sidebar: oklch(0.1698 0 0);
+	--sidebar: var(--surface);
-  --sidebar-foreground: oklch(0.8845 0 0);
+	--sidebar-foreground: var(--text);
-  --sidebar-primary: oklch(0.6909 0.1457 163.5382);
+	--sidebar-primary: var(--acid);
-  --sidebar-primary-foreground: oklch(0.9848 0 0);
+	--sidebar-primary-foreground: var(--void);
-  --sidebar-accent: oklch(0.2376 0 0);
+	--sidebar-accent: var(--muted);
-  --sidebar-accent-foreground: oklch(0.8608 0.1340 168.3558);
+	--sidebar-accent-foreground: var(--acid);
-  --sidebar-border: oklch(0.2697 0 0);
+	--sidebar-border: var(--border);
-  --sidebar-ring: oklch(0.6909 0.1457 163.5382);
+	--sidebar-ring: var(--acid);
-  --font-sans: "Inter", sans-serif;
+
-  --font-serif: "Playfair Display", serif;
+	--shadow-2xs: 0px 4px 12px 0px rgb(0 0 0 / 0.25);
-  --font-mono: "JetBrains Mono", monospace;
+	--shadow-xs: 0px 4px 12px 0px rgb(0 0 0 / 0.25);
-  --shadow-color: hsl(0, 0%, 0%);
+	--shadow-sm: 0px 4px 12px 0px rgb(0 0 0 / 0.35), 0px 1px 2px -1px rgb(0 0 0 / 0.35);
-  --shadow-opacity: 0.4;
+	--shadow: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
-  --shadow-blur: 12px;
+	--shadow-md: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 2px 4px -1px rgb(0 0 0 / 0.4);
-  --shadow-spread: 0px;
+	--shadow-lg: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.4);
-  --shadow-offset-x: 0px;
+	--shadow-xl: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 8px 10px -1px rgb(0 0 0 / 0.4);
-  --shadow-offset-y: 4px;
+	--shadow-2xl: 0px 4px 12px 0px rgb(0 0 0 / 0.6);
-  --letter-spacing: -0.01em;
+}
-  --spacing: 0.25rem;
+
-  --shadow-2xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.20);
+@theme inline {
-  --shadow-xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.20);
+	--color-background: var(--background);
-  --shadow-sm: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+	--color-foreground: var(--foreground);
-  --shadow: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+	--color-card: var(--card);
-  --shadow-md: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+	--color-card-foreground: var(--card-foreground);
-  --shadow-lg: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
+	--color-popover: var(--popover);
-  --shadow-xl: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
+	--color-popover-foreground: var(--popover-foreground);
-  --shadow-2xl: 0px 4px 12px 0px hsl(0 0% 0% / 1.00);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	/* Brand palette — use as bg-acid, text-signal, etc. */
+	--color-acid: var(--acid);
+	--color-static: var(--static);
+	--color-ghost: var(--ghost);
+	--color-void: var(--void);
+	--color-signal: var(--signal);
+	--color-surface: var(--surface);
+	--color-dim: var(--dim);
+	--color-subtle: var(--subtle);
+
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-display: var(--font-display);
+
+	--radius-sm: calc(var(--radius) - 2px);
+	--radius-md: var(--radius);
+	--radius-lg: calc(var(--radius) + 2px);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+
+	--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+	--tracking-tight: calc(var(--tracking-normal) - 0.025em);
+	--tracking-normal: var(--tracking-normal);
+	--tracking-wide: calc(var(--tracking-normal) + 0.025em);
+	--tracking-wider: calc(var(--tracking-normal) + 0.05em);
+	--tracking-widest: calc(var(--tracking-normal) + 0.1em);
 }
 
 @layer base {
-  body {
+	* {
-    letter-spacing: var(--tracking-normal);
+		@apply border-border outline-ring/50;
-  }
+	}
+
+	body {
+		@apply bg-background text-foreground font-sans antialiased;
+		letter-spacing: var(--tracking-normal);
+	}
+
+	/* Section labels — Space Mono, uppercase, letter-spacing */
+	.section-label {
+		@apply font-mono text-[10px] text-muted-foreground uppercase tracking-[0.2em];
+	}
+
+	/* Display typography — Bebas Neue for headings */
+	.font-display {
+		font-family: var(--font-display), sans-serif;
+		letter-spacing: 0.04em;
+	}
 }

src/app/layout.tsx

@@ -1,36 +1,35 @@
 import type { Metadata } from "next";
-import { Inter, JetBrains_Mono, Playfair_Display } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import { Bebas_Neue, DM_Sans, Space_Mono } from "next/font/google";
+import { Toaster } from "sonner";
 import "./globals.css";
 
-const fontSans = Inter({
+const fontSans = DM_Sans({
 	subsets: ["latin"],
+	weight: ["300", "400", "500"],
 	variable: "--font-sans",
 });
 
-const fontSerif = Playfair_Display({
+const fontMono = Space_Mono({
 	subsets: ["latin"],
-	variable: "--font-serif",
+	weight: ["400", "700"],
+	style: ["normal", "italic"],
+	variable: "--font-mono",
 });
 
-const fontMono = JetBrains_Mono({
+const fontDisplay = Bebas_Neue({
 	subsets: ["latin"],
-	variable: "--font-mono",
+	weight: "400",
+	variable: "--font-display",
 });
 
 export const metadata: Metadata = {
 	title: "Sipher",
 	description: "A federated social media platform for the modern age.",
 	icons: {
-		icon: "/favicon.svg",
+		icon: "/logo/sipher.svg",
-	},
-	manifest: "/manifest.json",
-	themeColor: "#18181b",
-	viewport: {
-		width: "device-width",
-		initialScale: 1,
-		maximumScale: 1,
-		userScalable: false,
 	},
+	manifest: "/manifest.json"
 };
 
 export default function RootLayout({
@@ -39,9 +38,17 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
+		<html suppressHydrationWarning>
-			<body className={`${fontSans.variable} ${fontSerif.variable} ${fontMono.variable} antialiased`}>
+			<body className={`${fontSans.variable} ${fontMono.variable} ${fontDisplay.variable} antialiased`}>
-				{children}
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="dark"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<Toaster />
+					{children}
+				</ThemeProvider>
 			</body>
 		</html>
 	);

src/app/page.tsx

@@ -1,5 +1,16 @@
+"use server";
+
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
+	if (!session) redirect(`/auth`);
 
-export default function Home() {
 	return (
 		<></>
 	);

src/components/login-form.tsx

@@ -0,0 +1,95 @@
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">Welcome back</CardTitle>
+          <CardDescription>
+            Login with your Apple or Google account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <FieldGroup>
+              <Field>
+                <Button variant="outline" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Apple
+                </Button>
+                <Button variant="outline" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  Login with Google
+                </Button>
+              </Field>
+              <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
+                Or continue with
+              </FieldSeparator>
+              <Field>
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </Field>
+              <Field>
+                <div className="flex items-center">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <a
+                    href="#"
+                    className="ml-auto text-sm underline-offset-4 hover:underline"
+                  >
+                    Forgot your password?
+                  </a>
+                </div>
+                <Input id="password" type="password" required />
+              </Field>
+              <Field>
+                <Button type="submit">Login</Button>
+                <FieldDescription className="text-center">
+                  Don&apos;t have an account? <a href="#">Sign up</a>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+      <FieldDescription className="px-6 text-center">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
+        and <a href="#">Privacy Policy</a>.
+      </FieldDescription>
+    </div>
+  )
+}

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/field.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type { Label as LabelPrimitive } from "radix-ui"
+import { Slot } from "radix-ui"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-sm text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/lib/auth-client.ts

@@ -0,0 +1,10 @@
+import { twoFactorClient, usernameClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+	fetchOptions: {},
+	plugins: [
+		usernameClient(),
+		twoFactorClient(),
+	]
+})

src/lib/auth.ts

@@ -1,13 +1,40 @@
 import { drizzleAdapter } from "@better-auth/drizzle-adapter";
 import { betterAuth } from "better-auth";
 import { createAuthMiddleware } from "better-auth/api";
+import { bearer, haveIBeenPwned, testUtils, twoFactor, username } from "better-auth/plugins";
 import db from "./db";
+import * as schema from "./db/schema";
+import EmailService from "./mail";
+
+const isTest = process.env.NODE_ENV === "test";
+const emailService: EmailService | undefined = isTest ? undefined : new EmailService();
 
 export const auth = betterAuth({
+	secret: process.env.BETTER_AUTH_SECRET!,
+	baseURL: process.env.BETTER_AUTH_URL ?? (process.env.NODE_ENV === "test" ? "http://localhost:3000" : undefined),
 	experimental: {
 		joins: true
 	},
-	database: drizzleAdapter(db, { provider: "pg" }),
+	emailAndPassword: {
+		enabled: true,
+	},
+	emailVerification: {
+		sendOnSignUp: true,
+		sendVerificationEmail: async ({ user, url, token }) => {
+			try {
+				if (isTest) return;
+				await emailService!.sendRegisterEmail(user.email, token);
+				console.log("Email sent to", user.email);
+			} catch (error) {
+				console.error("Error sending email", error);
+				throw error;
+			}
+		}
+	},
+	database: drizzleAdapter(db, {
+		provider: "pg",
+		schema
+	}),
 	hooks: {
 		after: createAuthMiddleware(async (context) => {
 			if (!context.path) return;
@@ -21,5 +48,17 @@ export const auth = betterAuth({
 					break;
 			}
 		})
+	},
+	plugins: [
+		username(),
+		twoFactor(),
+		bearer(),
+		haveIBeenPwned(),
+		testUtils() // TODO: Add a conditional plugin for test utils in development
+	],
+	// This is disabled by default, but I'll keep this here for ease of mind.
+	// You never know when companies will change their minds and decide to start tracking you.
+	telemetry: {
+		enabled: false
 	}
 });

src/lib/db/index.ts

@@ -1,11 +1,12 @@
 import 'dotenv/config';
 import { drizzle } from "drizzle-orm/node-postgres";
 import { Pool } from "pg";
+import * as schema from "./schema";
 
 const pool = new Pool({
     connectionString: process.env.DATABASE_URL!,
 });
 
-const db = drizzle({ client: pool });
+const db = drizzle({ client: pool, schema });
 
 export default db;

src/lib/db/schema/index.ts

@@ -12,6 +12,9 @@ export const user = pgTable("user", {
     .defaultNow()
     .$onUpdate(() => /* @__PURE__ */ new Date())
     .notNull(),
+  username: text("username").unique(),
+  displayUsername: text("display_username"),
+  twoFactorEnabled: boolean("two_factor_enabled").default(false),
 });
 
 export const session = pgTable(
@@ -73,9 +76,26 @@ export const verification = pgTable(
   (table) => [index("verification_identifier_idx").on(table.identifier)],
 );
 
+export const twoFactor = pgTable(
+  "two_factor",
+  {
+    id: text("id").primaryKey(),
+    secret: text("secret").notNull(),
+    backupCodes: text("backup_codes").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+  },
+  (table) => [
+    index("twoFactor_secret_idx").on(table.secret),
+    index("twoFactor_userId_idx").on(table.userId),
+  ],
+);
+
 export const userRelations = relations(user, ({ many }) => ({
   sessions: many(session),
   accounts: many(account),
+  twoFactors: many(twoFactor),
 }));
 
 export const sessionRelations = relations(session, ({ one }) => ({
@@ -91,3 +111,10 @@ export const accountRelations = relations(account, ({ one }) => ({
     references: [user.id],
   }),
 }));
+
+export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
+  user: one(user, {
+    fields: [twoFactor.userId],
+    references: [user.id],
+  }),
+}));

src/lib/db/schema/user/index.ts

@@ -0,0 +1,120 @@
+import { relations } from "drizzle-orm";
+import { boolean, index, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const user = pgTable("user", {
+	id: text("id").primaryKey(),
+	name: text("name").notNull(),
+	email: text("email").notNull().unique(),
+	emailVerified: boolean("email_verified").default(false).notNull(),
+	image: text("image"),
+	createdAt: timestamp("created_at").defaultNow().notNull(),
+	updatedAt: timestamp("updated_at")
+		.defaultNow()
+		.$onUpdate(() => /* @__PURE__ */ new Date())
+		.notNull(),
+	username: text("username").unique(),
+	displayUsername: text("display_username"),
+	twoFactorEnabled: boolean("two_factor_enabled").default(false),
+});
+
+export const session = pgTable(
+	"session",
+	{
+		id: text("id").primaryKey(),
+		expiresAt: timestamp("expires_at").notNull(),
+		token: text("token").notNull().unique(),
+		createdAt: timestamp("created_at").defaultNow().notNull(),
+		updatedAt: timestamp("updated_at")
+			.$onUpdate(() => /* @__PURE__ */ new Date())
+			.notNull(),
+		ipAddress: text("ip_address"),
+		userAgent: text("user_agent"),
+		userId: text("user_id")
+			.notNull()
+			.references(() => user.id, { onDelete: "cascade" }),
+	},
+	(table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = pgTable(
+	"account",
+	{
+		id: text("id").primaryKey(),
+		accountId: text("account_id").notNull(),
+		providerId: text("provider_id").notNull(),
+		userId: text("user_id")
+			.notNull()
+			.references(() => user.id, { onDelete: "cascade" }),
+		accessToken: text("access_token"),
+		refreshToken: text("refresh_token"),
+		idToken: text("id_token"),
+		accessTokenExpiresAt: timestamp("access_token_expires_at"),
+		refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+		scope: text("scope"),
+		password: text("password"),
+		createdAt: timestamp("created_at").defaultNow().notNull(),
+		updatedAt: timestamp("updated_at")
+			.$onUpdate(() => /* @__PURE__ */ new Date())
+			.notNull(),
+	},
+	(table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = pgTable(
+	"verification",
+	{
+		id: text("id").primaryKey(),
+		identifier: text("identifier").notNull(),
+		value: text("value").notNull(),
+		expiresAt: timestamp("expires_at").notNull(),
+		createdAt: timestamp("created_at").defaultNow().notNull(),
+		updatedAt: timestamp("updated_at")
+			.defaultNow()
+			.$onUpdate(() => /* @__PURE__ */ new Date())
+			.notNull(),
+	},
+	(table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const twoFactor = pgTable(
+	"two_factor",
+	{
+		id: text("id").primaryKey(),
+		secret: text("secret").notNull(),
+		backupCodes: text("backup_codes").notNull(),
+		userId: text("user_id")
+			.notNull()
+			.references(() => user.id, { onDelete: "cascade" }),
+	},
+	(table) => [
+		index("twoFactor_secret_idx").on(table.secret),
+		index("twoFactor_userId_idx").on(table.userId),
+	],
+);
+
+export const userRelations = relations(user, ({ many }) => ({
+	sessions: many(session),
+	accounts: many(account),
+	twoFactors: many(twoFactor),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+	user: one(user, {
+		fields: [session.userId],
+		references: [user.id],
+	}),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+	user: one(user, {
+		fields: [account.userId],
+		references: [user.id],
+	}),
+}));
+
+export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
+	user: one(user, {
+		fields: [twoFactor.userId],
+		references: [user.id],
+	}),
+}));

src/lib/mail/email-tailwind.config.ts

@@ -0,0 +1,46 @@
+import { pixelBasedPreset } from "@react-email/tailwind";
+import type { TailwindConfig } from "@react-email/tailwind";
+
+/**
+ * React Email Tailwind config matching globals.css design tokens.
+ * Uses literal hex values since email clients don't support CSS variables.
+ */
+export const emailTailwindConfig: TailwindConfig = {
+	presets: [pixelBasedPreset],
+	theme: {
+		extend: {
+			colors: {
+				background: "#fafafa",
+				foreground: "#0a0a0a",
+				card: "#ffffff",
+				"card-foreground": "#0a0a0a",
+				popover: "#ffffff",
+				"popover-foreground": "#0a0a0a",
+				primary: "#0a0a0a",
+				"primary-foreground": "#fafafa",
+				secondary: "#0d9b6b",
+				"secondary-foreground": "#fafafa",
+				muted: "#f5f5f5",
+				"muted-foreground": "#737373",
+				accent: "#5ee7c4",
+				"accent-foreground": "#032d22",
+				destructive: "#e85a5a",
+				"destructive-foreground": "#fafafa",
+				border: "#e5e5e5",
+				input: "#e5e5e5",
+				ring: "#0d9b6b",
+			},
+			fontFamily: {
+				sans: ["Inter", "sans-serif"],
+				serif: ["Playfair Display", "serif"],
+				mono: ["JetBrains Mono", "monospace"],
+			},
+			borderRadius: {
+				sm: "2px",
+				md: "3px",
+				lg: "5px",
+				xl: "9px",
+			},
+		},
+	},
+};

src/lib/mail/index.ts

@@ -0,0 +1,86 @@
+import { render } from "@react-email/render";
+import { createTransport, SendMailOptions } from "nodemailer";
+import React from "react";
+import { z } from "zod";
+import RegisterEmail from "./templates/register";
+
+export default class EmailService {
+	private readonly config: {
+		host: string;
+		port: number;
+		secure: boolean;
+		auth: {
+			user: string;
+			pass: string;
+		};
+	} | null = null;
+
+	private readonly transporter: ReturnType<typeof createTransport> | null = null;
+
+	constructor() {
+		const configSchema = z.object({
+			host: z.string("EMAIL_HOST is required").min(1, "EMAIL_HOST cannot be empty"),
+			port: z.string("EMAIL_PORT is required")
+				.min(1, "EMAIL_PORT cannot be empty")
+				.transform((val, ctx) => {
+					const n = parseInt(val, 10);
+					if (Number.isNaN(n) || n < 1 || n > 65535) {
+						ctx.addIssue({ code: "custom", message: "EMAIL_PORT must be a valid port number (1-65535)" });
+						return z.NEVER;
+					}
+					return n;
+				}),
+			secure: z.union([
+				z.string().transform(val => val === "true" || val === "1"),
+				z.boolean()
+			], { error: "EMAIL_SECURE must be a boolean or string 'true'/'false'" }),
+			auth: z.object({
+				user: z.string("EMAIL_USER is required").min(1, "EMAIL_USER cannot be empty"),
+				pass: z.string("EMAIL_PASSWORD is required").min(1, "EMAIL_PASSWORD cannot be empty"),
+			}, { error: "Email auth credentials (EMAIL_USER, EMAIL_PASSWORD) are required" }),
+		})
+
+		const fromEnv = {
+			host: process.env.EMAIL_HOST,
+			port: process.env.EMAIL_PORT,
+			secure: Boolean(process.env.EMAIL_SECURE ?? false),
+			auth: {
+				user: process.env.EMAIL_USER,
+				pass: process.env.EMAIL_PASSWORD,
+			},
+		}
+
+
+		const validatedConfig = configSchema.safeParse(fromEnv);
+		if (!validatedConfig.success) {
+			const details = validatedConfig.error.issues
+				.map((issue) =>
+					`  • ${issue.path.length ? String(issue.path.join(".")) : "config"}: ${issue.message}`
+				)
+				.join("\n");
+			throw new Error(`Invalid email configuration:\n${details}`);
+		}
+
+		this.config = validatedConfig.data;
+		this.transporter = createTransport(this.config);
+	}
+
+	private async sendEmail(to: string, subject: string, content: string, options?: { html?: boolean }) {
+		if (!this.transporter || !this.config) { throw new Error("Email transporter not initialized"); }
+		console.log("Sending email to", to, "with subject", subject);
+		const mailOptions: SendMailOptions = {
+			from: `${this.config.auth.user} <${this.config.auth.user}>`,
+			to,
+			subject,
+			...(options?.html ? { html: content } : { text: content }),
+		};
+
+		const result = await this.transporter.sendMail(mailOptions);
+		return result.messageId;
+	}
+
+	public async sendRegisterEmail(to: string, verificationCode: string) {
+		const template = await render(React.createElement(RegisterEmail, { verificationCode }));
+		return this.sendEmail(to, "Verify your email", template, { html: true });
+	}
+}

src/lib/mail/templates/register.tsx

@@ -0,0 +1,115 @@
+import {
+	Body,
+	Container,
+	Font,
+	Head,
+	Heading,
+	Hr,
+	Html,
+	Img,
+	Link,
+	Preview,
+	Section,
+	Tailwind,
+	Text,
+} from '@react-email/components';
+import { emailTailwindConfig } from '../email-tailwind.config';
+
+interface RegisterEmailProps {
+	verificationCode?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+	? `https://${process.env.VERCEL_URL}`
+	: '';
+
+export default function RegisterEmail({
+	verificationCode,
+}: RegisterEmailProps) {
+	return (
+		<Html>
+			<Head />
+			<Tailwind config={emailTailwindConfig}>
+				<Font
+					fontFamily="Inter"
+					fallbackFontFamily="sans-serif"
+					webFont={{
+						url: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+						format: "woff2",
+					}}
+				/>
+				<Body className="bg-white font-aws text-[#212121]">
+					<Preview>Sipher Email Verification</Preview>
+					<Container className="p-5 mx-auto bg-[#eee]">
+						<Section className="bg-white">
+							<Section className="bg-[#252f3d] flex py-5 items-center justify-center">
+								<Img
+									src={`${baseUrl}/static/sipher-logo.png`}
+									width="75"
+									height="45"
+									alt="Sipher's Logo"
+								/>
+							</Section>
+							<Section className="py-[25px] px-[35px]">
+								<Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
+									Verify your email address
+								</Heading>
+								<Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
+									Hope this message finds you well.
+									<br /> Please enter the following verification code when prompted. If you don&apos;t want to
+									create an account, you can ignore this message and the account will be deleted after 10 minutes.
+								</Text>
+								<Section className="flex items-center justify-center">
+									<Text className="text-[#333] m-0 font-bold text-center text-[14px]">
+										Verification code
+									</Text>
+
+									<Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
+										{verificationCode}
+									</Text>
+									<Text className="text-[#333] text-[14px] m-0 text-center">
+										(This code is valid for 10 minutes and can be used only once)
+									</Text>
+								</Section>
+							</Section>
+							<Hr />
+							<Section className="py-[25px] px-[35px]">
+								<Text className="text-[#333] text-[14px] m-0">
+									Sipher will never email you and ask you for your personal information.
+									We also will never send you any promotion emails or spam emails.
+									<br />
+									If you receive any email asking for your personal information or any other data, please ignore it and report it to us immediately at <Link href="mailto:support@sipher.com" target="_blank" className="text-[#2754C5] underline text-[14px]">support@sipher.com</Link>.
+									<br />
+								</Text>
+							</Section>
+						</Section>
+						<Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
+							This message was produced and distributed by Sipher,
+							Sipher is a federated social media platform. View our{' '}
+							<Link
+								href="https://sipher.com/privacy"
+								target="_blank"
+								className="text-[#2754C5] underline text-[14px]"
+							>
+								Terms of Service
+							</Link>
+							{' '}and our{' '}
+							<Link
+								href="https://sipher.com/privacy"
+								target="_blank"
+								className="text-[#2754C5] underline text-[14px]"
+							>
+								Privacy Policy
+							</Link>
+							.
+						</Text>
+					</Container>
+				</Body>
+			</Tailwind>
+		</Html>
+	);
+}
+
+RegisterEmail.PreviewProps = {
+	verificationCode: '596853',
+} satisfies RegisterEmailProps;

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/server.ts

@@ -0,0 +1,20 @@
+import { config } from 'dotenv'
+import { createServer } from 'http'
+import next from 'next'
+
+config({ path: '.env.local' })
+const port = parseInt(process.env.PORT || '3000', 10)
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+	createServer((req, res) => {
+		handle(req, res)
+	}).listen(port)
+
+	console.log(
+		`> Server listening at http://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV
+		}`
+	)
+})

tests/auth.test.ts

@@ -0,0 +1,45 @@
+import { auth } from "@/lib/auth"
+import { expect, test } from "@playwright/test"
+
+// NOTICE: Does not work, will fix it later
+
+test("create and login user", async ({ context, page }) => {
+	const ctx = await auth.$context
+	const testUtils = ctx.test
+
+	// Go to home page
+	await page.goto("/")
+	// Check if we are redirected to the auth page
+	await expect(page).toHaveURL("/auth")
+
+	// Create and save user
+	const user = testUtils.createUser({
+		email: "e2e@example.com",
+		name: "E2E User"
+	})
+	await testUtils.saveUser(user)
+
+	// Get cookies and inject into browser
+	const cookies = await testUtils.getCookies({
+		userId: user.id,
+		domain: "localhost"
+	})
+	await context.addCookies(cookies)
+
+	// Login
+	await testUtils.login({ userId: user.id })
+	// Check if we got redirected to the home page
+	await expect(page).toHaveURL("/")
+
+	// Check if we are logged in
+	const headers = await testUtils.getAuthHeaders({ userId: user.id })
+	expect(headers).toBeDefined()
+	expect(headers.get("Authorization")).toBeDefined()
+
+	// Delete user
+	await testUtils.deleteUser(user.id)
+
+	// Check if user is deleted
+	const deletedUser = await ctx.internalAdapter.findUserById(user.id)
+	expect(deletedUser).toBeNull()
+})

tsconfig.json

@@ -1,34 +1,45 @@
 {
-  "compilerOptions": {
+	"compilerOptions": {
-    "target": "ES2017",
+		"target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+		"lib": [
-    "allowJs": true,
+			"dom",
-    "skipLibCheck": true,
+			"dom.iterable",
-    "strict": true,
+			"esnext"
-    "noEmit": true,
+		],
-    "esModuleInterop": true,
+		"allowJs": true,
-    "module": "esnext",
+		"skipLibCheck": true,
-    "moduleResolution": "bundler",
+		"strict": true,
-    "resolveJsonModule": true,
+		"noEmit": true,
-    "isolatedModules": true,
+		"esModuleInterop": true,
-    "jsx": "react-jsx",
+		"module": "esnext",
-    "incremental": true,
+		"moduleResolution": "bundler",
-    "plugins": [
+		"resolveJsonModule": true,
-      {
+		"isolatedModules": true,
-        "name": "next"
+		"jsx": "react-jsx",
-      }
+		"incremental": true,
-    ],
+		"plugins": [
-    "paths": {
+			{
-      "@/*": ["./src/*"]
+				"name": "next"
-    }
+			}
-  },
+		],
-  "include": [
+		"paths": {
-    "next-env.d.ts",
+			"@/*": [
-    "**/*.ts",
+				"./src/*"
-    "**/*.tsx",
+			],
-    ".next/types/**/*.ts",
+			"@app": [
-    ".next/dev/types/**/*.ts",
+				"./src/app"
-    "**/*.mts"
+			]
-  ],
+		}
-  "exclude": ["node_modules"]
+	},
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		".next/dev/types/**/*.ts",
+		"**/*.mts"
+	],
+	"exclude": [
+		"node_modules"
+	]
 }