# 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. Fuente: https://skillsagentes.com/skills/vercel/vercel-plugin/auth Markdown: https://skillsagentes.com/skills/vercel/vercel-plugin/auth.md Repositorio: https://github.com/vercel/vercel-plugin Autor: vercel Licencia: NOASSERTION Actualizado: hace 4 meses Coste de contexto: 64 tok instalada, 2.8k tok al activarse, 2.8k tok con todos los archivos del bundle Bundle: 1 archivo, 11 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add vercel/vercel-plugin --skill auth --agent claude-code # Cursor npx -y skills add vercel/vercel-plugin --skill auth --agent cursor # Codex npx -y skills add vercel/vercel-plugin --skill auth --agent codex # Gemini CLI npx -y skills add vercel/vercel-plugin --skill auth --agent gemini # Windsurf npx -y skills add vercel/vercel-plugin --skill auth --agent windsurf # Cline npx -y skills add vercel/vercel-plugin --skill auth --agent cline ``` ## Antes de instalar - Necesita en el PATH: npm - Variables de entorno: DESCOPE_PROJECT_ID, NEXT_PUBLIC_DESCOPE_PROJECT_ID - makes network requests - reads environment config ## Archivos - SKILL.md — 11 KB ## SKILL.md Reproducido tal cual desde vercel/vercel-plugin bajo NOASSERTION. Esta sección es el documento original y está en inglés. # 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 ```bash # 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 ```bash # Install the Clerk Next.js SDK npm install @clerk/nextjs ``` ### Middleware Configuration ```ts // 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 ```ts // 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: ```ts // middleware.ts export default clerkMiddleware({ frontendApiProxy: { enabled: true }, }); ``` ### Provider Setup ```tsx // app/layout.tsx import { ClerkProvider } from "@clerk/nextjs"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### Sign-In and Sign-Up Pages ```tsx // app/sign-in/[[...sign-in]]/page.tsx import { SignIn } from "@clerk/nextjs"; export default function Page() { return ; } ``` ```tsx // app/sign-up/[[...sign-up]]/page.tsx import { SignUp } from "@clerk/nextjs"; export default function Page() { return ; } ``` Add routing env vars to `.env.local`: ```env NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up ``` ### Access User Data ```tsx // Server component import { currentUser } from "@clerk/nextjs/server"; export default async function Page() { const user = await currentUser(); return

Hello, {user?.firstName}

; } ``` ```tsx // Client component "use client"; import { useUser } from "@clerk/nextjs"; export default function UserGreeting() { const { user, isLoaded } = useUser(); if (!isLoaded) return null; return

Hello, {user?.firstName}

; } ``` ### API Route Protection ```ts // app/api/protected/route.ts import { auth } from "@clerk/nextjs/server"; export async function GET() { const { userId } = await auth(); if (!userId) { return Response.json({ error: "Unauthorized" }, { status: 401 }); } return Response.json({ userId }); } ``` ## Descope Descope is available on the Vercel Marketplace with native integration support. ### Install via Marketplace ```bash vercel integration add descope ``` ### SDK Setup ```bash npm install @descope/nextjs-sdk ``` ### Provider and Middleware ```tsx // app/layout.tsx import { AuthProvider } from "@descope/nextjs-sdk"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ```ts // middleware.ts import { authMiddleware } from "@descope/nextjs-sdk/server"; export default authMiddleware({ projectId: process.env.DESCOPE_PROJECT_ID!, publicRoutes: ["/", "/sign-in"], }); ``` ### Sign-In Flow ```tsx "use client"; import { Descope } from "@descope/nextjs-sdk"; export default function SignInPage() { return ; } ``` ## Auth0 Auth0 provides a mature authentication platform with extensive identity provider support. ### SDK Setup ```bash npm install @auth0/nextjs-auth0 ``` ### Configuration ```ts // lib/auth0.ts import { Auth0Client } from "@auth0/nextjs-auth0/server"; export const auth0 = new Auth0Client(); ``` Required environment variables: ```env AUTH0_SECRET= AUTH0_BASE_URL=http://localhost:3000 AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com AUTH0_CLIENT_ID= AUTH0_CLIENT_SECRET= ``` ### Middleware ```ts // middleware.ts import { auth0 } from "@/lib/auth0"; import { NextRequest, NextResponse } from "next/server"; export async function middleware(request: NextRequest) { return await auth0.middleware(request); } export const config = { matcher: [ "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)", ], }; ``` ### Access Session Data ```tsx // Server component import { auth0 } from "@/lib/auth0"; export default async function Page() { const session = await auth0.getSession(); return session ? (

Hello, {session.user.name}

) : ( Log in ); } ``` ## Decision Matrix | Need | Recommended | Why | |------|------------|-----| | Fastest setup on Vercel | Clerk | Native Marketplace, auto-provisioned env vars | | Passwordless / social login flows | Descope | Visual flow builder, Marketplace native | | Enterprise SSO / SAML / multi-tenant | Auth0 | Deep enterprise identity support | | Pre-built UI components | Clerk | Drop-in ``, `` | | Vercel unified billing | Clerk or Descope | Both are native Marketplace integrations | ## Clerk Core 3 Breaking Changes (March 2026) Clerk provides an upgrade CLI that scans your codebase and applies codemods: `npx @clerk/upgrade`. Requires **Node.js 20.9.0+**. - **`auth()` is async** — always use `const { userId } = await auth()`, not synchronous - **`auth.protect()` moved** — use `await auth.protect()` directly, not from the return value of `auth()` - **`clerkClient()` is async** — use `await clerkClient()` in middleware handlers - **`authMiddleware()` removed** — migrate to `clerkMiddleware()` - **`@clerk/types` deprecated** — import types from SDK subpath exports: `import type { UserResource } from '@clerk/react/types'` (works from any SDK package) - **`ClerkProvider` no longer forces dynamic rendering** — pass the `dynamic` prop if needed - **Cache components** — when using Next.js cache components, place `` inside ``, not wrapping `` - **Satellite domains** — new `satelliteAutoSync` option skips handshake redirects when no session cookies exist - **Smaller bundles** — React is now shared across framework SDKs (~50KB gzipped savings) - **Better offline handling** — `getToken()` now correctly distinguishes signed-out from offline states ## Cross-References - **Marketplace install and env var provisioning** → `⤳ skill: marketplace` - **Middleware routing patterns** → `⤳ skill: routing-middleware` - **Environment variable management** → `⤳ skill: env-vars` ## Official Documentation - [Clerk + Vercel Marketplace](https://clerk.com/docs/deployments/vercel) - [Clerk Next.js Quickstart](https://clerk.com/docs/quickstarts/nextjs) - [Descope Next.js SDK](https://docs.descope.com/getting-started/nextjs) - [Auth0 Next.js SDK](https://auth0.com/docs/quickstart/webapp/nextjs) ## Dónde encaja - Categoría: [Documentos](https://skillsagentes.com/categorias/documentos.md) — Lee, escribe y transforma archivos PDF, DOCX, XLSX y PPTX. - Creador: [vercel](https://skillsagentes.com/creators/vercel.md) — 79 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Knowledge Update](https://skillsagentes.com/skills/vercel/vercel-plugin/knowledge-update.md): Corrects outdated LLM knowledge about the Vercel platform and introduces new products. Injected at session start. - [Vercel Connect](https://skillsagentes.com/skills/vercel/vercel-plugin/vercel-connect.md): Vercel Connect expert guidance — securely obtain scoped OAuth tokens for third-party services (Slack, GitHub, MCP servers, OAuth, Snowflake) on behalf of apps or users via Vercel OIDC. Use when wiring up third-party API access, connecting to MCP servers, sending Slack messages, accessing GitHub APIs, receiving webhook events from Slack/Linear/GitHub and forwarding them to your agents and apps, or building eve agent connections. - [Vercel Functions](https://skillsagentes.com/skills/vercel/vercel-plugin/vercel-functions.md): Vercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring, debugging, or optimizing server-side code running on Vercel. - [Cdn Caching](https://skillsagentes.com/skills/vercel/vercel-plugin/cdn-caching.md): Debug Vercel CDN caching — cache hit rate, stale content, revalidation behavior, ISR + PPR, per-request cache reasons (cacheReason) and PPR state (ppr_state), and costs. - [Eve](https://skillsagentes.com/skills/vercel/vercel-plugin/eve.md): eve framework guidance for durable AI agents and agent-powered applications. Use when creating, editing, or debugging an eve project, when the user explicitly asks for eve, or when the build-agents skill has selected eve as the default framework. Covers eve's filesystem-first runtime, durable sessions, tools, skills, connections, channels, sandboxes, subagents, schedules, evals, frontend clients, and Agent Runs observability. Do not use for incidental agent mentions, generic agent-building prompts, or established non-eve stacks unless the user asks for comparison or migration. ## Skills relacionadas - [Benchmark Agents](https://skillsagentes.com/skills/vercel/vercel-plugin/benchmark-agents.md): Advanced AI agent benchmark scenarios that push Vercel's cutting-edge platform features — Workflow SDK, AI Gateway, MCP, Chat SDK, Queues, Flags, Sandbox, and multi-agent orchestration. Designed to stress-test skill injection for complex, multi-system builds. - [Benchmark E2e](https://skillsagentes.com/skills/vercel/vercel-plugin/benchmark-e2e.md): 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. - [Benchmark Sandbox](https://skillsagentes.com/skills/vercel/vercel-plugin/benchmark-sandbox.md): 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. - [Benchmark Testing](https://skillsagentes.com/skills/vercel/vercel-plugin/benchmark-testing.md): 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. - [Plugin Audit](https://skillsagentes.com/skills/vercel/vercel-plugin/plugin-audit.md): 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 skill injection on a real project. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)