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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: davila7-claude-code-templates-clerk-auth3description: Clerk Authentication4---56# Clerk Authentication78## Patterns910### Next.js App Router Setup1112Complete Clerk setup for Next.js 14/15 App Router.1314Includes ClerkProvider, environment variables, and basic15sign-in/sign-up components.1617Key components:18- ClerkProvider: Wraps app for auth context19- <SignIn />, <SignUp />: Pre-built auth forms20- <UserButton />: User menu with session management212223### Middleware Route Protection2425Protect routes using clerkMiddleware and createRouteMatcher.2627Best practices:28- Single middleware.ts file at project root29- Use createRouteMatcher for route groups30- auth.protect() for explicit protection31- Centralize all auth logic in middleware323334### Server Component Authentication3536Access auth state in Server Components using auth() and currentUser().3738Key functions:39- auth(): Returns userId, sessionId, orgId, claims40- currentUser(): Returns full User object41- Both require clerkMiddleware to be configured424344## ⚠️ Sharp Edges4546| Issue | Severity | Solution |47|-------|----------|----------|48| Issue | critical | See docs |49| Issue | high | See docs |50| Issue | high | See docs |51| Issue | high | See docs |52| Issue | medium | See docs |53| Issue | medium | See docs |54| Issue | medium | See docs |55| Issue | medium | See docs |5657---58> Converted and distributed by [TomeVault](https://tomevault.io/claim/davila7) — claim your Tome and manage your conversions.59<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/davila7-claude-code-templates-clerk-auth in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Clerk Authentication It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io