Clerk Auth

1---
2name: clerk-auth
3description: "Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up."
4source: vibeship-spawner-skills (Apache 2.0)
5---
6 
7# Clerk Authentication
8 
9## Patterns
10 
11### Next.js App Router Setup
12 
13Complete Clerk setup for Next.js 14/15 App Router.
14 
15Includes ClerkProvider, environment variables, and basic
16sign-in/sign-up components.
17 
18Key components:
19- ClerkProvider: Wraps app for auth context
20- <SignIn />, <SignUp />: Pre-built auth forms
21- <UserButton />: User menu with session management
22 
23 
24### Middleware Route Protection
25 
26Protect routes using clerkMiddleware and createRouteMatcher.
27 
28Best practices:
29- Single middleware.ts file at project root
30- Use createRouteMatcher for route groups
31- auth.protect() for explicit protection
32- Centralize all auth logic in middleware
33 
34 
35### Server Component Authentication
36 
37Access auth state in Server Components using auth() and currentUser().
38 
39Key functions:
40- auth(): Returns userId, sessionId, orgId, claims
41- currentUser(): Returns full User object
42- Both require clerkMiddleware to be configured
43 
44 
45## ⚠️ Sharp Edges
46 
47| Issue | Severity | Solution |
48|-------|----------|----------|
49| Issue | critical | See docs |
50| Issue | high | See docs |
51| Issue | high | See docs |
52| Issue | high | See docs |
53| Issue | medium | See docs |
54| Issue | medium | See docs |
55| Issue | medium | See docs |
56| Issue | medium | See docs |
57