feat: add auth pages (login, signup, password reset, onboarding)

- Create stub auth API (lib/auth.ts) with simulated delay
- Add PasswordInput component with visibility toggle
- Add SocialAuthButtons component (Google/Apple placeholders)
- Add AuthLayout with split-panel layout and rotating testimonial
- Implement login page with email/password validation and remember me
- Implement signup page with password strength indicator and ToS checkbox
- Implement forgot-password page with email submission and success state
- Implement reset-password page with token validation from query params
- Implement 4-step onboarding flow (plan selection, watchlist, invites, success)
- Add ToastProvider to root app
- Write 28 tests for all auth components and form validation

web/src/app.tsx

@@ -4,11 +4,13 @@ import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import { ThemeProvider } from "./lib/theme";
 import { AppShell } from "./components/layout";
+import { ToastProvider } from "./components/ui";
 import "./app.css";
 
 export default function App() {
   return (
     <ThemeProvider>
+    <ToastProvider>
     <Router
       root={(props) => (
         <AppShell>
@@ -18,6 +20,7 @@ export default function App() {
     >
       <FileRoutes />
     </Router>
+    </ToastProvider>
     </ThemeProvider>
   );
 }

web/src/components/auth/AuthLayout.tsx

@@ -0,0 +1,86 @@
+import { createSignal, onMount, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
+import { PageContainer } from "~/components/layout";
+
+interface Testimonial {
+  quote: string;
+  author: string;
+  role: string;
+}
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "ShieldAI caught a credential leak before it became a disaster. Essential tool for anyone concerned about their digital identity.",
+    author: "Sarah Chen",
+    role: "Security Engineer",
+  },
+  {
+    quote:
+      "I sleep better knowing ShieldAI is monitoring my personal information 24/7.",
+    author: "Marcus Johnson",
+    role: "Freelance Developer",
+  },
+  {
+    quote:
+      "The family protection plan means I can protect not just myself but my whole family.",
+    author: "Emily Rodriguez",
+    role: "Mother of three",
+  },
+];
+
+interface AuthLayoutProps {
+  children: JSX.Element;
+}
+
+export default function AuthLayout(props: AuthLayoutProps) {
+  const [index, setIndex] = createSignal(0);
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % testimonials.length);
+    }, 6000);
+    onCleanup(() => clearInterval(interval));
+  });
+
+  const t = () => testimonials[index()];
+
+  return (
+    <div class="min-h-screen flex items-center justify-center py-8 md:py-12">
+      <PageContainer>
+        <div class="flex flex-col md:flex-row items-stretch gap-0 md:gap-8 lg:gap-12 max-w-5xl mx-auto">
+          <div class="hidden md:flex flex-col justify-center gap-6 flex-1 p-8 lg:p-12">
+            <div>
+              <h1 class="text-3xl lg:text-4xl font-bold text-gradient-primary">
+                ShieldAI
+              </h1>
+              <p class="text-lg text-[var(--color-text-secondary)] mt-2">
+                AI-Powered Identity Protection
+              </p>
+            </div>
+            <div class="flex-1 flex flex-col justify-center">
+              <blockquote class="border-l-4 border-[var(--color-brand-primary)] pl-4">
+                <p class="text-base text-[var(--color-text-secondary)] italic leading-relaxed">
+                  "{t().quote}"
+                </p>
+                <footer class="mt-3">
+                  <p class="text-sm font-medium text-[var(--color-text-primary)]">
+                    — {t().author}
+                  </p>
+                  <p class="text-xs text-[var(--color-text-tertiary)]">
+                    {t().role}
+                  </p>
+                </footer>
+              </blockquote>
+            </div>
+          </div>
+          <div class="flex-1 flex items-center justify-center p-4 md:p-0">
+            <div class="w-full max-w-md gradient-card border border-[var(--color-border)]/50 rounded-xl p-6 md:p-8">
+              {props.children}
+            </div>
+          </div>
+        </div>
+      </PageContainer>
+    </div>
+  );
+}

web/src/components/auth/PasswordInput.tsx

@@ -0,0 +1,91 @@
+import { createSignal, Show } from "solid-js";
+import { cn } from "~/lib/utils";
+import type { JSX } from "solid-js";
+
+interface PasswordInputProps {
+  label?: string;
+  value?: string;
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
+  error?: string;
+  helperText?: string;
+  placeholder?: string;
+  class?: string;
+  id?: string;
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+export default function PasswordInput(props: PasswordInputProps) {
+  const [visible, setVisible] = createSignal(false);
+  const id = () =>
+    props.id ??
+    props.name ??
+    globalThis.crypto?.randomUUID?.() ??
+    Math.random().toString(36).slice(2, 10);
+
+  return (
+    <div class={cn("flex flex-col gap-1", props.class)}>
+      {props.label && (
+        <label
+          for={id()}
+          class="text-sm font-medium text-[var(--color-text-primary)]"
+        >
+          {props.label}
+          {props.required && (
+            <span class="text-[var(--color-error)] ml-1">*</span>
+          )}
+        </label>
+      )}
+      <div class="relative">
+        <input
+          id={id()}
+          type={visible() ? "text" : "password"}
+          value={props.value ?? ""}
+          onInput={props.onInput}
+          placeholder={props.placeholder}
+          name={props.name}
+          disabled={props.disabled}
+          class={cn(
+            "w-full bg-transparent border rounded-lg px-4 py-2 pr-10 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] transition-all duration-200",
+            props.error
+              ? "border-[var(--color-error)] focus:ring-[var(--color-error)]"
+              : "border-[var(--color-border)] focus:ring-[var(--color-focus-ring)]",
+            "focus:outline-none focus:ring-2",
+            props.disabled && "opacity-50 cursor-not-allowed",
+          )}
+        />
+        <button
+          type="button"
+          onClick={() => setVisible(!visible())}
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer"
+          aria-label={visible() ? "Hide password" : "Show password"}
+          tabindex={-1}
+        >
+          <Show
+            when={visible()}
+            fallback={
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            }
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          </Show>
+        </button>
+      </div>
+      {props.error && (
+        <p class="text-sm text-[var(--color-error)]">{props.error}</p>
+      )}
+      {props.helperText && !props.error && (
+        <p class="text-sm text-[var(--color-text-tertiary)]">
+          {props.helperText}
+        </p>
+      )}
+    </div>
+  );
+}

web/src/components/auth/SocialAuthButtons.tsx

@@ -0,0 +1,29 @@
+export default function SocialAuthButtons() {
+  return (
+    <div class="flex flex-col gap-3">
+      <button
+        type="button"
+        onClick={() => {}}
+        class="flex items-center justify-center gap-3 w-full px-4 py-2.5 border border-[var(--color-border)] rounded-lg text-sm font-medium text-[var(--color-text-primary)] bg-white hover:bg-[var(--color-bg-secondary)] transition-colors cursor-pointer"
+      >
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+        Continue with Google
+      </button>
+      <button
+        type="button"
+        onClick={() => {}}
+        class="flex items-center justify-center gap-3 w-full px-4 py-2.5 border border-[var(--color-border)] rounded-lg text-sm font-medium text-white bg-black hover:bg-gray-900 transition-colors cursor-pointer"
+      >
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.6 5.98.52 7.13-.62 1.28-1.4 2.55-2.57 3.08Zm-3.12-15.2c.03-1.14.44-2.23 1.07-3.03.82-.98 2.11-1.63 3.32-1.59.06 1.24-.4 2.45-1.12 3.3-.77.9-1.98 1.52-3.27 1.32Z" />
+        </svg>
+        Continue with Apple
+      </button>
+    </div>
+  );
+}

web/src/components/auth/auth.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render } from "solid-js/web";
+import type { JSX } from "solid-js";
+
+import PasswordInput from "./PasswordInput";
+import SocialAuthButtons from "./SocialAuthButtons";
+import AuthLayout from "./AuthLayout";
+import { Input, Button } from "~/components/ui";
+
+function mount(comp: () => JSX.Element): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  render(() => comp(), container);
+  return container;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+  if (!globalThis.crypto) {
+    Object.defineProperty(globalThis, "crypto", { value: {} });
+  }
+  (globalThis.crypto as unknown as Record<string, unknown>).randomUUID = vi.fn(
+    () => "test-uuid-1234",
+  );
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("PasswordInput", () => {
+  it("renders with label", () => {
+    mount(() => <PasswordInput label="Password" />);
+    expect(document.body.textContent).toContain("Password");
+    expect(document.querySelector("label")).toBeTruthy();
+  });
+
+  it("renders password type by default", () => {
+    mount(() => <PasswordInput label="Password" />);
+    const input = document.querySelector("input")!;
+    expect(input.getAttribute("type")).toBe("password");
+  });
+
+  it("toggles visibility when eye icon is clicked", () => {
+    mount(() => <PasswordInput label="Password" />);
+    const input = document.querySelector("input")!;
+    const toggle = document.querySelector("button[aria-label]")!;
+
+    expect(input.getAttribute("type")).toBe("password");
+    expect(toggle.getAttribute("aria-label")).toBe("Show password");
+
+    toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(input.getAttribute("type")).toBe("text");
+    expect(toggle.getAttribute("aria-label")).toBe("Hide password");
+
+    toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(input.getAttribute("type")).toBe("password");
+  });
+
+  it("shows error message", () => {
+    mount(() => (
+      <PasswordInput label="Password" error="Password is required" />
+    ));
+    expect(document.body.textContent).toContain("Password is required");
+  });
+
+  it("shows helper text when no error", () => {
+    mount(() => (
+      <PasswordInput label="Password" helperText="At least 8 characters" />
+    ));
+    expect(document.body.textContent).toContain("At least 8 characters");
+  });
+
+  it("hides helper text when error is present", () => {
+    mount(() => (
+      <PasswordInput
+        label="Password"
+        error="Required"
+        helperText="Helper text"
+      />
+    ));
+    expect(document.body.textContent).toContain("Required");
+    expect(document.body.textContent).not.toContain("Helper text");
+  });
+
+  it("forwards onInput handler", () => {
+    const onInput = vi.fn();
+    mount(() => <PasswordInput onInput={onInput} />);
+    const input = document.querySelector("input")!;
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    expect(onInput).toHaveBeenCalled();
+  });
+});
+
+describe("SocialAuthButtons", () => {
+  it("renders Google and Apple buttons", () => {
+    mount(() => <SocialAuthButtons />);
+    const buttons = document.querySelectorAll("button");
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toContain("Google");
+    expect(buttons[1].textContent).toContain("Apple");
+  });
+
+  it("renders SVG icons in each button", () => {
+    mount(() => <SocialAuthButtons />);
+    const buttons = document.querySelectorAll("button");
+    expect(buttons[0].querySelector("svg")).toBeTruthy();
+    expect(buttons[1].querySelector("svg")).toBeTruthy();
+  });
+});
+
+describe("AuthLayout", () => {
+  it("renders children inside the form card", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Form content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("Form content");
+  });
+
+  it("renders ShieldAI branding", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("ShieldAI");
+  });
+
+  it("renders gradient-card wrapper", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.querySelector(".gradient-card")).toBeTruthy();
+  });
+
+  it("renders testimonial text", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("ShieldAI");
+    expect(document.body.textContent).toContain("AI-Powered Identity Protection");
+  });
+});

web/src/components/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as AuthLayout } from "./AuthLayout";
+export { default as PasswordInput } from "./PasswordInput";
+export { default as SocialAuthButtons } from "./SocialAuthButtons";

web/src/lib/auth.ts

@@ -0,0 +1,59 @@
+export interface AuthUser {
+  name: string;
+  email: string;
+}
+
+export interface AuthResponse {
+  user: AuthUser;
+  token: string;
+}
+
+export interface OnboardingData {
+  plan: string;
+  watchlistItems: string[];
+  familyInvites: string[];
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function login(
+  email: string,
+  password: string,
+  _rememberMe: boolean,
+): Promise<AuthResponse> {
+  await delay(800);
+  if (!email || !password) throw new Error("Invalid credentials");
+  return { user: { name: "Test User", email }, token: "stub-token" };
+}
+
+export async function signup(
+  name: string,
+  email: string,
+  password: string,
+): Promise<AuthResponse> {
+  await delay(800);
+  if (!name || !email || !password)
+    throw new Error("All fields are required");
+  return { user: { name, email }, token: "stub-token" };
+}
+
+export async function forgotPassword(email: string): Promise<void> {
+  await delay(800);
+  if (!email) throw new Error("Email is required");
+}
+
+export async function resetPassword(
+  token: string,
+  password: string,
+): Promise<void> {
+  await delay(800);
+  if (!token || !password) throw new Error("Invalid request");
+}
+
+export async function submitOnboarding(
+  _data: OnboardingData,
+): Promise<void> {
+  await delay(800);
+}

web/src/routes/(auth)/auth-pages.test.tsx

@@ -0,0 +1,255 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render } from "solid-js/web";
+import { Router, Route } from "@solidjs/router";
+import { MetaProvider } from "@solidjs/meta";
+import type { JSX } from "solid-js";
+
+import LoginPage from "./login";
+import SignupPage from "./signup";
+import ForgotPasswordPage from "./forgot-password";
+import OnboardingPage from "./onboarding";
+
+import * as auth from "~/lib/auth";
+
+function mount(comp: () => JSX.Element): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  render(() => comp(), container);
+  return container;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+  if (!globalThis.crypto) {
+    Object.defineProperty(globalThis, "crypto", { value: {} });
+  }
+  (globalThis.crypto as unknown as Record<string, unknown>).randomUUID = vi.fn(
+    () => "test-uuid-1234",
+  );
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.restoreAllMocks();
+});
+
+function setInputValue(input: HTMLInputElement, value: string) {
+  input.value = value;
+  input.dispatchEvent(
+    new InputEvent("input", { bubbles: true, composed: true }),
+  );
+}
+
+describe("LoginPage", () => {
+  function WrappedLogin() {
+    return (
+      <MetaProvider>
+        <Router>
+          <Route path="/" component={LoginPage} />
+        </Router>
+      </MetaProvider>
+    );
+  }
+
+  it("renders sign in form with email, password, and submit button", () => {
+    mount(() => <WrappedLogin />);
+    expect(document.body.textContent).toContain("Welcome back");
+    expect(document.body.textContent).toContain("Email");
+    expect(document.querySelector("input[type='email']")).toBeTruthy();
+    expect(document.body.textContent).toContain("Sign In");
+  });
+
+  it("renders Remember me and Forgot password links", () => {
+    mount(() => <WrappedLogin />);
+    expect(document.body.textContent).toContain("Remember me");
+    expect(document.body.textContent).toContain("Forgot password?");
+    expect(document.body.textContent).toContain("Sign up");
+    expect(document.body.textContent).toContain("Or continue with");
+  });
+
+  it("shows validation errors for empty fields on submit", () => {
+    mount(() => <WrappedLogin />);
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("Email is required");
+    expect(document.body.textContent).toContain("Password is required");
+  });
+
+  it("shows email format error for invalid email", () => {
+    mount(() => <WrappedLogin />);
+    const emailInput =
+      document.querySelector<HTMLInputElement>("input[type='email']")!;
+    setInputValue(emailInput, "not-an-email");
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("Invalid email format");
+  });
+
+  it("shows server error on failed login", async () => {
+    vi.spyOn(auth, "login").mockRejectedValue(new Error("Invalid credentials"));
+    mount(() => <WrappedLogin />);
+    const emailInput =
+      document.querySelector<HTMLInputElement>("input[type='email']")!;
+    setInputValue(emailInput, "test@example.com");
+    const passwordInput =
+      document.querySelector<HTMLInputElement>(
+        "input[type='password']",
+      )!;
+    setInputValue(passwordInput, "password123");
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    await vi.waitFor(() => {
+      expect(document.body.textContent).toContain("Invalid email or password");
+    });
+  });
+});
+
+describe("SignupPage", () => {
+  function WrappedSignup() {
+    return (
+      <MetaProvider>
+        <Router>
+          <Route path="/" component={SignupPage} />
+        </Router>
+      </MetaProvider>
+    );
+  }
+
+  it("renders sign up form with all fields", () => {
+    mount(() => <WrappedSignup />);
+    expect(document.body.textContent).toContain("Create your account");
+    expect(document.body.textContent).toContain("Full name");
+    expect(document.body.textContent).toContain("Email");
+    expect(document.body.textContent).toContain("Password");
+    expect(document.body.textContent).toContain("Confirm password");
+    expect(document.body.textContent).toContain("Terms of Service");
+    expect(document.body.textContent).toContain("Create Account");
+  });
+
+  it("shows validation errors for empty fields on submit", () => {
+    mount(() => <WrappedSignup />);
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("Name is required");
+    expect(document.body.textContent).toContain("Email is required");
+    expect(document.body.textContent).toContain("Password is required");
+  });
+
+  it("shows password mismatch error", () => {
+    mount(() => <WrappedSignup />);
+    const inputs = document.querySelectorAll<HTMLInputElement>("input");
+    const passwordInput = inputs[2];
+    const confirmInput = inputs[3];
+    setInputValue(passwordInput, "password123");
+    setInputValue(confirmInput, "different");
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("Passwords do not match");
+  });
+
+  it("shows ToS error when checkbox is unchecked", () => {
+    mount(() => <WrappedSignup />);
+    const nameInput =
+      document.querySelector<HTMLInputElement>("input[name='name']")!;
+    const emailInput =
+      document.querySelector<HTMLInputElement>("input[name='email']")!;
+    setInputValue(nameInput, "Test User");
+    setInputValue(emailInput, "test@example.com");
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("You must agree to the Terms");
+  });
+
+  it("renders Log in link and social buttons", () => {
+    mount(() => <WrappedSignup />);
+    expect(document.body.textContent).toContain("Log in");
+    expect(document.body.textContent).toContain("Or continue with");
+  });
+});
+
+describe("ForgotPasswordPage", () => {
+  function WrappedForgot() {
+    return (
+      <MetaProvider>
+        <Router>
+          <Route path="/" component={ForgotPasswordPage} />
+        </Router>
+      </MetaProvider>
+    );
+  }
+
+  it("renders forgot password form", () => {
+    mount(() => <WrappedForgot />);
+    expect(document.body.textContent).toContain("Forgot password?");
+    expect(document.body.textContent).toContain("Send Reset Link");
+    expect(document.body.textContent).toContain("Back to sign in");
+  });
+
+  it("shows validation error for empty email", () => {
+    mount(() => <WrappedForgot />);
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    expect(document.body.textContent).toContain("Email is required");
+  });
+
+  it("shows success state after submission", async () => {
+    vi.spyOn(auth, "forgotPassword").mockResolvedValue(undefined);
+    mount(() => <WrappedForgot />);
+    const emailInput =
+      document.querySelector<HTMLInputElement>("input[type='email']")!;
+    setInputValue(emailInput, "test@example.com");
+    const form = document.querySelector("form")!;
+    form.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+    await vi.waitFor(() => {
+      expect(document.body.textContent).toContain("Check your email");
+    });
+  });
+});
+
+describe("OnboardingPage", () => {
+  function WrappedOnboarding() {
+    return (
+      <MetaProvider>
+        <Router>
+          <Route path="/" component={OnboardingPage} />
+        </Router>
+      </MetaProvider>
+    );
+  }
+
+  it("renders step 1 (Choose Plan) by default with plan cards", () => {
+    mount(() => <WrappedOnboarding />);
+    expect(document.body.textContent).toContain("Choose your plan");
+    expect(document.body.textContent).toContain("Basic");
+    expect(document.body.textContent).toContain("Plus");
+    expect(document.body.textContent).toContain("Premium");
+    expect(document.body.textContent).toContain("Popular");
+  });
+
+  it("advances to step 2 when Continue is clicked", () => {
+    mount(() => <WrappedOnboarding />);
+    const continueBtn = [...document.querySelectorAll("button")].find((b) =>
+      b.textContent?.includes("Continue"),
+    )!;
+    continueBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(document.body.textContent).toContain(
+      "Add your first watchlist item",
+    );
+  });
+});

web/src/routes/(auth)/forgot-password.tsx

@@ -0,0 +1,127 @@
+import { createSignal, Show } from "solid-js";
+import { Title } from "@solidjs/meta";
+import { AuthLayout } from "~/components/auth";
+import { Input } from "~/components/ui";
+import { Button } from "~/components/ui";
+import { forgotPassword } from "~/lib/auth";
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = createSignal("");
+  const [error, setError] = createSignal("");
+  const [loading, setLoading] = createSignal(false);
+  const [sent, setSent] = createSignal(false);
+
+  function validate(): boolean {
+    if (!email().trim()) {
+      setError("Email is required");
+      return false;
+    }
+    if (!EMAIL_REGEX.test(email())) {
+      setError("Invalid email format");
+      return false;
+    }
+    setError("");
+    return true;
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await forgotPassword(email());
+      setSent(true);
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <Title>Forgot Password — ShieldAI</Title>
+      <div class="flex flex-col gap-6">
+        <Show
+          when={!sent()}
+          fallback={
+            <div class="flex flex-col items-center gap-4 py-4 text-center">
+              <div class="h-12 w-12 rounded-full bg-[var(--color-success-bg)] flex items-center justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-6 w-6 text-[var(--color-success)]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M22 2L11 13" />
+                  <path d="M22 2L15 22L11 13L2 9L22 2Z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">
+                Check your email
+              </h3>
+              <p class="text-sm text-[var(--color-text-secondary)]">
+                We've sent a password reset link to{" "}
+                <span class="font-medium text-[var(--color-text-primary)]">
+                  {email()}
+                </span>
+              </p>
+              <p class="text-xs text-[var(--color-text-tertiary)]">
+                Didn't receive the email?{" "}
+                <button
+                  type="button"
+                  onClick={() => setSent(false)}
+                  class="text-[var(--color-brand-primary)] hover:underline cursor-pointer"
+                >
+                  Try again
+                </button>
+              </p>
+            </div>
+          }
+        >
+          <div class="text-center">
+            <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
+              Forgot password?
+            </h2>
+            <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+              Enter your email and we'll send you a reset link
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} class="flex flex-col gap-4">
+            <Input
+              label="Email"
+              type="email"
+              name="email"
+              placeholder="you@example.com"
+              value={email()}
+              onInput={(e) => {
+                setEmail(e.currentTarget.value);
+                setError("");
+              }}
+              error={error()}
+              required
+            />
+            <Button type="submit" loading={loading()} class="w-full">
+              Send Reset Link
+            </Button>
+          </form>
+
+          <p class="text-center text-sm text-[var(--color-text-secondary)]">
+            Remember your password?{" "}
+            <a
+              href="/login"
+              class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
+            >
+              Back to sign in
+            </a>
+          </p>
+        </Show>
+      </div>
+    </AuthLayout>
+  );
+}

web/src/routes/(auth)/login.tsx

@@ -0,0 +1,139 @@
+import { createSignal, Show } from "solid-js";
+import { Title } from "@solidjs/meta";
+import { useNavigate } from "@solidjs/router";
+import { AuthLayout, SocialAuthButtons } from "~/components/auth";
+import { Input } from "~/components/ui";
+import { Button } from "~/components/ui";
+import { login } from "~/lib/auth";
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface FormErrors {
+  email?: string;
+  password?: string;
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [rememberMe, setRememberMe] = createSignal(false);
+  const [errors, setErrors] = createSignal<FormErrors>({});
+  const [loading, setLoading] = createSignal(false);
+  const [serverError, setServerError] = createSignal("");
+
+  function validate(): boolean {
+    const errs: FormErrors = {};
+    if (!email().trim()) errs.email = "Email is required";
+    else if (!EMAIL_REGEX.test(email())) errs.email = "Invalid email format";
+    if (!password()) errs.password = "Password is required";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    setServerError("");
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await login(email(), password(), rememberMe());
+      navigate("/dashboard", { replace: true });
+    } catch {
+      setServerError("Invalid email or password. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <Title>Sign In — ShieldAI</Title>
+      <div class="flex flex-col gap-6">
+        <div class="text-center">
+          <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
+            Welcome back
+          </h2>
+          <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+            Sign in to your account
+          </p>
+        </div>
+
+        <Show when={serverError()}>
+          <div
+            class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
+            role="alert"
+          >
+            {serverError()}
+          </div>
+        </Show>
+
+        <form onSubmit={handleSubmit} class="flex flex-col gap-4">
+          <Input
+            label="Email"
+            type="email"
+            name="email"
+            placeholder="you@example.com"
+            value={email()}
+            onInput={(e) => setEmail(e.currentTarget.value)}
+            error={errors().email}
+            required
+          />
+          <Input
+            label="Password"
+            type="password"
+            name="password"
+            placeholder="Enter your password"
+            value={password()}
+            onInput={(e) => setPassword(e.currentTarget.value)}
+            error={errors().password}
+            required
+          />
+          <div class="flex items-center justify-between">
+            <label class="flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+              <input
+                type="checkbox"
+                checked={rememberMe()}
+                onChange={() => setRememberMe(!rememberMe())}
+                class="rounded border-[var(--color-border)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]"
+              />
+              Remember me
+            </label>
+            <a
+              href="/forgot-password"
+              class="text-sm text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] transition-colors"
+            >
+              Forgot password?
+            </a>
+          </div>
+          <Button type="submit" loading={loading()} class="w-full">
+            Sign In
+          </Button>
+        </form>
+
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-[var(--color-border)]" />
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-[var(--gradient-card-start)] px-2 text-[var(--color-text-tertiary)]">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        <SocialAuthButtons />
+
+        <p class="text-center text-sm text-[var(--color-text-secondary)]">
+          Don't have an account?{" "}
+          <a
+            href="/signup"
+            class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
+          >
+            Sign up
+          </a>
+        </p>
+      </div>
+    </AuthLayout>
+  );
+}

web/src/routes/(auth)/onboarding.tsx

@@ -0,0 +1,418 @@
+import { createSignal, For, Show } from "solid-js";
+import { Title } from "@solidjs/meta";
+import { useNavigate } from "@solidjs/router";
+import { Button, Input, Badge } from "~/components/ui";
+import { submitOnboarding } from "~/lib/auth";
+import type { OnboardingData } from "~/lib/auth";
+
+const plans = [
+  {
+    id: "basic",
+    name: "Basic",
+    price: "Free",
+    features: ["Basic monitoring", "1 email address", "1 phone number"],
+  },
+  {
+    id: "plus",
+    name: "Plus",
+    price: "$9.99/mo",
+    features: [
+      "Advanced monitoring",
+      "Unlimited emails & phones",
+      "Dark web scanning",
+      "Real-time alerts",
+    ],
+  },
+  {
+    id: "premium",
+    name: "Premium",
+    price: "$19.99/mo",
+    features: [
+      "Everything in Plus",
+      "Family members (up to 5)",
+      "Priority support",
+      "Identity restoration assistance",
+    ],
+  },
+];
+
+const steps = [
+  "Choose Plan",
+  "Add Watchlist",
+  "Invite Family",
+  "Complete",
+];
+
+export default function OnboardingPage() {
+  const navigate = useNavigate();
+  const [step, setStep] = createSignal(0);
+  const [plan, setPlan] = createSignal("plus");
+  const [watchlistItem, setWatchlistItem] = createSignal("");
+  const [watchlistItems, setWatchlistItems] = createSignal<string[]>([]);
+  const [familyInput, setFamilyInput] = createSignal("");
+  const [familyInvites, setFamilyInvites] = createSignal<string[]>([]);
+  const [submitting, setSubmitting] = createSignal(false);
+  const [watchlistError, setWatchlistError] = createSignal("");
+
+  function addWatchlistItem() {
+    const val = watchlistItem().trim();
+    if (!val) {
+      setWatchlistError("Please enter an email or phone number");
+      return;
+    }
+    if (watchlistItems().includes(val)) {
+      setWatchlistError("This item is already in your watchlist");
+      return;
+    }
+    setWatchlistError("");
+    setWatchlistItems((prev) => [...prev, val]);
+    setWatchlistItem("");
+  }
+
+  function removeWatchlistItem(idx: number) {
+    setWatchlistItems((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  function addFamilyInvite() {
+    const val = familyInput().trim();
+    if (!val) return;
+    if (familyInvites().includes(val)) return;
+    setFamilyInvites((prev) => [...prev, val]);
+    setFamilyInput("");
+  }
+
+  function removeFamilyInvite(idx: number) {
+    setFamilyInvites((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  async function completeOnboarding() {
+    setSubmitting(true);
+    try {
+      const data: OnboardingData = {
+        plan: plan(),
+        watchlistItems: watchlistItems(),
+        familyInvites: familyInvites(),
+      };
+      await submitOnboarding(data);
+      setStep(3);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <main class="min-h-screen flex flex-col items-center justify-center py-8 md:py-12 px-4">
+      <Title>Set Up Your Account — ShieldAI</Title>
+
+      <div class="w-full max-w-2xl">
+        <div class="flex items-center justify-center gap-2 mb-8">
+          <For each={steps}>
+            {(label, i) => (
+              <>
+                <div class="flex flex-col items-center gap-1">
+                  <div
+                    class={`h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300 ${
+                      i() <= step()
+                        ? "gradient-primary text-white"
+                        : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]"
+                    }`}
+                  >
+                    {i() < step() ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="3"
+                      >
+                        <path d="M20 6L9 17L4 12" />
+                      </svg>
+                    ) : (
+                      i() + 1
+                    )}
+                  </div>
+                  <span
+                    class={`text-xs hidden sm:block ${
+                      i() <= step()
+                        ? "text-[var(--color-text-primary)] font-medium"
+                        : "text-[var(--color-text-tertiary)]"
+                    }`}
+                  >
+                    {label}
+                  </span>
+                </div>
+                {i() < steps.length - 1 && (
+                  <div
+                    class={`flex-1 h-0.5 ${
+                      i() < step()
+                        ? "gradient-primary"
+                        : "bg-[var(--color-bg-tertiary)]"
+                    }`}
+                  />
+                )}
+              </>
+            )}
+          </For>
+        </div>
+
+        <div class="gradient-card border border-[var(--color-border)]/50 rounded-xl p-6 md:p-8">
+          <Show when={step() === 0}>
+            <div class="flex flex-col gap-6">
+              <div>
+                <h2 class="text-xl font-bold text-[var(--color-text-primary)]">
+                  Choose your plan
+                </h2>
+                <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+                  Select the plan that works best for you. You can upgrade anytime.
+                </p>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <For each={plans}>
+                  {(p) => (
+                    <button
+                      type="button"
+                      onClick={() => setPlan(p.id)}
+                      class={`relative flex flex-col gap-3 p-4 rounded-lg border-2 text-left transition-all duration-200 cursor-pointer ${
+                        plan() === p.id
+                          ? "border-[var(--color-brand-primary)] bg-[var(--color-brand-primary)]/5"
+                          : "border-[var(--color-border)] hover:border-[var(--color-border-dark)]"
+                      }`}
+                    >
+                      {p.id === "premium" && (
+                        <Badge
+                          variant="info"
+                          class="absolute -top-2.5 right-3"
+                        >
+                          Popular
+                        </Badge>
+                      )}
+                      <div>
+                        <p class="font-semibold text-[var(--color-text-primary)]">
+                          {p.name}
+                        </p>
+                        <p class="text-lg font-bold text-[var(--color-brand-primary)] mt-1">
+                          {p.price}
+                        </p>
+                      </div>
+                      <ul class="flex flex-col gap-1.5">
+                        <For each={p.features}>
+                          {(f) => (
+                            <li class="flex items-start gap-2 text-sm text-[var(--color-text-secondary)]">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4 mt-0.5 shrink-0 text-[var(--color-success)]"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                              >
+                                <path d="M20 6L9 17L4 12" />
+                              </svg>
+                              {f}
+                            </li>
+                          )}
+                        </For>
+                      </ul>
+                    </button>
+                  )}
+                </For>
+              </div>
+              <Button onClick={() => setStep(1)} class="w-full">
+                Continue
+              </Button>
+            </div>
+          </Show>
+
+          <Show when={step() === 1}>
+            <div class="flex flex-col gap-6">
+              <div>
+                <h2 class="text-xl font-bold text-[var(--color-text-primary)]">
+                  Add your first watchlist item
+                </h2>
+                <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+                  Add an email address or phone number to monitor.
+                </p>
+              </div>
+              <div class="flex gap-2">
+                <div class="flex-1">
+                  <Input
+                    type="text"
+                    placeholder="Email or phone number"
+                    value={watchlistItem()}
+                    onInput={(e) => {
+                      setWatchlistItem(e.currentTarget.value);
+                      setWatchlistError("");
+                    }}
+                    error={watchlistError()}
+                  />
+                </div>
+                <Button onClick={addWatchlistItem} variant="secondary">
+                  Add
+                </Button>
+              </div>
+              <Show when={watchlistItems().length > 0}>
+                <div class="flex flex-col gap-2">
+                  <For each={watchlistItems()}>
+                    {(item, i) => (
+                      <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-[var(--color-bg-secondary)]">
+                        <span class="text-sm text-[var(--color-text-primary)]">
+                          {item}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => removeWatchlistItem(i())}
+                          class="text-[var(--color-text-tertiary)] hover:text-[var(--color-error)] transition-colors cursor-pointer"
+                          aria-label={`Remove ${item}`}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-4 w-4"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          >
+                            <path d="M18 6L6 18M6 6L18 18" />
+                          </svg>
+                        </button>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <div class="flex gap-3">
+                <Button
+                  variant="ghost"
+                  onClick={() => setStep(0)}
+                >
+                  Back
+                </Button>
+                <Button
+                  onClick={() => setStep(2)}
+                  class="flex-1"
+                >
+                  {watchlistItems().length > 0
+                    ? "Continue"
+                    : "Skip for now"}
+                </Button>
+              </div>
+            </div>
+          </Show>
+
+          <Show when={step() === 2}>
+            <div class="flex flex-col gap-6">
+              <div>
+                <h2 class="text-xl font-bold text-[var(--color-text-primary)]">
+                  Invite family members
+                </h2>
+                <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+                  Optional. Add family members to extend protection.
+                </p>
+              </div>
+              <div class="flex gap-2">
+                <div class="flex-1">
+                  <Input
+                    type="email"
+                    placeholder="Family member's email"
+                    value={familyInput()}
+                    onInput={(e) => setFamilyInput(e.currentTarget.value)}
+                  />
+                </div>
+                <Button onClick={addFamilyInvite} variant="secondary">
+                  Add
+                </Button>
+              </div>
+              <Show when={familyInvites().length > 0}>
+                <div class="flex flex-col gap-2">
+                  <For each={familyInvites()}>
+                    {(email, i) => (
+                      <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-[var(--color-bg-secondary)]">
+                        <span class="text-sm text-[var(--color-text-primary)]">
+                          {email}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => removeFamilyInvite(i())}
+                          class="text-[var(--color-text-tertiary)] hover:text-[var(--color-error)] transition-colors cursor-pointer"
+                          aria-label={`Remove ${email}`}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-4 w-4"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          >
+                            <path d="M18 6L6 18M6 6L18 18" />
+                          </svg>
+                        </button>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <div class="flex gap-3">
+                <Button variant="ghost" onClick={() => setStep(1)}>
+                  Back
+                </Button>
+                <Button
+                  onClick={() => setStep(3)}
+                  class="flex-1"
+                >
+                  {familyInvites().length > 0
+                    ? "Continue"
+                    : "Skip for now"}
+                </Button>
+              </div>
+            </div>
+          </Show>
+
+          <Show when={step() === 3}>
+            <div class="flex flex-col items-center gap-6 py-8 text-center">
+              <div class="h-16 w-16 rounded-full gradient-primary flex items-center justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-8 w-8 text-white"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M20 6L9 17L4 12" />
+                </svg>
+              </div>
+              <div>
+                <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
+                  You're all set!
+                </h2>
+                <p class="text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm">
+                  Your ShieldAI account is ready. We're already monitoring your
+                  selected items and will alert you of any threats.
+                </p>
+              </div>
+              <div class="flex flex-col gap-2 w-full max-w-xs">
+                <Button
+                  onClick={() => navigate("/dashboard", { replace: true })}
+                  class="w-full"
+                >
+                  Go to Dashboard
+                </Button>
+                {!submitting && (
+                  <Button
+                    variant="ghost"
+                    onClick={completeOnboarding}
+                    class="w-full"
+                  >
+                    Submit onboarding data
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </main>
+  );
+}

web/src/routes/(auth)/reset-password.tsx

@@ -0,0 +1,146 @@
+import { createSignal, Show } from "solid-js";
+import { Title } from "@solidjs/meta";
+import { useSearchParams, useNavigate } from "@solidjs/router";
+import { AuthLayout, PasswordInput } from "~/components/auth";
+import { Button } from "~/components/ui";
+import { resetPassword } from "~/lib/auth";
+
+interface FormErrors {
+  password?: string;
+  confirmPassword?: string;
+}
+
+export default function ResetPasswordPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = () => (Array.isArray(searchParams.token) ? searchParams.token[0] : searchParams.token) ?? "";
+  const [password, setPassword] = createSignal("");
+  const [confirmPassword, setConfirmPassword] = createSignal("");
+  const [errors, setErrors] = createSignal<FormErrors>({});
+  const [loading, setLoading] = createSignal(false);
+  const [serverError, setServerError] = createSignal("");
+  const [success, setSuccess] = createSignal(false);
+
+  function validate(): boolean {
+    const errs: FormErrors = {};
+    if (!password()) errs.password = "Password is required";
+    else if (password().length < 8)
+      errs.password = "Password must be at least 8 characters";
+    if (password() !== confirmPassword())
+      errs.confirmPassword = "Passwords do not match";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    setServerError("");
+    if (!validate()) return;
+    if (!token()) {
+      setServerError("Invalid or missing reset token.");
+      return;
+    }
+    setLoading(true);
+    try {
+      await resetPassword(token(), password());
+      setSuccess(true);
+    } catch {
+      setServerError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <Title>Reset Password — ShieldAI</Title>
+      <div class="flex flex-col gap-6">
+        <Show
+          when={!success()}
+          fallback={
+            <div class="flex flex-col items-center gap-4 py-4 text-center">
+              <div class="h-12 w-12 rounded-full bg-[var(--color-success-bg)] flex items-center justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-6 w-6 text-[var(--color-success)]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M20 6L9 17L4 12" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">
+                Password reset successful
+              </h3>
+              <p class="text-sm text-[var(--color-text-secondary)]">
+                Your password has been updated.
+              </p>
+              <Button onClick={() => navigate("/login", { replace: true })}>
+                Back to Sign In
+              </Button>
+            </div>
+          }
+        >
+          <div class="text-center">
+            <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
+              Set new password
+            </h2>
+            <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+              Enter your new password below
+            </p>
+          </div>
+
+          <Show when={serverError()}>
+            <div
+              class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
+              role="alert"
+            >
+              {serverError()}
+            </div>
+          </Show>
+
+          <Show when={!token()}>
+            <div
+              class="px-4 py-3 rounded-lg text-sm bg-[var(--color-warning-bg)] text-[var(--color-warning)] border border-[var(--color-warning)]/30"
+              role="alert"
+            >
+              Invalid or missing reset token. Please request a new password
+              reset.
+            </div>
+          </Show>
+
+          <form onSubmit={handleSubmit} class="flex flex-col gap-4">
+            <PasswordInput
+              label="New password"
+              name="password"
+              placeholder="Enter new password"
+              value={password()}
+              onInput={(e) => setPassword(e.currentTarget.value)}
+              error={errors().password}
+              required
+            />
+            <PasswordInput
+              label="Confirm new password"
+              name="confirmPassword"
+              placeholder="Re-enter new password"
+              value={confirmPassword()}
+              onInput={(e) => setConfirmPassword(e.currentTarget.value)}
+              error={errors().confirmPassword}
+              required
+            />
+            <Button
+              type="submit"
+              loading={loading()}
+              disabled={!token()}
+              class="w-full"
+            >
+              Reset Password
+            </Button>
+          </form>
+        </Show>
+      </div>
+    </AuthLayout>
+  );
+}

web/src/routes/(auth)/signup.tsx

@@ -0,0 +1,218 @@
+import { createSignal, createMemo, Show } from "solid-js";
+import { Title } from "@solidjs/meta";
+import { useNavigate } from "@solidjs/router";
+import { AuthLayout, PasswordInput, SocialAuthButtons } from "~/components/auth";
+import { Input } from "~/components/ui";
+import { Button } from "~/components/ui";
+import { signup } from "~/lib/auth";
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface FormErrors {
+  name?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+  terms?: string;
+}
+
+type StrengthLevel = "none" | "weak" | "medium" | "strong";
+
+export default function SignupPage() {
+  const navigate = useNavigate();
+  const [name, setName] = createSignal("");
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [confirmPassword, setConfirmPassword] = createSignal("");
+  const [agreeTerms, setAgreeTerms] = createSignal(false);
+  const [errors, setErrors] = createSignal<FormErrors>({});
+  const [loading, setLoading] = createSignal(false);
+  const [serverError, setServerError] = createSignal("");
+
+  const strength = createMemo<{ level: StrengthLevel; label: string; percent: number }>(() => {
+    const pwd = password();
+    if (!pwd) return { level: "none", label: "", percent: 0 };
+    let score = 0;
+    if (pwd.length >= 8) score++;
+    if (pwd.length >= 12) score++;
+    if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++;
+    if (/\d/.test(pwd)) score++;
+    if (/[^a-zA-Z0-9]/.test(pwd)) score++;
+    if (score <= 1) return { level: "weak", label: "Weak", percent: 25 };
+    if (score <= 3) return { level: "medium", label: "Medium", percent: 60 };
+    return { level: "strong", label: "Strong", percent: 100 };
+  });
+
+  const strengthColors: Record<string, string> = {
+    weak: "bg-[var(--color-error)]",
+    medium: "bg-[var(--color-warning)]",
+    strong: "bg-[var(--color-success)]",
+  };
+
+  function validate(): boolean {
+    const errs: FormErrors = {};
+    if (!name().trim()) errs.name = "Name is required";
+    if (!email().trim()) errs.email = "Email is required";
+    else if (!EMAIL_REGEX.test(email())) errs.email = "Invalid email format";
+    if (!password()) errs.password = "Password is required";
+    else if (password().length < 8) errs.password = "Password must be at least 8 characters";
+    if (password() !== confirmPassword()) errs.confirmPassword = "Passwords do not match";
+    if (!agreeTerms()) errs.terms = "You must agree to the Terms of Service";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    setServerError("");
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      await signup(name(), email(), password());
+      navigate("/onboarding", { replace: true });
+    } catch {
+      setServerError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <Title>Create Account — ShieldAI</Title>
+      <div class="flex flex-col gap-6">
+        <div class="text-center">
+          <h2 class="text-2xl font-bold text-[var(--color-text-primary)]">
+            Create your account
+          </h2>
+          <p class="text-sm text-[var(--color-text-secondary)] mt-1">
+            Start protecting your identity
+          </p>
+        </div>
+
+        <Show when={serverError()}>
+          <div
+            class="px-4 py-3 rounded-lg text-sm bg-[var(--color-error-bg)] text-[var(--color-error)] border border-[var(--color-error)]/30"
+            role="alert"
+          >
+            {serverError()}
+          </div>
+        </Show>
+
+        <form onSubmit={handleSubmit} class="flex flex-col gap-4">
+          <Input
+            label="Full name"
+            type="text"
+            name="name"
+            placeholder="John Doe"
+            value={name()}
+            onInput={(e) => setName(e.currentTarget.value)}
+            error={errors().name}
+            required
+          />
+          <Input
+            label="Email"
+            type="email"
+            name="email"
+            placeholder="you@example.com"
+            value={email()}
+            onInput={(e) => setEmail(e.currentTarget.value)}
+            error={errors().email}
+            required
+          />
+          <div>
+            <PasswordInput
+              label="Password"
+              name="password"
+              placeholder="Create a strong password"
+              value={password()}
+              onInput={(e) => setPassword(e.currentTarget.value)}
+              error={errors().password}
+              required
+            />
+            <Show when={strength().level !== "none"}>
+              <div class="mt-2">
+                <div class="h-1.5 w-full bg-[var(--color-bg-tertiary)] rounded-full overflow-hidden">
+                  <div
+                    class={`h-full rounded-full transition-all duration-300 ${strengthColors[strength().level]}`}
+                    style={{ width: `${strength().percent}%` }}
+                  />
+                </div>
+                <p class={`text-xs mt-1 text-[var(--color-text-tertiary)]`}>
+                  Password strength:{" "}
+                  <span
+                    class={`font-medium ${
+                      strength().level === "weak"
+                        ? "text-[var(--color-error)]"
+                        : strength().level === "medium"
+                          ? "text-[var(--color-warning)]"
+                          : "text-[var(--color-success)]"
+                    }`}
+                  >
+                    {strength().label}
+                  </span>
+                </p>
+              </div>
+            </Show>
+          </div>
+          <PasswordInput
+            label="Confirm password"
+            name="confirmPassword"
+            placeholder="Re-enter your password"
+            value={confirmPassword()}
+            onInput={(e) => setConfirmPassword(e.currentTarget.value)}
+            error={errors().confirmPassword}
+            required
+          />
+          <label class="flex items-start gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+            <input
+              type="checkbox"
+              checked={agreeTerms()}
+              onChange={() => setAgreeTerms(!agreeTerms())}
+              class="mt-0.5 rounded border-[var(--color-border)] text-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]"
+            />
+            <span>
+              I agree to the{" "}
+              <a href="/terms" class="text-[var(--color-brand-primary)] hover:underline">
+                Terms of Service
+              </a>{" "}
+              and{" "}
+              <a href="/privacy" class="text-[var(--color-brand-primary)] hover:underline">
+                Privacy Policy
+              </a>
+            </span>
+          </label>
+          <Show when={errors().terms}>
+            <p class="text-sm text-[var(--color-error)] -mt-2">{errors().terms}</p>
+          </Show>
+          <Button type="submit" loading={loading()} class="w-full">
+            Create Account
+          </Button>
+        </form>
+
+        <div class="relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-[var(--color-border)]" />
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-[var(--gradient-card-start)] px-2 text-[var(--color-text-tertiary)]">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        <SocialAuthButtons />
+
+        <p class="text-center text-sm text-[var(--color-text-secondary)]">
+          Already have an account?{" "}
+          <a
+            href="/login"
+            class="text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-light)] font-medium transition-colors"
+          >
+            Log in
+          </a>
+        </p>
+      </div>
+    </AuthLayout>
+  );
+}