Backend

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

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

🧩 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:

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.
Middleware doesn't actually check auth — middleware.ts Line 11: const isAuthenticated = true // Replace with actual auth check. The /settings route is effectively unprotected.
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.
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.

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

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:

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.
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:

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.
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!

Navigation Menu

Repository navigation

Backend #703

Coding Plan

Summary

Implementation Steps

Phase 1: Establish Clerk as the application auth provider

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

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

🚀 Next Steps

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Backend #703

Description

Activity

ngoiyaeric commented on Jul 6, 2026

coderabbitai commented on Jul 6, 2026

ngoiyaeric commented on Jul 6, 2026

coderabbitai commented on Jul 6, 2026

Coding Plan

Summary

Implementation Steps

Phase 1: Establish Clerk as the application auth provider

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

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

🚀 Next Steps

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions