Backend

[ngoiyaeric]

Make the plant icon a clerk authentication
When the user is authenticated replace the plant icon with the user profile circular icon.
Make sure the clerk auth is connected to the supabase schema for QCX-BACKEND

[ngoiyaeric]

@coderabbitai make sure the entire authentication, backend schema, system prompts are cohesively connected

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail
gh issue view 703 --repo QueueLab/QCX --json title,body,comments

Length of output: 967

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail
echo "== Repo structure =="
fd -t d -d 2 . 
echo "== Auth related files =="
rg -il 'auth' --iglob '*.ts' --iglob '*.tsx' -g '!node_modules' | head -50
echo "== Schema related files =="
fd -i schema
echo "== System prompt files =="
rg -il 'system prompt|systemPrompt' -g '!node_modules' | head -50

Length of output: 1020

---

🏁 Script executed:

#!/bin/bash
set -uo pipefail
echo "== Auth related files =="
rg -il 'auth' -g '*.ts' -g '*.tsx' -g '!node_modules' .
echo "== lib/auth dir =="
fd . lib/auth
echo "== lib/schema dir =="
fd . lib/schema
echo "== lib/supabase dir =="
fd . lib/supabase
echo "== lib/agents dir (system prompts likely) =="
fd . lib/agents
echo "== drizzle dir =="
fd . drizzle
echo "== search system prompt content =="
rg -il 'system prompt|systemPrompt|SYSTEM_PROMPT' .
echo "== search clerk =="
rg -il 'clerk' .
echo "== search supabase schema =="
rg -il 'createClient|supabase' lib/supabase lib/db lib/schema 2>/dev/null

Length of output: 3561

---

🏁 Script executed:

#!/bin/bash
set -uo pipefail
echo "== middleware.ts =="
cat -n middleware.ts
echo "== lib/auth/get-current-user.ts =="
cat -n lib/auth/get-current-user.ts
echo "== lib/auth/use-current-user.ts =="
cat -n lib/auth/use-current-user.ts
echo "== lib/supabase/client.ts =="
cat -n lib/supabase/client.ts
echo "== lib/supabase/browser-client.ts =="
cat -n lib/supabase/browser-client.ts
echo "== lib/db/schema.ts =="
cat -n lib/db/schema.ts

Length of output: 19753

---

🏁 Script executed:

#!/bin/bash
set -uo pipefail
echo "== lib/actions/system-prompt.ts =="
cat -n lib/actions/system-prompt.ts
echo "== lib/actions/users.ts =="
cat -n lib/actions/users.ts
echo "== components/settings/components/settings.tsx (auth parts) =="
rg -n 'auth|user|clerk|Icon|plant' components/settings/components/settings.tsx -i | head -80
echo "== search plant icon =="
rg -il 'plant' -g '*.tsx' -g '*.ts' .

Length of output: 15010

---

🏁 Script executed:

#!/bin/bash
set -uo pipefail
echo "== search for auth.users / trigger / webhook =="
rg -n 'auth.users|auth\.uid|handle_new_user|on_auth_user_created|webhook' -i .
echo "== drizzle migrations content relevant to users table =="
cat -n drizzle/migrations/0000_sweet_metal_master.sql | head -60
echo "== search for signup/login flow =="
rg -n 'signUp|signIn|signup|login' -i --type ts --type tsx 2>/dev/null | head -40
rg -n 'signUp|signIn|signup|login' -i -g '*.ts' -g '*.tsx' . | head -40
echo "== public/icons =="
fd . public/icons
echo "== search plant references (any file) =="
rg -il 'plant' .

Length of output: 3617

---

@ngoiyaeric, I audited the auth ↔ schema ↔ system-prompt wiring end-to-end. Here's what I found:

Architecture conflict to resolve first: Issue #703's body asks for Clerk authentication, but there is no Clerk SDK or usage anywhere in the repo (rg -il 'clerk' returns nothing). The app currently authenticates entirely via Supabase Auth (lib/auth/get-current-user.ts server-side, lib/auth/use-current-user.ts client-side). Before I build the plant→avatar icon swap, please confirm: do you want to (a) migrate to Clerk and bridge it to the Supabase-backed schema, or (b) keep Supabase Auth end-to-end (simpler, since the schema/RLS already assume auth.uid())?

Concrete disconnects found regardless of provider choice:

1. Client-side auth is dead code — lib/supabase/browser-client.ts is a hardcoded stub:

   export const getSupabaseBrowserClient = () => ({ auth: { getUser: () => ({ data: { user: null }, error: null }) } });

   This means useCurrentUser() (used in components/settings/components/settings.tsx) always returns user: null, so the settings page and any future avatar icon can never reflect real auth state on the client.

2. Middleware doesn't actually check auth — middleware.ts Line 11: const isAuthenticated = true // Replace with actual auth check. The /settings route is effectively unprotected.

3. No provisioning bridge between Supabase auth.users and your app's users table — lib/db/schema.ts's users table (with role, selectedModel, systemPrompt) has no trigger/webhook creating a row when someone signs up via Supabase Auth. Since getCurrentUserIdOnServer() returns the Supabase auth.users.id, but lib/actions/users.ts's requireAdmin() and lib/actions/system-prompt.ts both query public.users by that ID, a newly signed-up user with no corresponding public.users row will silently fail admin checks and system-prompt saves.

4. Inconsistent RLS — Row-level security using auth.uid() = user_id is only present for calendar_notes (drizzle/migrations/0001_add_calendar_notes.sql). chats, messages, locations, system_prompts, visualizations, and prompt_generation_jobs have no equivalent RLS policies I could find, so Supabase-level enforcement is inconsistent even though your server actions guard access at the app layer.

The good news: lib/actions/system-prompt.ts and the systemPrompts/promptGenerationJobs tables are already wired correctly to userId via FK and gated by getCurrentUserIdOnServer() — that part is cohesive, contingent on fixing #3 above.

Once you confirm the provider direction, I can plan the concrete fixes (real browser client, real middleware check, public.users provisioning trigger/action, and consistent RLS policies) via @coderabbitai plan. Want me to proceed with Supabase-only (fixes 1–4 above), or do you want the Clerk migration path?

---

✏️ Learnings added

Learnt from: ngoiyaeric
URL: https://github.com/QueueLab/QCX/issues/703

Timestamp: 2026-07-06T12:38:11.603Z
Learning: Repository QueueLab/QCX: Authentication is implemented via Supabase Auth, not Clerk — `lib/auth/get-current-user.ts` (server, `supabase/ssr`) and `lib/auth/use-current-user.ts` (client) are the auth entry points. `lib/supabase/browser-client.ts` is currently a non-functional stub that always returns a null user, and `middleware.ts` hardcodes `isAuthenticated = true`, so client-side auth state and route protection are both effectively broken. The app's `users` table (`lib/db/schema.ts`) has no verified trigger/webhook linking it to Supabase `auth.users`, and RLS policies using `auth.uid() = user_id` only exist for the `calendar_notes` table so far.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

[ngoiyaeric]

@coderabbitai as well as the multiple user collaboration supabase clerk capabilities

[coderabbitai]

Coding Plan

Summary

• Add Clerk from scratch (dependency, ClerkProvider, clerkMiddleware, sign-in/up routes, env vars) to establish app-wide authentication.
• Convert the existing ProfileToggle "circular user" control to reflect Clerk state: generic sign-in icon when signed out, the user's circular Clerk avatar when signed in, preserving styling, dropdown, and test ids.
• Connect Clerk to the Supabase QCX-BACKEND project using Supabase's native third-party Clerk integration (token passthrough), plus a Clerk webhook that upserts users into the Drizzle users table via a new clerk_id mapping.
• Bridge server/client current-user resolution to Clerk while retaining the internal uuid data model so existing authorization and actions keep working.

Design Choices

Design Choice 1: Which on-screen icon is the "plant icon" to convert into the Clerk auth/profile control?

Options Considered:

1. Convert the CircleUserRound control in components/profile-toggle.tsx into the Clerk-driven icon (generic icon when signed out, Clerk avatar when signed in), leaving the dropdown menu intact.
2. Convert the TentTree (Usage) icon in header.tsx/mobile-icons-bar.tsx into the Clerk auth control.

Chosen Option: 1

Rationale: ProfileToggle is already the "user profile circular icon," is wired into both desktop and mobile layouts through a single reusable component, and keeping the Usage/TentTree trigger untouched avoids regressing an unrelated feature.

Design Choice 2: How should a Clerk identity be reconciled with the existing users table for the QCX-BACKEND schema?

Options Considered:

1. Keep the uuid primary key, add a clerk_id (text, unique) column to users, sync Clerk users via a webhook + upsert, and resolve the internal uuid from the Clerk ID on the server.
2. Migrate users.id and every user_id foreign key to text set to the Clerk ID so user_id equals auth.jwt()->>'sub' natively.

Chosen Option: 1

Rationale: It is far less invasive (no wide FK/type migration), and since Drizzle already accesses the DB through a direct pg.Pool that bypasses RLS, resolving the internal id server-side from the Clerk ID is sufficient and low-risk.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Establish Clerk as the application auth provider

Introduce Clerk into the app foundation so auth context, route protection, and sign-in flows exist before wiring UI or backend sync. This phase makes useUser(), <SignedIn>/<SignedOut>, and server-side auth() available app-wide.

Task 1: Add and configure the Clerk SDK and environment

Bring in the Clerk dependency and the configuration surface it needs.

• Add @clerk/nextjs to package.json dependencies.
• Add Clerk env vars to .env.local.example (and document in README.md): NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, CLERK_WEBHOOK_SECRET, plus the standard NEXT_PUBLIC_CLERK_SIGN_IN_URL / NEXT_PUBLIC_CLERK_SIGN_UP_URL if custom routes are used.
• Also add the previously-undocumented AUTH_DISABLED_FOR_DEV flag to .env.local.example for consistency.

Task 2: Wrap the app with ClerkProvider

Ensure all client components (including ProfileToggle inside Header) can read Clerk state.

• Update app/layout.tsx to wrap the existing provider stack with ClerkProvider as the outermost provider inside <body>, above CalendarToggleProvider.
• Preserve the existing nesting order of all other providers unchanged.

Task 3: Replace the middleware stub with clerkMiddleware

Enable real route protection where a placeholder currently exists.

• Rewrite middleware.ts to use clerkMiddleware from @clerk/nextjs/server, replacing the hardcoded isAuthenticated = true gate.
• Preserve the existing behavior of skipping server-action requests (next-action header) and continue guarding /settings (redirecting unauthenticated users to sign-in).
• Keep/adjust the config.matcher to Clerk's recommended matcher while retaining current static-asset exclusions.

Task 4: Add sign-in and sign-up routes

Provide the destinations the profile control and middleware redirect to.

• Add Clerk catch-all sign-in and sign-up pages under app/ (e.g. app/sign-in/[[...sign-in]]/page.tsx and app/sign-up/[[...sign-up]]/page.tsx) rendering Clerk's <SignIn />/<SignUp />.
• Style/center to match existing app conventions; keep them minimal.

🤖 Prompt for AI agents

Implement the foundational Clerk integration for the app. Goal: make Clerk auth
context, route protection, and sign-in/sign-up flows available app-wide before
touching UI or backend sync.

- Add `@clerk/nextjs` as a dependency in `package.json`.
- Add Clerk environment variables to `.env.local.example` and document them in
`README.md`: `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`,
`CLERK_WEBHOOK_SECRET`, and optionally `NEXT_PUBLIC_CLERK_SIGN_IN_URL` /
`NEXT_PUBLIC_CLERK_SIGN_UP_URL` if custom routes are used. Also add the
previously-undocumented `AUTH_DISABLED_FOR_DEV` flag to `.env.local.example`.
- Update `app/layout.tsx` to wrap the existing provider stack with
`ClerkProvider` as the outermost provider inside `<body>`, positioned above
`CalendarToggleProvider`. Preserve the existing nesting order of all other
providers unchanged.
- Rewrite `middleware.ts` to use `clerkMiddleware` from `@clerk/nextjs/server`,
replacing the hardcoded `isAuthenticated = true` gate. Preserve existing
behavior of skipping server-action requests (detected via the `next-action`
header) and continue guarding `/settings` by redirecting unauthenticated users
to sign-in. Keep or adjust `config.matcher` to Clerk's recommended matcher while
retaining the current static-asset exclusions.
- Add Clerk catch-all sign-in and sign-up pages under `app/`, e.g.
`app/sign-in/[[...sign-in]]/page.tsx` and `app/sign-up/[[...sign-up]]/page.tsx`,
rendering Clerk's `<SignIn />` and `<SignUp />` components respectively. Keep
these pages minimal and styled/centered to match existing app conventions.

Phase 2: Convert the profile icon into a Clerk-driven auth/avatar control

Transform the existing ProfileToggle so it reflects authentication state: a generic circular sign-in icon when signed out, and the user's circular Clerk avatar when signed in — without disturbing sibling icons, styling, or existing test hooks.

Task 1: Drive ProfileToggle by Clerk auth state

Make the icon reflect signed-in vs signed-out status.

• Update components/profile-toggle.tsx to read Clerk state (<SignedIn>/<SignedOut> or useUser()).
• Signed-out: render the existing generic circular icon inside the same <Button variant="ghost" size="icon"> shell, triggering Clerk sign-in (redirect to the sign-in route or open Clerk's modal) on click.
• Signed-in: render the user's circular profile avatar (from user.imageUrl) sized to match the h-[1.2rem] w-[1.2rem] / ghost-icon convention, keeping the existing Account/Settings/Appearance/Security dropdown as the click behavior.
• Preserve data-testid="profile-toggle" and the dropdown item test ids so existing Playwright tests keep passing.
• Reconcile the current "disabled on mobile" branch with the new behavior (allow sign-in/avatar display on mobile, or keep the dropdown-less variant but still reflect auth state consistently).

Task 2: Verify header and mobile placements

Confirm the converted control renders correctly in both entry points.

• Confirm components/header.tsx and components/mobile-icons-bar.tsx continue to render <ProfileToggle /> with no prop changes; adjust only if the mobile branch behavior changes require it.
• Ensure visual sizing/hover parity with sibling icon buttons (h-10 w-10 ghost buttons).

🤖 Prompt for AI agents

Implement Clerk-driven state into the existing `ProfileToggle` component so the
profile icon reflects authentication status. Goal: signed-out users see a
generic circular sign-in icon, signed-in users see their circular Clerk avatar,
with no disruption to sibling icons, styling, or test hooks.

- Update `components/profile-toggle.tsx` to read Clerk auth state using
`<SignedIn>`/`<SignedOut>` or `useUser()`.
- For the signed-out case, render the existing generic circular icon inside the
same `<Button variant="ghost" size="icon">` shell; clicking it should trigger
Clerk sign-in (redirect to the sign-in route or open Clerk's modal).
- For the signed-in case, render the user's circular profile avatar sourced from
`user.imageUrl`, sized to match the existing `h-[1.2rem] w-[1.2rem]` /
ghost-icon convention, while keeping the existing
Account/Settings/Appearance/Security dropdown as the click behavior.
- Preserve the `data-testid="profile-toggle"` attribute and all dropdown item
test ids so existing Playwright tests continue to pass.
- Reconcile the current "disabled on mobile" branch with the new auth-aware
behavior — either allow sign-in/avatar display on mobile, or keep a
dropdown-less variant that still reflects auth state consistently.
- Confirm `components/header.tsx` and `components/mobile-icons-bar.tsx` continue
rendering `<ProfileToggle />` with no prop changes, adjusting only if mobile
branch behavior changes require it.
- Ensure visual sizing and hover parity with sibling icon buttons (`h-10 w-10`
ghost buttons) is maintained.

Phase 3: Connect Clerk auth to the Supabase QCX-BACKEND backend

Make the Supabase-backed backend recognize Clerk identities and keep the app's users table in sync, so authenticated Clerk users map to backend records and existing server actions/authorization continue to work.

Task 1: Configure Supabase third-party auth for Clerk (external + client wiring)

Adopt Supabase's first-class Clerk integration so Supabase trusts Clerk-issued JWTs (the sub claim carries the Clerk user ID).

• Document the Supabase Dashboard configuration step for the QCX-BACKEND project: register Clerk as a third-party auth provider (and enable the "Connect with Supabase" flow in Clerk). This is project configuration, not code, and should be captured in README.md/CLOUD_DEPLOYMENT.md.
• Update the Supabase clients (lib/supabase/client.ts and replace the stub lib/supabase/browser-client.ts) to pass the Clerk session token via the accessToken option so PostgREST calls run as the Clerk-authenticated user.
• Note: the deprecated JWT-template approach must not be used; rely on the current native Clerk↔Supabase integration.

Task 2: Sync Clerk users into the users table via webhook

Fill the current gap where no upsert-on-signup exists.

• Add a clerk_id (text, unique) column to the users table in lib/db/schema.ts and create a corresponding migration under drizzle/migrations/.
• Add a new server action (e.g. upsertUserFromClerk in lib/actions/users.ts) that maps Clerk user.id + primary email to a users row (insert on create, update on update, and handle delete), following the existing Drizzle patterns in that file.
• Create a new webhook route at app/api/webhooks/clerk/route.ts (new webhooks/ folder) exporting POST, verifying the Svix signature with CLERK_WEBHOOK_SECRET, and delegating to the new action — mirroring the existing app/api/*/route.ts conventions (NextResponse, try/catch, JSON error responses). Ensure this route is excluded from auth protection in middleware.ts.

Task 3: Bridge server-side current-user resolution to Clerk

Make existing authorization resolve against Clerk identity while preserving the internal uuid-based data model.

• Update lib/auth/get-current-user.ts so getCurrentUserIdOnServer() derives the current user from Clerk (auth() from @clerk/nextjs/server), resolving the internal users.id (uuid) via the clerk_id mapping. Retain the AUTH_DISABLED_FOR_DEV mock-user bypass for local dev.
• Update the client hook lib/auth/use-current-user.ts to source the user from Clerk's useUser() instead of the broken Supabase browser stub, keeping its existing return shape so components/settings/components/settings.tsx continues to work.
• Confirm downstream consumers (app/actions.tsx, app/api/chat, app/api/chats, lib/actions/*, requireAdmin()) still function since they call getCurrentUserIdOnServer(); no changes needed if the resolved uuid contract is preserved.

Task 4: Align RLS with Clerk identity (where applicable)

Keep the one RLS-protected table consistent under the new auth model.

• Review the calendar_notes RLS policy (auth.uid() = user_id) and, if any Supabase-client (non-Drizzle) access path is used for it under Clerk, update the policy to compare against auth.jwt()->>'sub'-derived identity consistent with the clerk_id mapping via a new migration.
• Since Drizzle server access uses a direct pg.Pool (bypassing RLS), document that server-trust remains the primary enforcement and RLS changes only matter for direct Supabase-client access.

🤖 Prompt for AI agents

Wire Clerk authentication into the Supabase-backed QCX-BACKEND backend so Clerk
identities are recognized by Supabase and synced into the app's `users` table,
while preserving the existing internal uuid-based data model.

- Configure Supabase's native third-party Clerk integration: document the
Supabase Dashboard step for the QCX-BACKEND project to register Clerk as a
third-party auth provider (and enable "Connect with Supabase" in Clerk) in
`README.md`/`CLOUD_DEPLOYMENT.md` as project configuration (not code). Update
the Supabase clients in `lib/supabase/client.ts` and replace the stub
`lib/supabase/browser-client.ts` to pass the Clerk session token via the
`accessToken` option so PostgREST calls run as the Clerk-authenticated user. Do
not use the deprecated JWT-template approach.

- Sync Clerk users into the `users` table: add a `clerk_id` (text, unique)
column to the `users` table in `lib/db/schema.ts` and create a corresponding
migration under `drizzle/migrations/`. Add a new server action, e.g.
`upsertUserFromClerk` in `lib/actions/users.ts`, that maps Clerk `user.id` plus
primary email to a `users` row — inserting on create, updating on update, and
handling delete — following the existing Drizzle patterns in that file. Create a
new webhook route at `app/api/webhooks/clerk/route.ts` (new `webhooks/` folder)
exporting `POST`, verifying the Svix signature using `CLERK_WEBHOOK_SECRET`, and
delegating to the new action, mirroring existing `app/api/*/route.ts`
conventions (NextResponse, try/catch, JSON error responses). Exclude this route
from auth protection in `middleware.ts`.

- Bridge server/client current-user resolution to Clerk: update
`lib/auth/get-current-user.ts` so `getCurrentUserIdOnServer()` derives the
current user from Clerk via `auth()` from `@clerk/nextjs/server`, resolving the
internal `users.id` (uuid) using the `clerk_id` mapping, while retaining the
`AUTH_DISABLED_FOR_DEV` mock-user bypass for local dev. Update the client hook
`lib/auth/use-current-user.ts` to source the user from Clerk's `useUser()`
instead of the broken Supabase browser stub, keeping its existing return shape
so `components/settings/components/settings.tsx` continues to work unmodified.
Verify downstream consumers (`app/actions.tsx`, `app/api/chat`, `app/api/chats`,
`lib/actions/*`, `requireAdmin()`) continue to function since they call
`getCurrentUserIdOnServer()`; no changes are needed there as long as the
resolved uuid contract is preserved.

- Align RLS with Clerk identity: review the `calendar_notes` RLS policy
(`auth.uid() = user_id`), and if any Supabase-client (non-Drizzle) access path
is used for it under Clerk, update the policy via a new migration to compare
against an `auth.jwt()->>'sub'`-derived identity consistent with the `clerk_id`
mapping. Document that since Drizzle server access uses a direct `pg.Pool`
bypassing RLS, server-trust remains the primary enforcement mechanism, and RLS
changes only matter for direct Supabase-client access paths.

Research

This is a Next.js App Router application. Cross-cutting UI providers (theme + several toggle contexts) are stacked inside <body> in app/layout.tsx, which also renders <Header />. The profile affordance is a self-contained components/profile-toggle.tsx that always renders a lucide CircleUserRound icon (with a desktop dropdown of Account/Settings/Appearance/Security, and a disabled variant on mobile); it is rendered in both components/header.tsx (desktop) and components/mobile-icons-bar.tsx (mobile). A visually plant/tree-like lucide TentTree icon exists separately as the Usage-panel trigger.

Auth today is a partial, effectively non-functional Supabase implementation: middleware.ts hardcodes isAuthenticated = true; lib/auth/get-current-user.ts reads a Supabase SSR session server-side (with an AUTH_DISABLED_FOR_DEV mock user); lib/auth/use-current-user.ts depends on a stub browser client that always returns null.

The database is Drizzle-managed against Supabase Postgres (lib/db/schema.ts defines a public.users table keyed by uuid), with server access via a direct pg.Pool (DATABASE_URL) that bypasses RLS; only calendar_notes currently has RLS (auth.uid() = user_id).

There is no Clerk dependency, no webhook routes, and no reference to "QCX-BACKEND" anywhere.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement the foundational Clerk integration for the app. Goal: make Clerk auth
context, route protection, and sign-in/sign-up flows available app-wide before
touching UI or backend sync.

- Add `@clerk/nextjs` as a dependency in `package.json`.
- Add Clerk environment variables to `.env.local.example` and document them in
`README.md`: `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`,
`CLERK_WEBHOOK_SECRET`, and optionally `NEXT_PUBLIC_CLERK_SIGN_IN_URL` /
`NEXT_PUBLIC_CLERK_SIGN_UP_URL` if custom routes are used. Also add the
previously-undocumented `AUTH_DISABLED_FOR_DEV` flag to `.env.local.example`.
- Update `app/layout.tsx` to wrap the existing provider stack with
`ClerkProvider` as the outermost provider inside `<body>`, positioned above
`CalendarToggleProvider`. Preserve the existing nesting order of all other
providers unchanged.
- Rewrite `middleware.ts` to use `clerkMiddleware` from `@clerk/nextjs/server`,
replacing the hardcoded `isAuthenticated = true` gate. Preserve existing
behavior of skipping server-action requests (detected via the `next-action`
header) and continue guarding `/settings` by redirecting unauthenticated users
to sign-in. Keep or adjust `config.matcher` to Clerk's recommended matcher while
retaining the current static-asset exclusions.
- Add Clerk catch-all sign-in and sign-up pages under `app/`, e.g.
`app/sign-in/[[...sign-in]]/page.tsx` and `app/sign-up/[[...sign-up]]/page.tsx`,
rendering Clerk's `<SignIn />` and `<SignUp />` components respectively. Keep
these pages minimal and styled/centered to match existing app conventions.
===============================================================================

Task: 2

Implement Clerk-driven state into the existing `ProfileToggle` component so the
profile icon reflects authentication status. Goal: signed-out users see a
generic circular sign-in icon, signed-in users see their circular Clerk avatar,
with no disruption to sibling icons, styling, or test hooks.

- Update `components/profile-toggle.tsx` to read Clerk auth state using
`<SignedIn>`/`<SignedOut>` or `useUser()`.
- For the signed-out case, render the existing generic circular icon inside the
same `<Button variant="ghost" size="icon">` shell; clicking it should trigger
Clerk sign-in (redirect to the sign-in route or open Clerk's modal).
- For the signed-in case, render the user's circular profile avatar sourced from
`user.imageUrl`, sized to match the existing `h-[1.2rem] w-[1.2rem]` /
ghost-icon convention, while keeping the existing
Account/Settings/Appearance/Security dropdown as the click behavior.
- Preserve the `data-testid="profile-toggle"` attribute and all dropdown item
test ids so existing Playwright tests continue to pass.
- Reconcile the current "disabled on mobile" branch with the new auth-aware
behavior — either allow sign-in/avatar display on mobile, or keep a
dropdown-less variant that still reflects auth state consistently.
- Confirm `components/header.tsx` and `components/mobile-icons-bar.tsx` continue
rendering `<ProfileToggle />` with no prop changes, adjusting only if mobile
branch behavior changes require it.
- Ensure visual sizing and hover parity with sibling icon buttons (`h-10 w-10`
ghost buttons) is maintained.
===============================================================================

Task: 3

Wire Clerk authentication into the Supabase-backed QCX-BACKEND backend so Clerk
identities are recognized by Supabase and synced into the app's `users` table,
while preserving the existing internal uuid-based data model.

- Configure Supabase's native third-party Clerk integration: document the
Supabase Dashboard step for the QCX-BACKEND project to register Clerk as a
third-party auth provider (and enable "Connect with Supabase" in Clerk) in
`README.md`/`CLOUD_DEPLOYMENT.md` as project configuration (not code). Update
the Supabase clients in `lib/supabase/client.ts` and replace the stub
`lib/supabase/browser-client.ts` to pass the Clerk session token via the
`accessToken` option so PostgREST calls run as the Clerk-authenticated user. Do
not use the deprecated JWT-template approach.

- Sync Clerk users into the `users` table: add a `clerk_id` (text, unique)
column to the `users` table in `lib/db/schema.ts` and create a corresponding
migration under `drizzle/migrations/`. Add a new server action, e.g.
`upsertUserFromClerk` in `lib/actions/users.ts`, that maps Clerk `user.id` plus
primary email to a `users` row — inserting on create, updating on update, and
handling delete — following the existing Drizzle patterns in that file. Create a
new webhook route at `app/api/webhooks/clerk/route.ts` (new `webhooks/` folder)
exporting `POST`, verifying the Svix signature using `CLERK_WEBHOOK_SECRET`, and
delegating to the new action, mirroring existing `app/api/*/route.ts`
conventions (NextResponse, try/catch, JSON error responses). Exclude this route
from auth protection in `middleware.ts`.

- Bridge server/client current-user resolution to Clerk: update
`lib/auth/get-current-user.ts` so `getCurrentUserIdOnServer()` derives the
current user from Clerk via `auth()` from `@clerk/nextjs/server`, resolving the
internal `users.id` (uuid) using the `clerk_id` mapping, while retaining the
`AUTH_DISABLED_FOR_DEV` mock-user bypass for local dev. Update the client hook
`lib/auth/use-current-user.ts` to source the user from Clerk's `useUser()`
instead of the broken Supabase browser stub, keeping its existing return shape
so `components/settings/components/settings.tsx` continues to work unmodified.
Verify downstream consumers (`app/actions.tsx`, `app/api/chat`, `app/api/chats`,
`lib/actions/*`, `requireAdmin()`) continue to function since they call
`getCurrentUserIdOnServer()`; no changes are needed there as long as the
resolved uuid contract is preserved.

- Align RLS with Clerk identity: review the `calendar_notes` RLS policy
(`auth.uid() = user_id`), and if any Supabase-client (non-Drizzle) access path
is used for it under Clerk, update the policy via a new migration to compare
against an `auth.jwt()->>'sub'`-derived identity consistent with the `clerk_id`
mapping. Document that since Drizzle server access uses a direct `pg.Pool`
bypassing RLS, server-trust remains the primary enforcement mechanism, and RLS
changes only matter for direct Supabase-client access paths.

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!