38980-vm/app-9w9pd00g5j41/CLERK_JWT_FIX_DIAGRAM.md

Clerk JWT Fix - Visual Flow Diagram

🔴 Problem Flow (Before Fix)

┌─────────────────────────────────────────────────────────────────┐
│                         User Registration                        │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Clerk Sign Up (email/password)                │
│                    ✅ User created in Clerk                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Get Clerk Generic JWT                         │
│                    (Signed with Clerk's key)                     │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Send JWT to Supabase                          │
│                    ❌ Not recognized as authenticated            │
│                    → Treated as 'anon' role                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Try to INSERT profile                         │
│                    ❌ RLS Policy requires 'authenticated'        │
│                    ❌ INSERT FAILED                              │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    ❌ USER REGISTRATION BROKEN                   │
└─────────────────────────────────────────────────────────────────┘

✅ Solution Flow (After Fix)

┌─────────────────────────────────────────────────────────────────┐
│                         User Registration                        │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Clerk Sign Up (email/password)                │
│                    ✅ User created in Clerk                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Get Clerk Generic JWT                         │
│                    (Signed with Clerk's key)                     │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Send JWT to Supabase                          │
│                    ⚠️  Not recognized as authenticated           │
│                    → Treated as 'anon' role                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Try to INSERT profile                         │
│                    ✅ NEW RLS Policy allows 'public' role        │
│                    ✅ Validates clerk_user_id + email            │
│                    ✅ INSERT SUCCESS                             │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    ✅ USER REGISTRATION WORKS                    │
└─────────────────────────────────────────────────────────────────┘

🔐 Security Validation Flow

┌─────────────────────────────────────────────────────────────────┐
│                    Profile INSERT Request                        │
│                    (anon role)                                   │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    RLS Policy Check                              │
│                    "Allow profile creation with clerk_user_id"   │
└─────────────────────────────────────────────────────────────────┘
                              ↓
                    ┌─────────────────┐
                    │ clerk_user_id   │
                    │ IS NOT NULL?    │
                    └─────────────────┘
                       ↓           ↓
                      YES          NO
                       ↓           ↓
                       ↓      ❌ REJECT
                       ↓
                    ┌─────────────────┐
                    │ clerk_user_id   │
                    │ <> ''?          │
                    └─────────────────┘
                       ↓           ↓
                      YES          NO
                       ↓           ↓
                       ↓      ❌ REJECT
                       ↓
                    ┌─────────────────┐
                    │ email           │
                    │ IS NOT NULL?    │
                    └─────────────────┘
                       ↓           ↓
                      YES          NO
                       ↓           ↓
                       ↓      ❌ REJECT
                       ↓
┌─────────────────────────────────────────────────────────────────┐
│                    ✅ ALL CHECKS PASSED                          │
│                    ✅ INSERT ALLOWED                             │
└─────────────────────────────────────────────────────────────────┘

🔄 Profile Linking Flow

┌─────────────────────────────────────────────────────────────────┐
│                    Existing Profile (email only)                 │
│                    clerk_user_id: NULL                           │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    User Signs In with Clerk                      │
│                    (same email)                                  │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    useAuth Hook Detects                          │
│                    1. Profile exists by email                    │
│                    2. clerk_user_id is NULL                      │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Try to UPDATE profile                         │
│                    SET clerk_user_id = 'user_xxx'                │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    RLS Policy Check                              │
│                    "Allow profile update with email match"       │
└─────────────────────────────────────────────────────────────────┘
                              ↓
                    ┌─────────────────┐
                    │ USING clause:   │
                    │ email NOT NULL? │
                    │ clerk_user_id   │
                    │ IS NULL?        │
                    └─────────────────┘
                       ↓           ↓
                      YES          NO
                       ↓           ↓
                       ↓      ❌ REJECT
                       ↓
                    ┌─────────────────┐
                    │ WITH CHECK:     │
                    │ clerk_user_id   │
                    │ NOT NULL after? │
                    └─────────────────┘
                       ↓           ↓
                      YES          NO
                       ↓           ↓
                       ↓      ❌ REJECT
                       ↓
┌─────────────────────────────────────────────────────────────────┐
│                    ✅ UPDATE ALLOWED                             │
│                    ✅ Profile Linked                             │
└─────────────────────────────────────────────────────────────────┘

🎯 JWT Template Flow (Recommended)

┌─────────────────────────────────────────────────────────────────┐
│                    Clerk Dashboard Setup                         │
│                    1. Create JWT Template                        │
│                    2. Name: "supabase"                           │
│                    3. Signing Key: Supabase JWT Secret           │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    User Signs In                                 │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    getToken({ template: 'supabase' })            │
│                    ✅ JWT signed with Supabase secret            │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Send JWT to Supabase                          │
│                    ✅ Recognized as 'authenticated' role         │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    All RLS Policies Work Normally                │
│                    ✅ Full authenticated access                  │
│                    ✅ Better security                            │
│                    ✅ Standard Supabase behavior                 │
└─────────────────────────────────────────────────────────────────┘

📊 Policy Comparison

Before Fix

┌──────────────────────────────────────────────────────────────┐
│ Policy: "Authenticated users can create own profile"         │
│ Role: authenticated                                          │
│ Command: INSERT                                              │
│                                                              │
│ Clerk Generic JWT → anon role                               │
│ ❌ Policy doesn't match                                      │
│ ❌ INSERT blocked                                            │
└──────────────────────────────────────────────────────────────┘

After Fix

┌──────────────────────────────────────────────────────────────┐
│ Policy: "Allow profile creation with clerk_user_id"          │
│ Role: public (includes anon + authenticated)                │
│ Command: INSERT                                              │
│ Check: clerk_user_id NOT NULL AND email NOT NULL            │
│                                                              │
│ Clerk Generic JWT → anon role                               │
│ ✅ Policy matches (public includes anon)                     │
│ ✅ Validation checks pass                                    │
│ ✅ INSERT allowed                                            │
└──────────────────────────────────────────────────────────────┘

🔒 Security Layers

┌─────────────────────────────────────────────────────────────────┐
│                    Layer 1: Role Check                           │
│                    ✅ public role (anon + authenticated)         │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Layer 2: clerk_user_id Validation             │
│                    ✅ Must be non-null                           │
│                    ✅ Must be non-empty                          │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Layer 3: email Validation                     │
│                    ✅ Must be non-null                           │
│                    ✅ Used for profile matching                  │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    Layer 4: Application Logic                    │
│                    ✅ Clerk authentication required              │
│                    ✅ Email verified by Clerk                    │
│                    ✅ clerk_user_id from Clerk session           │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                    ✅ SECURE PROFILE CREATION                    │
└─────────────────────────────────────────────────────────────────┘

📈 Impact Analysis

Before Fix

User Registration:  ❌ BROKEN
Profile Linking:    ❌ BROKEN
Security:           ✅ TOO STRICT
User Experience:    ❌ POOR

After Fix

User Registration:  ✅ WORKING
Profile Linking:    ✅ WORKING
Security:           ✅ MAINTAINED
User Experience:    ✅ EXCELLENT

With JWT Template

User Registration:  ✅ WORKING
Profile Linking:    ✅ WORKING
Security:           ✅ ENHANCED
User Experience:    ✅ EXCELLENT
Supabase Features:  ✅ FULL ACCESS

---

Legend:

• ✅ Working / Allowed
• ❌ Broken / Blocked
• ⚠️ Warning / Limitation
• → Flow direction
• ↓ Next step