About clerk-auth
clerk-auth is a skill covering Clerk authentication patterns for Next.js 14/15 App Router. It describes provider setup, route protection, and access to authentication state in Server Components.
Key features
- 01Next.js App Router setup
- 02ClerkProvider configuration
- 03Route protection middleware
- 04Server Component authentication
- 05Access to user and session data
Use cases
- 01Adding sign-in and sign-up to a Next.js app
- 02Protecting route groups with middleware
- 03Reading authentication state in Server Components
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/clerk-authin Claude Code to confirm it loaded.
Details
From the project READMEClerk 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 |
Comments
Markdown supported