--- name: clerk-auth description: "Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up." source: vibeship-spawner-skills (Apache 2.0) --- # Clerk Authentication ## Patterns ### Next.js App Router Setup Complete Clerk setup for Next.js 14/15 App Router. Includes ClerkProvider, environment variables, and basic sign-in/sign-up components. Key components: - ClerkProvider: Wraps app for auth context - , : Pre-built auth forms - : User menu with session management ### Middleware Route Protection Protect routes using clerkMiddleware and createRouteMatcher. Best practices: - Single middleware.ts file at project root - Use createRouteMatcher for route groups - auth.protect() for explicit protection - Centralize all auth logic in middleware ### Server Component Authentication Access auth state in Server Components using auth() and currentUser(). Key functions: - auth(): Returns userId, sessionId, orgId, claims - currentUser(): Returns full User object - Both require clerkMiddleware to be configured ## ⚠️ Sharp Edges | Issue | Severity | Solution | |-------|----------|----------| | Issue | critical | See docs | | Issue | high | See docs | | Issue | high | See docs | | Issue | high | See docs | | Issue | medium | See docs | | Issue | medium | See docs | | Issue | medium | See docs | | Issue | medium | See docs |