/auth
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
$ npx -y skills add vercel-labs/vercel-plugin --skill auth --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/auth
Context preview
The summary Claude sees to decide when to auto-load this skill.
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
SKILL.md
auth.SKILL.mdname: auth
description: Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
metadata:
priority: 6
docs:
- "https://authjs.dev/getting-started"
- "https://nextjs.org/docs/app/building-your-application/authentication"
sitemap: "https://authjs.dev/sitemap.xml"
pathPatterns:
- 'middleware.ts'
- 'middleware.js'
- 'src/middleware.ts'
- 'src/middleware.js'
- 'clerk.config.*'
- 'app/sign-in/**'
- 'app/sign-up/**'
- 'src/app/sign-in/**'
- 'src/app/sign-up/**'
- 'app/(auth)/**'
- 'src/app/(auth)/**'
- 'auth.config.*'
- 'auth.ts'
- 'auth.js'
bashPatterns:
- '\bnpm\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\byarn\s+add\s+[^\n]*@clerk/nextjs\b'
- '\bnpm\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\byarn\s+add\s+[^\n]*@descope/nextjs-sdk\b'
- '\bnpm\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\byarn\s+add\s+[^\n]*@auth0/nextjs-auth0\b'
validate:
-
pattern: 'VERCEL_CLIENT_(ID|SECRET)|vercel\.com/oauth/(authorize|access_token|token)'
message: 'Hand-rolled Vercel OAuth detected. Use the Sign in with Vercel OIDC provider instead of manual token exchange.'
severity: recommended
skipIfFileContains: 'signInWithVercel|@vercel/auth'
retrieval:
aliases:
- authentication
- login system
- sign in
- auth flow
intents:
- add auth
- protect routes
- manage sessions
- implement login
- secure api endpoints
entities:
- NextAuth
- Auth.js
- JWT
- OAuth
- session
- middleware
- getServerSession
examples:
- add login to my app
- protect this route with auth
- set up NextAuth
chainTo:
-
pattern: 'export\s+(default\s+)?function\s+middleware'
targetSkill: routing-middleware
message: 'Auth logic in middleware.ts — loading Routing Middleware guidance for proxy.ts migration in Next.js 16.'
-
pattern: 'from\s+[''\"](jsonwebtoken)[''"]|require\s*\(\s*[''\"](jsonwebtoken)[''"]|jwt\.sign\s*\('
targetSkill: auth
message: 'Manual JWT handling with jsonwebtoken detected — use Clerk or Auth.js for managed auth with built-in JWT session handling, CSRF protection, and token rotation.'
-
pattern: 'from\s+[''\"](next-auth)[''"]|NextAuthOptions|authOptions\s*:'
targetSkill: auth
message: 'Legacy next-auth (v4) pattern detected — loading auth guidance for Auth.js v5 migration with the new universal auth() helper.'
-
pattern: "from\\s+['\"]@clerk/nextjs['\"]"
targetSkill: auth
message: 'Clerk import detected — loading Auth guidance for Clerk v7 patterns, middleware setup, organization handling, and Vercel Marketplace integration.'
skipIfFileContains: 'clerkMiddleware|ClerkProvider'
-
pattern: "bcrypt|argon2"
targetSkill: auth
message: 'Manual password hashing detected (bcrypt/argon2) — use Clerk or Auth0 for managed authentication with built-in password hashing, rate limiting, and breach detection.'
skipIfFileContains: "@clerk|@auth0"Authentication Integrations
You are an expert in authentication for Vercel-deployed applications — covering Clerk (native Vercel Marketplace integration), Descope, and Auth0.
Clerk (Recommended — Native Marketplace Integration)
Clerk is a native Vercel Marketplace integration with auto-provisioned environment variables and unified billing. Current SDK: `@clerk/nextjs` v7 (Core 3, March 2026).
Install via Marketplace
# Install Clerk from Vercel Marketplace (auto-provisions env vars)
vercel integration add clerk
Auto-provisioned environment variables:
- `CLERK_SECRET_KEY` — server-side API key
- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` — client-side publishable key
SDK Setup
# Install the Clerk Next.js SDK
npm install @clerk/nextjs
Middleware Configuration
// middleware.ts
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: [
// Skip Next.js internals and static files
"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
// Always run for API routes
"/(api|trpc)(.*)",
],
};Protect Routes
// middleware.ts — protect specific routes
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/api(.*)"]);
export default clerkMiddleware(async (auth, req) => {
if (isProtectedRoute(req)) {
await auth.protect();
}
});Frontend API Proxy (Core 3)
Proxy Clerk's Frontend API through your own domain to avoid third-party requests:
// middleware.ts
export default clerkMiddleware({
frontendApiProxy: { enabled: true },
});Provider Setup
// app/layout.tsx
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
);
}Sign-In and Sign-Up Pages
// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn />;
}// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUpRead more
name: auth
description: Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
metadata:
priority: 6
docs:
- "https://authjs.dev/getting-started"
- "https://nextjs.org/docs/app/building-your-application/authentication"
sitemap: "https://authjs.dev/sitemap.xml"
pathPatterns:
- 'middleware.ts'
- 'middleware.js'
- 'src/middleware.ts'
- 'src/middleware.js'
- 'clerk.config.*'
- 'app/sign-in/**'
- 'app/sign-up/**'
- 'src/app/sign-in/**'
- 'src/app/sign-up/**'
- 'app/(auth)/**'
- 'src/app/(auth)/**'
- 'auth.config.*'
- 'auth.ts'
- 'auth.js'
bashPatterns:
- '\bnpm\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@clerk/nextjs\b'
- '\byarn\s+add\s+[^\n]*@clerk/nextjs\b'
- '\bnpm\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@descope/nextjs-sdk\b'
- '\byarn\s+add\s+[^\n]*@descope/nextjs-sdk\b'
- '\bnpm\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\bpnpm\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\bbun\s+(install|i|add)\s+[^\n]*@auth0/nextjs-auth0\b'
- '\byarn\s+add\s+[^\n]*@auth0/nextjs-auth0\b'
validate:
-
pattern: 'VERCEL_CLIENT_(ID|SECRET)|vercel\.com/oauth/(authorize|access_token|token)'
message: 'Hand-rolled Vercel OAuth detected. Use the Sign in with Vercel OIDC provider instead of manual token exchange.'
severity: recommended
skipIfFileContains: 'signInWithVercel|@vercel/auth'
retrieval:
aliases:
- authentication
- login system
- sign in
- auth flow
intents:
- add auth
- protect routes
- manage sessions
- implement login
- secure api endpoints
entities:
- NextAuth
- Auth.js
- JWT
- OAuth
- session
- middleware
- getServerSession
examples:
- add login to my app
- protect this route with auth
- set up NextAuth
chainTo:
-
pattern: 'export\s+(default\s+)?function\s+middleware'
targetSkill: routing-middleware
message: 'Auth logic in middleware.ts — loading Routing Middleware guidance for proxy.ts migration in Next.js 16.'
-
pattern: 'from\s+[''\"](jsonwebtoken)[''"]|require\s*\(\s*[''\"](jsonwebtoken)[''"]|jwt\.sign\s*\('
targetSkill: auth
message: 'Manual JWT handling with jsonwebtoken detected — use Clerk or Auth.js for managed auth with built-in JWT session handling, CSRF protection, and token rotation.'
-
pattern: 'from\s+[''\"](next-auth)[''"]|NextAuthOptions|authOptions\s*:'
targetSkill: auth
message: 'Legacy next-auth (v4) pattern detected — loading auth guidance for Auth.js v5 migration with the new universal auth() helper.'
-
pattern: "from\\s+['\"]@clerk/nextjs['\"]"
targetSkill: auth
message: 'Clerk import detected — loading Auth guidance for Clerk v7 patterns, middleware setup, organization handling, and Vercel Marketplace integration.'
skipIfFileContains: 'clerkMiddleware|ClerkProvider'
-
pattern: "bcrypt|argon2"
targetSkill: auth
message: 'Manual password hashing detected (bcrypt/argon2) — use Clerk or Auth0 for managed authentication with built-in password hashing, rate limiting, and breach detection.'
skipIfFileContains: "@clerk|@auth0"Authentication Integrations
You are an expert in authentication for Vercel-deployed applications — covering Clerk (native Vercel Marketplace integration), Descope, and Auth0.
Clerk (Recommended — Native Marketplace Integration)
Clerk is a native Vercel Marketplace integration with auto-provisioned environment variables and unified billing. Current SDK: `@clerk/nextjs` v7 (Core 3, March 2026).
Install via Marketplace
# Install Clerk from Vercel Marketplace (auto-provisions env vars) vercel integration add clerk
Auto-provisioned environment variables:
- `CLERK_SECRET_KEY` — server-side API key
- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` — client-side publishable key
SDK Setup
# Install the Clerk Next.js SDK npm install @clerk/nextjs
Middleware Configuration
// middleware.ts
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: [
// Skip Next.js internals and static files
"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
// Always run for API routes
"/(api|trpc)(.*)",
],
};Protect Routes
// middleware.ts — protect specific routes
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/api(.*)"]);
export default clerkMiddleware(async (auth, req) => {
if (isProtectedRoute(req)) {
await auth.protect();
}
});Frontend API Proxy (Core 3)
Proxy Clerk's Frontend API through your own domain to avoid third-party requests:
// middleware.ts
export default clerkMiddleware({
frontendApiProxy: { enabled: true },
});Provider Setup
// app/layout.tsx
import { ClerkProvider } from "@clerk/nextjs";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
);
}Sign-In and Sign-Up Pages
// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn />;
}// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUpComprehensive Vercel ecosystem plugin — relational knowledge graph, skills for every major product, specialized agents, and Vercel conventions. Turns any AI agent into a Vercel expert.
Repo: vercel-labs/vercel-plugin
Other skills on vercel.
- /benchmark-agents
Advanced AI agent benchmark scenarios that push Vercel's cutting-edge platform features — Workflow DevKit, AI Gateway, MCP, Chat SDK, Queues, Flags, Sandbox, and multi-agent orchestration. Designed to stress-test skill injection for complex, multi-system builds.
Open skill - /benchmark-e2e
End-to-end benchmark suite for vercel-plugin. Runs realistic projects through skill injection, launches dev servers, verifies everything works, analyzes conversation logs, and produces an improvement report for overnight self-improvement loops.
Open skill - /benchmark-sandbox
Run vercel-plugin eval scenarios in Vercel Sandboxes instead of local WezTerm panels. Provisions ephemeral microVMs with Claude Code + plugin pre-installed, runs benchmark prompts, extracts hook artifacts, and produces coverage reports.
Open skill - /benchmark-testing
Create and launch benchmark test projects to exercise vercel-plugin skill injection across realistic scenarios. Sets up isolated directories, installs the plugin, and spawns WezTerm panes running Claude Code with crafted prompts.
Open skill - /plugin-audit
Audit vercel-plugin performance on real-world projects. Extracts tool calls from Claude Code conversation logs, tests hook matching against actual inputs, identifies pattern coverage gaps, and checks plugin cache staleness. Use when asked to audit, test, or investigate plugin
Open skill - /release
Release vercel-plugin — run gates, bump version, generate artifacts, commit, and push. Use when asked to "release", "ship", "bump and push", or "cut a release".
Open skill

