skills.rest
paramcodes
paramcodesCOMMUNITY
Explore all skills by this author →
Website𝕏@Your_PARAMGitHub

clerk-nextjs-patterns

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

Updated Sep 19, 2026
Search Tags:#authorization#authentication#jwt#Clerk#middleware#server actions#nextjs
One-click install
npx skills add https://github.com/paramcodes/autobro --skill clerk-nextjs-patterns-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nextjs-patterns
Source: https://github.com/paramcodes/autobro/tree/main/.agents/skills/clerk-nextjs-patterns
Command: npx skills add https://github.com/paramcodes/autobro --skill clerk-nextjs-patterns-paramcodes

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 distinct patterns—middleware route protection, Server Action authorization, API route 401/403 handling, and user-scoped caching—and mixing up server and client auth APIs causes common bugs like undefined userId or data leaking between users. ## Core Features & Use Cases - Server vs Client Auth Guidance: Enforces correct usage of await auth() from @clerk/nextjs/server in Server Components versus useAuth() hooks in Client Components. - Middleware Strategies: Provides public-first and protected-first clerkMiddleware configurations with createRouteMatcher, permission-gated routes, and token-based protection for machine APIs. - Server Actions & API Routes: Shows how to protect mutations and route handlers with authentication and role/permission checks, returning correct 401 vs 403 status codes. - Session Tokens & JWTs: Covers getToken() with JWT templates for third-party APIs like Hasura and Supabase, plus manual JWT verification for standalone servers. - Use Case: When your API route at app/api/data/route.ts is publicly accessible, use this Skill to add a Clerk auth() check that returns 401 for unauthenticated requests and scopes data to the signed-in user. ## Quick Start Ask the AI to protect your Next.js dashboard routes and API endpoints with Clerk middleware and auth() checks using the clerk-nextjs-patterns skill.

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 to configure Clerk middleware to protect routes in Next.js?▼

Use `clerkMiddleware` with `createRouteMatcher` to define public or protected route patterns, then call `await auth.protect()` for matched routes. Choose public-first for marketing sites or protected-first for internal dashboards, and include the api/trpc matcher.

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 hook from `@clerk/nextjs` for Client Components. Never mix them, and always await `auth()` or userId will be undefined.

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

The cache key is missing the userId, so `unstable_cache` serves one user's data to everyone. Include `userId` or `orgId` in the cache key and tags, then call `revalidateTag` after mutations to refresh the correct user's data.

Can I verify Clerk JWTs manually without Clerk middleware?▼

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

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

Call `getToken({ template: 'hasura' })` from `auth()` server-side or `useAuth()` client-side, using a JWT template configured in the Clerk dashboard. Pass the result as an Authorization Bearer header, and null-check it since getToken returns null when unauthenticated.

Related Skills

Explore More Software Engineering Skills→
TwuanMinnTwuanMinn

clerk-auth

Implement Clerk authentication with ClerkProvider and middleware for Next.js App Router.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-billing

Implement Clerk Billing subscription management in Next.js applications.

Community
Advanced
Rajaryan1726Rajaryan1726

clerk-orgs

Implement Clerk Organizations for multi-tenant B2B apps with roles, invitations, and enterprise SSO.

Community
Advanced
vercelvercel
246

auth

Implement user authentication in Next.js apps with Clerk, Descope, and Auth0.

Official
Advanced