skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clerk-nextjs-patterns

Implements Clerk authentication patterns for Next.js middleware, Server Actions, API routes, and caching.

Updated Aug 7, 2026
Search Tags:#authorization#authentication#jwt#middleware#server actions#nextjs#clerk
One-click install
npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill clerk-nextjs-patterns-ramadan-elgamal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nextjs-patterns
Source: https://github.com/Ramadan-Elgamal/Autobees/tree/main/.agents/skills/clerk-nextjs-patterns
Command: npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill clerk-nextjs-patterns-ramadan-elgamal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/nextjs, @clerk/backend, jsonwebtoken, and includes references (resource) components.

What problem does it solve? Securing a Next.js application with Clerk involves many decisions—server vs client auth APIs, middleware strategies, Server Action protection, and user-scoped caching—and mistakes like missing awaits or unscoped cache keys cause auth bugs and data leaks. ## Core Features & Use Cases - Server vs Client Auth Guidance: Explains when to use await auth() from @clerk/nextjs/server versus hooks like useAuth() and useUser(), with Core 2 compatibility callouts. - Middleware & Route Protection: Covers public-first and protected-first middleware strategies, permission-gated routes, token-based protection for machine APIs, and 401 vs 403 handling in API routes. - Server Actions, Caching & JWTs: Shows how to protect Server Actions, build user-scoped unstable_cache keys, fetch custom JWTs with getToken() templates, and manually verify Clerk tokens on standalone servers. - Use Case: Convert a client component using useUser with a redirect useEffect into a server component using await auth(), eliminating the flash of unauthenticated content. ## Quick Start Ask the assistant to protect your Next.js dashboard routes and API endpoints with Clerk middleware and server-side auth checks.

Frequently Asked Questions about clerk-nextjs-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect Next.js API routes with Clerk auth?▼

Call await auth() from @clerk/nextjs/server at the top of your route handler and return a 401 response when the user is not authenticated. Use 403 instead when the user is signed in but lacks the required role or permission checked via has().

How do I use Clerk middleware to protect routes in Next.js?▼

Use clerkMiddleware with createRouteMatcher to define public or protected route patterns, then call auth.protect() for routes requiring authentication. Choose public-first for marketing sites or protected-first for internal tools and dashboards.

What is the difference between auth() and useAuth() in Clerk Next.js?▼

auth() is an async server-side function from @clerk/nextjs/server used in Server Components, while useAuth() is a synchronous client hook from @clerk/nextjs. Never mix them—Server Components use server imports and Client Components use hooks.

Why does my Next.js cache return another user's data with Clerk?▼

The cache key is missing the userId or orgId, so unstable_cache serves shared data across users. Include the user identifier in both the cache key and revalidation tags to scope cached data per user.

Can I verify Clerk session tokens without Clerk middleware?▼

Yes, standalone API servers can verify tokens using verifyToken from @clerk/backend with CLERK_JWT_KEY, or the jsonwebtoken library with CLERK_PEM_PUBLIC_KEY. Always validate the exp and nbf claims and return 401 for invalid tokens.

How do I pass a Clerk JWT to an external API like Hasura?▼

Call getToken({ template: 'hasura' }) from auth() server-side or useAuth() client-side, then send it as an Authorization Bearer header. Always null-check the token since getToken returns null for unauthenticated users.

Related Skills

Explore More Software Engineering Skills→
awfixers-stuffawfixers-stuff

clerk-setup

Detect a project's framework and apply Clerk quickstart authentication setup.

Official
Intermediate
Galaxies-devGalaxies-dev
1

clerk-webhooks

Verify Clerk webhook signatures and update local database records.

Official
Intermediate
sudarshan-krishnansudarshan-krishnan

clerk-billing

Implement Clerk Billing subscription management in Next.js applications.

Community
Advanced
HieubkavHieubkav

better-auth

Configure TypeScript authentication for Cloudflare Workers with Drizzle ORM or Kysely.

Community
Advanced