Auth

Name: Auth
Author: vercel

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.

Oficial

Estrellas: 263
Actividad: 35
Actualizado: hace 4 meses
Commits: 0
Contexto: 2.8k tok
Paquete: 1 archivo

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add vercel/vercel-plugin --skill auth --agent claude-code

Se instala solo en este repositorio.

Este skill makes network requests, reads environment config.

SKILL.md

En inglés

conClaude ChatGPT Perplexity

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 <SignUp />;
}

Add routing env vars to .env.local:

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Access User Data

// Server component
import { currentUser } from "@clerk/nextjs/server";

export default async function Page() {
  const user = await currentUser();
  return <p>Hello, {user?.firstName}</p>;
}

// Client component
"use client";
import { useUser } from "@clerk/nextjs";

export default function UserGreeting() {
  const { user, isLoaded } = useUser();
  if (!isLoaded) return null;
  return <p>Hello, {user?.firstName}</p>;
}

API Route Protection

// 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

vercel integration add descope

SDK Setup

npm install @descope/nextjs-sdk

Provider and Middleware

// app/layout.tsx
import { AuthProvider } from "@descope/nextjs-sdk";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthProvider projectId={process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID!}>
      <html lang="en">
        <body>{children}</body>
      </html>
    </AuthProvider>
  );
}

// middleware.ts
import { authMiddleware } from "@descope/nextjs-sdk/server";

export default authMiddleware({
  projectId: process.env.DESCOPE_PROJECT_ID!,
  publicRoutes: ["/", "/sign-in"],
});

Sign-In Flow

"use client";
import { Descope } from "@descope/nextjs-sdk";

export default function SignInPage() {
  return <Descope flowId="sign-up-or-in" />;
}

Auth0

Auth0 provides a mature authentication platform with extensive identity provider support.

SDK Setup

npm install @auth0/nextjs-auth0

Configuration

// lib/auth0.ts
import { Auth0Client } from "@auth0/nextjs-auth0/server";

export const auth0 = new Auth0Client();

Required environment variables:

AUTH0_SECRET=<random-secret>
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=<client-id>
AUTH0_CLIENT_SECRET=<client-secret>

Middleware

// 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

// Server component
import { auth0 } from "@/lib/auth0";

export default async function Page() {
  const session = await auth0.getSession();
  return session ? (
    <p>Hello, {session.user.name}</p>
  ) : (
    <a href="/auth/login">Log in</a>
  );
}

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 `<SignIn />`, `<UserButton />`
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 <ClerkProvider> inside <body>, not wrapping <html>
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

Reproducido de vercel/vercel-plugin bajo licencia NOASSERTION. Leer esta página en markdown.

Archivos

1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

SKILL.md11 KB

Antes de instalar

Necesita en el PATH:npm

Variables de entorno:DESCOPE_PROJECT_IDNEXT_PUBLIC_DESCOPE_PROJECT_ID

Detalles

Creador: vercel
Categoría: Documentos
Licencia: NOASSERTION
Recursos incluidos: Solo SKILL.md
Repositorio: vercel/vercel-plugin
Código fuente: Ver SKILL.md

Más de vercel/vercel-plugin

Este repo incluye 43 skills. Si instalas uno, normalmente ya tienes los demás.

Knowledge Update

263

Corrects outdated LLM knowledge about the Vercel platform and introduces new products. Injected at session start.

Costo de contexto al activarse: 1.8k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 14 días

Oficialbases de datos

Vercel Connect

263

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.

Costo de contexto al activarse: 4.8k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 14 días

Oficialdesarrollo apis

Cdn Caching

263

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.

Costo de contexto al activarse: 5.2k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 21 días

Oficialdevops infraestructura

Vercel Functions

263

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.

Costo de contexto al activarse: 5.6k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 13 días

Oficialherramientas desarrollo

Create A Backend

263

Backend architecture guidance. Use when planning, building, or migrating an API or backend; choosing between Functions, Services, containers, Workflow, Queues, and Marketplace databases; or selecting a supported backend framework or runtime.

Costo de contexto al activarse: 1.5k tok
Tamaño del paquete: 2 archivos
Última actualización: hace 5 días

Oficialdevops infraestructura

Eve

263

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.

Costo de contexto al activarse: 1.5k tok
Tamaño del paquete: 3 archivos
Última actualización: hace 14 días

Oficialherramientas desarrollo

Skills relacionados

Access Protected Vercel Deployment

263

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection. Use when curl, agent-browser, Playwright, or another automated request reaches a Vercel login or protection page; when a protected preview or production URL returns 401 or 403; when TRUSTED_SOURCES_ENVIRONMENT_MISMATCH appears; or when choosing between `vercel curl` and the `x-vercel-trusted-oidc-idp-token` header.

Costo de contexto al activarse: 1.9k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 25 días

Oficialherramientas desarrollo

Ai Gateway

263

Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.

Costo de contexto al activarse: 5.9k tok
Tamaño del paquete: 1 archivo
Última actualización: hace 4 meses

Oficialherramientas desarrollo

Ai Sdk

263

Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.

Costo de contexto al activarse: 5k tok
Tamaño del paquete: 11 archivos
Última actualización: hace 13 días

Oficialherramientas desarrollo

Auth

Instalar

SKILL.md

Authentication Integrations

Clerk (Recommended — Native Marketplace Integration)

Install via Marketplace

SDK Setup

Middleware Configuration

Protect Routes

Frontend API Proxy (Core 3)

Provider Setup

Sign-In and Sign-Up Pages

Access User Data

API Route Protection

Descope

Install via Marketplace

SDK Setup

Provider and Middleware

Sign-In Flow

Auth0

SDK Setup

Configuration

Middleware

Access Session Data

Decision Matrix

Clerk Core 3 Breaking Changes (March 2026)

Cross-References

Official Documentation

Archivos

Antes de instalar

Detalles

Etiquetas

Más de vercel/vercel-plugin

Skills relacionados