{"slug":"platform/INTEGRATION_REMOVAL_PLAN","title":"Integration Removal & Clerk Auth Migration Plan","section":"platform","sectionLabel":"Platform","status":"unclassified","type":"document","path":"platform/INTEGRATION_REMOVAL_PLAN.mdx","bytes":5537,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n\n> **Tier C — Historical.** This document is a point-in-time snapshot preserved for reference. For current architecture, see [CANONICAL_PLATFORM_ARCHITECTURE.md](../architecture/CANONICAL_PLATFORM_ARCHITECTURE.md).\n\n## Current State Analysis\n\n### Currently Installed Integrations\n- **Supabase** (`@supabase/ssr`, `@supabase/supabase-js`)\n- **Stripe** (`stripe`)\n- **Neon** (`@neondatabase/serverless`)\n- **OpenAI** (referenced in env but not installed)\n\n### Currently Configured\n- **Supabase Auth** (middleware + lib/auth.ts)\n- **Mock Auth** (fallback in lib/mock-auth.ts)\n- **CLERK_SECRET_KEY** defined in env.ts but **NOT INSTALLED**\n\n### Migration Target\n- **Clerk Auth** - To be installed and configured as primary auth\n\n---\n\n## Removal Strategy\n\n### Phase 1: Remove Unnecessary Integrations\n1. Remove Supabase dependencies (auth only, keep if needed for data)\n2. Remove Stripe (if not needed)\n3. Remove Neon if using only Supabase\n\n### Phase 2: Install & Configure Clerk\n1. Install `@clerk/nextjs` \n2. Install `@clerk/types` for TypeScript\n3. Create Clerk middleware\n4. Create Clerk auth utilities\n5. Update layout with `<ClerkProvider>`\n\n### Phase 3: Update Components\n1. Replace Supabase auth calls with Clerk\n2. Update session handling\n3. Update protected routes\n4. Remove mock auth\n\n### Phase 4: Clean Up\n1. Remove Supabase middleware\n2. Remove old auth utilities\n3. Remove unused packages\n4. Update environment variables\n\n---\n\n## Files to Remove/Modify\n\n### Remove These Files\n- `lib/supabase/middleware.ts` - Replaced by Clerk middleware\n- `lib/mock-auth.ts` - No longer needed\n- `lib/supabase/server.ts` - Supabase client (if not using for data)\n- `lib/supabase/client.ts` - Supabase client (if not using for data)\n- `app/api/auth/` - Old auth routes (if any)\n\n### Modify These Files\n- `lib/env.ts` - Remove Supabase vars, add Clerk vars\n- `lib/auth.ts` - Replace with Clerk auth\n- `middleware.ts` - Replace Supabase middleware with Clerk\n- `app/layout.tsx` - Add ClerkProvider\n- `package.json` - Remove/add dependencies\n\n---\n\n## Dependencies to Remove\n```json\n{\n  \"@supabase/ssr\": \"0.8.0\",\n  \"@supabase/supabase-js\": \"latest\",\n  \"stripe\": \"^14.0.0\",\n  \"@neondatabase/serverless\": \"^1.0.0\"\n}\n```\n\n## Dependencies to Add\n```json\n{\n  \"@clerk/nextjs\": \"^4.29.0\",\n  \"@clerk/types\": \"^3.48.0\"\n}\n```\n\n---\n\n## Required Environment Variables\n\n### Remove\n- `NEXT_PUBLIC_SUPABASE_URL`\n- `NEXT_PUBLIC_SUPABASE_ANON_KEY`\n- `SUPABASE_SERVICE_ROLE_KEY`\n- `STRIPE_SECRET_KEY`\n\n### Keep/Modify\n- `CLERK_SECRET_KEY` - Keep (move from optional to required)\n- Add: `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`\n- Add: `CLERK_WEBHOOK_SECRET` (optional, for webhook events)\n\n### Others (not auth-related)\n- `EMBEDDING_MODEL_ID`\n- `EMBEDDING_DIMENSION`\n- `VECTOR_DISTANCE_METRIC`\n- `CRON_ENABLED`\n- etc.\n\n---\n\n## Migration Steps (Detailed)\n\n### Step 1: Install Clerk\n```bash\ncd apps/web\npnpm add @clerk/nextjs @clerk/types\n```\n\n### Step 2: Create Clerk Auth Utilities\nCreate `lib/clerk-auth.ts`:\n```typescript\n\nexport async function getSession() {\n  const { userId } = await auth()\n  const user = await currentUser()\n  \n  if (!userId || !user) return null\n  \n  return {\n    user: {\n      id: userId,\n      email: user.emailAddresses[0]?.emailAddress || \"\",\n      name: user.firstName ? `${user.firstName} ${user.lastName || \"\"}` : undefined,\n      avatar: user.imageUrl,\n    }\n  }\n}\n\nexport async function requireAuth() {\n  const { userId } = await auth()\n  if (!userId) {\n    throw new Error(\"Unauthorized\")\n  }\n  return userId\n}\n```\n\n### Step 3: Update Layout\nUpdate `app/layout.tsx`:\n```typescript\n\n  return (\n    <ClerkProvider>\n      <html>\n        <body>{children}</body>\n      </html>\n    </ClerkProvider>\n  )\n}\n```\n\n### Step 4: Replace Middleware\nUpdate `middleware.ts`:\n```typescript\n\n  publicRoutes: [\"/\", \"/api/public\"],\n  ignoredRoutes: [\"/api/webhooks\"],\n})\n\n  matcher: [\"/((?!_next/static|_next/image|favicon.ico).*)\"],\n}\n```\n\n### Step 5: Update Env\nUpdate `lib/env.ts`:\n- Remove Supabase public/private keys\n- Add Clerk keys\n- Keep other config\n\n### Step 6: Remove Old Files\n- Delete `lib/supabase/middleware.ts`\n- Delete `lib/mock-auth.ts`\n- Delete `lib/supabase/` directory (if not using Supabase for data)\n- Delete old auth routes\n\n### Step 7: Update Components\nReplace auth usage:\n- Remove Supabase auth calls\n- Use `useAuth()` from `@clerk/nextjs`\n- Use `useUser()` for current user\n- Use `<SignInButton />`, `<SignUpButton />` etc.\n\n---\n\n## Testing Checklist\n\n- [ ] Install succeeds without errors\n- [ ] Dev server starts without errors\n- [ ] Clerk provider initializes\n- [ ] Sign up page works\n- [ ] Sign in page works\n- [ ] Session persists across pages\n- [ ] Protected routes redirect to sign in\n- [ ] User metadata accessible in components\n- [ ] Build succeeds\n- [ ] No TypeScript errors\n\n---\n\n## Rollback Plan\n\nIf issues arise:\n1. Revert package.json\n2. Restore original files from git\n3. Reinstall dependencies\n4. Checkout original middleware.ts\n\n---\n\n## Notes\n\n- Clerk provides a ready-made UI (prebuilt components)\n- Can customize styling with CSS variables\n- Webhook support available for events\n- Multi-factor authentication supported\n- Organization support available\n- Can keep Supabase for data, just remove auth\n\n"}