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 When to Use This skill is applicable to execute the workflow or actions described in the overview.