feat: auth flow — sign up, sign in, sign out (#24)

- Add (auth) route group with /sign-in and /sign-up pages
- Add (app) route group with auth guard redirecting to /sign-in
- Sign-up passes display_name to handle_new_user trigger
- Post-auth redirect to user's personal workspace (/[workspaceSlug])
- Sign-out clears session and redirects to /sign-in
- GitHub and Google OAuth buttons rendered disabled with 'coming soon' tooltip
- Proxy-level auth redirect for unauthenticated users on protected routes
- Switch root layout to JetBrains Mono, dark-only oklch theme tokens
- Add shadcn/ui Card, Input, Label, Tooltip components
- Update architecture and conventions docs

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

.agents/architecture.md

@@ -140,30 +140,50 @@ Auto-save: debounce 500ms on editor change → write to Supabase
 
 ## Component Map
 
-Current state (infrastructure only — no product features yet):
-
 ```
 src/
 ├── app/                    # Next.js App Router
-│   ├── layout.tsx          # Root layout (currently Geist fonts — will switch to JetBrains Mono)
+│   ├── layout.tsx          # Root layout (JetBrains Mono font, TooltipProvider)
 │   ├── page.tsx            # Landing page
 │   ├── manifest.ts         # PWA manifest (name, icons, display mode)
 │   ├── global-error.tsx    # Sentry error boundary
+│   ├── globals.css         # Tailwind v4 theme — dark-only oklch tokens, --radius: 0
+│   ├── (auth)/             # Unauthenticated route group
+│   │   ├── layout.tsx      # Centered card layout for auth pages
+│   │   ├── sign-in/page.tsx # /sign-in — email/password form
+│   │   └── sign-up/page.tsx # /sign-up — display name + email/password form
+│   ├── (app)/              # Authenticated route group
+│   │   ├── layout.tsx      # Auth guard (redirects to /sign-in if no session), sign-out button
+│   │   └── [workspaceSlug]/
+│   │       └── page.tsx    # /[workspaceSlug] — workspace home (placeholder)
 │   └── api/
 │       └── health/route.ts # Health check endpoint (DB connectivity)
+├── components/
+│   ├── auth/
+│   │   ├── oauth-buttons.tsx    # GitHub + Google buttons (disabled, "coming soon" tooltip)
+│   │   └── sign-out-button.tsx  # Sign-out button (clears session, redirects to /sign-in)
+│   └── ui/                 # shadcn/ui components (base-nova style, base-ui primitives)
+│       ├── button.tsx
+│       ├── card.tsx
+│       ├── input.tsx
+│       ├── label.tsx
+│       └── tooltip.tsx
 ├── lib/
+│   ├── utils.ts            # cn() utility (clsx + tailwind-merge)
+│   ├── types.ts            # Database entity types
 │   └── supabase/
 │       ├── client.ts       # Browser client (createBrowserClient)
 │       ├── server.ts       # Server component client (createServerClient + cookies)
-│       └── proxy.ts        # Session refresh logic (updateSession)
+│       └── proxy.ts        # Session refresh + auth redirect logic (updateSession)
 ├── proxy.ts                # Root proxy — calls updateSession, skips static/health routes
 └── instrumentation.ts      # Sentry server/edge init (register + onRequestError)
 
 Root config files:
 ├── instrumentation-client.ts  # Sentry client init (replay, route transitions)
 ├── sentry.server.config.ts    # Sentry server SDK config
 ├── sentry.edge.config.ts      # Sentry edge SDK config
-└── sentry.client.config.ts    # Sentry client SDK config
+├── sentry.client.config.ts    # Sentry client SDK config
+└── components.json            # shadcn/ui config (base-nova style, Tailwind v4)
 ```
 
 Planned structure (added as features are built):

.agents/conventions.md

@@ -284,6 +284,71 @@ Rules:
 - No `as` casts unless unavoidable (add a comment explaining why)
 - Prefer interfaces for object shapes, types for unions/intersections
 
+## shadcn/ui (base-nova style)
+
+This project uses shadcn/ui v4 with the `base-nova` style, which uses `@base-ui/react`
+primitives instead of Radix. Key differences from older shadcn:
+
+### Tooltip composition
+
+base-ui's `TooltipTrigger` does NOT support `asChild`. Use the `render` prop instead:
+
+```typescript
+// ✅ Correct — base-ui render prop
+<TooltipTrigger
+  render={<Button variant="outline" disabled />}
+>
+  Button label
+</TooltipTrigger>
+
+// ❌ Wrong — asChild does not exist on base-ui primitives
+<TooltipTrigger asChild>
+  <Button>...</Button>
+</TooltipTrigger>
+```
+
+### Button primitives
+
+Buttons use `@base-ui/react/button` internally. The `Button` component accepts
+`ButtonPrimitive.Props & VariantProps<typeof buttonVariants>`.
+
+## Auth Flow
+
+### Route protection (two layers)
+
+1. **Proxy layer** (`src/lib/supabase/proxy.ts`): optimistic redirect — unauthenticated
+   users on non-public routes get redirected to `/sign-in`. Public routes: `/`, `/sign-in`,
+   `/sign-up`, `/invite/*`.
+2. **Layout layer** (`src/app/(app)/layout.tsx`): authoritative check — server component
+   calls `supabase.auth.getUser()` and redirects if no user. This is the security boundary.
+
+### Post-auth redirect
+
+After sign-in or sign-up, the client fetches the user's workspace membership to get
+the workspace slug, then redirects to `/{workspaceSlug}`. The query joins `members`
+with `workspaces` to get the slug in one call:
+
+```typescript
+const { data: membership } = await supabase
+  .from("members")
+  .select("workspace_id, workspaces(slug)")
+  .eq("user_id", user.id)
+  .limit(1)
+  .maybeSingle();
+```
+
+### Sign-up data
+
+Pass `display_name` in `signUp` options so the `handle_new_user` trigger can use it:
+
+```typescript
+await supabase.auth.signUp({
+  email,
+  password,
+  options: { data: { display_name: displayName } },
+});
+```
+
 ## This file evolves
 
 When you discover a new pattern that should be replicated, or an anti-pattern that

src/app/(app)/[workspaceSlug]/page.tsx

@@ -0,0 +1,32 @@
+import { notFound } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+
+export default async function WorkspacePage({
+  params,
+}: {
+  params: Promise<{ workspaceSlug: string }>;
+}) {
+  const { workspaceSlug } = await params;
+  const supabase = await createClient();
+
+  const { data: workspace } = await supabase
+    .from("workspaces")
+    .select("id, name, slug")
+    .eq("slug", workspaceSlug)
+    .maybeSingle();
+
+  if (!workspace) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center p-6">
+      <div className="max-w-2xl space-y-4 text-center">
+        <h1 className="text-2xl font-semibold">{workspace.name}</h1>
+        <p className="text-sm text-muted-foreground">
+          Your workspace is ready. Pages and editor coming soon.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+import { SignOutButton } from "@/components/auth/sign-out-button";
+
+export default async function AppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="flex items-center justify-end border-b border-white/[0.06] px-4 py-2">
+        <SignOutButton />
+      </header>
+      <main className="flex-1">{children}</main>
+    </div>
+  );
+}

src/app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main className="flex min-h-screen items-center justify-center p-6">
+      <div className="w-full max-w-sm">{children}</div>
+    </main>
+  );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { OAuthButtons } from "@/components/auth/oauth-buttons";
+
+export default function SignInPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const supabase = createClient();
+    const { error: signInError } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (signInError) {
+      setError(signInError.message);
+      setLoading(false);
+      return;
+    }
+
+    // Fetch the user's personal workspace to redirect to
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    if (user) {
+      const { data: membership } = await supabase
+        .from("members")
+        .select("workspace_id, workspaces(slug)")
+        .eq("user_id", user.id)
+        .limit(1)
+        .maybeSingle();
+
+      if (membership?.workspaces) {
+        const ws = membership.workspaces as unknown as { slug: string };
+        router.push(`/${ws.slug}`);
+        return;
+      }
+    }
+
+    // Fallback: redirect to root which will handle routing
+    router.push("/");
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold">Sign in to Memo</CardTitle>
+        <CardDescription>
+          Enter your email and password to continue.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+              minLength={6}
+            />
+          </div>
+          {error && <p className="text-xs text-destructive">{error}</p>}
+          <Button type="submit" disabled={loading} className="mt-1">
+            {loading ? "Signing in…" : "Sign in"}
+          </Button>
+        </form>
+        <div className="relative my-4">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t border-white/[0.06]" />
+          </div>
+          <div className="relative flex justify-center text-xs">
+            <span className="bg-card px-2 text-muted-foreground">or</span>
+          </div>
+        </div>
+        <OAuthButtons />
+        <p className="mt-4 text-center text-xs text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href="/sign-up" className="text-accent underline-offset-4 hover:underline">
+            Sign up
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}