Auth
- 408 installs
- 241 repo stars
- Updated August 5, 2026
- vercel/vercel-plugin
This is a copy of auth by vercel-labs - installs and ranking accrue to the original listing.
auth is a Vercel Claude Code skill that implements Next.js authentication with Clerk, Descope, and Auth0—including middleware auth patterns, sign-in/sign-up routes, and Vercel Marketplace provisioning—for developers addi
About
auth is a Claude Code skill from vercel/vercel-plugin that guides Next.js authentication integration with Clerk (native Vercel Marketplace), Descope, and Auth0. The skill covers middleware.ts and middleware.js auth patterns, app/sign-in and app/sign-up route structures, clerk.config files, and Marketplace provisioning workflows. Developers invoke auth when implementing user sign-in, protecting routes, or wiring auth providers on Vercel-deployed Next.js apps. Metadata links Auth.js and Next.js authentication docs and matches pathPatterns for middleware and auth route files. Priority 6 ranking signals high relevance during auth implementation tasks.
- auth
Auth by the numbers
- 408 all-time installs (skills.sh)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/vercel/vercel-plugin --skill authAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 408 |
|---|---|
| repo stars | ★ 241 |
| Last updated | August 5, 2026 |
| Repository | vercel/vercel-plugin ↗ |
How do you add authentication to Next.js on Vercel?
Use auth for development tasks
Who is it for?
Next.js developers on Vercel implementing Clerk, Descope, or Auth0 with middleware-based route protection and Marketplace setup.
Skip if: Developers building non-Next.js backends or custom session stores without Clerk, Descope, or Auth0 integration needs.
When should I use this skill?
A Next.js project needs authentication with middleware.ts, sign-in/sign-up flows, or Vercel Marketplace auth provider setup.
What you get
Next.js middleware auth config, sign-in/sign-up routes, and provider Marketplace provisioning
- middleware.ts auth config
- Sign-in and sign-up routes
- Provider Marketplace setup
By the numbers
- Covers 3 auth providers: Clerk, Descope, and Auth0
- Metadata priority rank 6 for auth implementation tasks
Files
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 clerkAuto-provisioned environment variables:
CLERK_SECRET_KEY— server-side API keyNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY— client-side publishable key
SDK Setup
# Install the Clerk Next.js SDK
npm install @clerk/nextjsMiddleware 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-upAccess 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 descopeSDK Setup
npm install @descope/nextjs-sdkProvider 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-auth0Configuration
// 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 ofauth() - `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
dynamicprop 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
Related skills
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kHow it compares
Use auth instead of generic security skills when Next.js on Vercel needs Marketplace-native Clerk or Auth0 middleware integration.
FAQ
Which auth providers does the auth skill cover?
The auth skill covers Clerk with native Vercel Marketplace integration, plus Descope and Auth0 setup for Next.js applications. It documents middleware patterns, sign-in and sign-up flows, and Marketplace provisioning for each provider.
What Next.js files does auth target?
The auth skill matches middleware.ts, middleware.js, clerk.config files, and app/sign-in and app/sign-up route directories under App Router. Developers implement route protection and auth UI following these path patterns on Vercel.
When should developers invoke the auth skill?
Developers invoke auth when implementing user authentication in Next.js—especially middleware-based protection, provider provisioning via Vercel Marketplace, or sign-in and sign-up page scaffolding with Clerk, Descope, or Auth0.