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

* feat: initial commit

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

* 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>

---------

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

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package.json

@@ -13,12 +13,19 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@base-ui/react": "^1.4.0",
     "@sentry/nextjs": "^10.48.0",
     "@supabase/ssr": "^0.10.2",
     "@supabase/supabase-js": "^2.103.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
     "next": "16.2.3",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "shadcn": "^4.2.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.59.1",