Auth
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…
Install
Quick install
npx skills add https://github.com/vercel-labs/vercel-plugin/tree/HEAD/skills/auth
Or pick agent:
npx skills add vercel-labs/vercel-plugin --skill auth --agent claude-codenpx skills add vercel-labs/vercel-plugin --skill auth --agent cursornpx skills add vercel-labs/vercel-plugin --skill auth --agent codexnpx skills add vercel-labs/vercel-plugin --skill auth --agent opencodenpx skills add vercel-labs/vercel-plugin --skill auth --agent github-copilotnpx skills add vercel-labs/vercel-plugin --skill auth --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add vercel-labs/vercel-plugin --skill authManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/vercel-labs/vercel-plugin.gitcp -r vercel-plugin/skills/auth ~/.claude/skills/
How to use: Once installed, ask your agent to "use the auth skill" or describe what you want (e.g. "Authentication integration guidance — Clerk (native Vercel Marketplace), Descope"). Requires Node.js 18+.
auth
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…
authby vercel
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…npx skills add https://github.com/vercel-labs/vercel-plugin --skill authDownload ZIPGitHub
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
NeedRecommendedWhyFastest setup on VercelClerkNative Marketplace, auto-provisioned env varsPasswordless / social login flowsDescopeVisual flow builder, Marketplace nativeEnterprise SSO / SAML / multi-tenantAuth0Deep enterprise identity supportPre-built UI componentsClerkDrop-in <SignIn />, <UserButton />Vercel unified billingClerk or DescopeBoth 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 useconst { userId } = await auth(), not synchronous
auth.protect()moved — useawait auth.protect()directly, not from the return value ofauth()
clerkClient()is async — useawait clerkClient()in middleware handlers
authMiddleware()removed — migrate toclerkMiddleware()
@clerk/typesdeprecated — import types from SDK subpath exports:import type { UserResource } from '@clerk/react/types'(works from any SDK package)
ClerkProviderno longer forces dynamic rendering — pass thedynamicprop if needed
- Cache components — when using Next.js cache components, place
<ClerkProvider>inside<body>, not wrapping<html>
- Satellite domains — new
satelliteAutoSyncoption 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
- Clerk Next.js Quickstart
- Descope Next.js SDK
- Auth0 Next.js SDK
More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPythonai module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
Source: https://github.com/vercel-labs/vercel-plugin/tree/HEAD/skills/auth
Author: vercel
Discovered via: mcpservers.org
SKILL.md source
---
name: auth
description: Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…
---
# auth
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…
# authby vercel
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…
`npx skills add https://github.com/vercel-labs/vercel-plugin --skill auth`Download ZIPGitHub
## 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
NeedRecommendedWhyFastest setup on VercelClerkNative Marketplace, auto-provisioned env varsPasswordless / social login flowsDescopeVisual flow builder, Marketplace nativeEnterprise SSO / SAML / multi-tenantAuth0Deep enterprise identity supportPre-built UI componentsClerkDrop-in `<SignIn />`, `<UserButton />`Vercel unified billingClerk or DescopeBoth 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
* Clerk + Vercel Marketplace
* Clerk Next.js Quickstart
* Descope Next.js SDK
* Auth0 Next.js SDK
## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
**Source**: https://github.com/vercel-labs/vercel-plugin/tree/HEAD/skills/auth
**Author**: vercel
**Discovered via**: mcpservers.org
Related skills 6
caveman
★ Featured
Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
Development
secure-linux-web-hosting
★ Featured
Use when setting up, hardening, or reviewing a cloud server for self-hosting, including DNS, SSH, firewalls, Nginx, static-site hosting, reverse-proxying an app, HTTPS with Let's Encrypt or ACME clients, safe HTTP-to-HTTPS redirects, or optional post-launch network tuning such as BBR.
Development
readme-i18n
★ Featured
Use when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized README variants in a GitHub-style repository.
Development
lark-shared
★ Featured
Use when first setting up lark-cli, running auth login, switching user/bot identity (--as), handling permission denied or scope errors, needing to update lark-cli, or seeing _notice in JSON output.
Development
improve-codebase-architecture
★ Featured
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
Development
paper-context-resolver
★ Featured
Optional RigorPilot helper for README-first deep learning repo reproduction. Use only when the README and repository files leave a narrow reproduction-critical gap and the task is to resolve a specific paper detail such as dataset split, preprocessing, evaluation protocol, checkpoint mapping, or runtime assumption from primary paper sources while recording conflicts. Do not use for general paper summary, repo scanning, environment setup, command execution, title-only paper lookup, or replacin...
Development