Auth
- 1.2k installs
- 229 repo stars
- Updated July 27, 2026
- vercel-labs/vercel-plugin
auth is an agent skill for authentication integration guidance — clerk (native vercel marketplace), descope, and auth0 setup for next.js applications. covers middleware auth patterns, sign-in/sign-up.
About
The auth skill is designed for authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up. 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. Invoke when the user implementing user authentication.
- CLERK_SECRET_KEY — server-side API key.
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY — client-side publishable key.
- 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.
Auth by the numbers
- 1,179 all-time installs (skills.sh)
- Ranked #325 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
auth capabilities & compatibility
- Capabilities
- clerk_secret_key — server side api key · next_public_clerk_publishable_key — client side · auth() is async — always use const { userid } = · auth.protect() moved — use await auth.protect()
What auth says it does
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows,
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sig
npx skills add https://github.com/vercel-labs/vercel-plugin --skill authAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.2k |
|---|---|
| repo stars | ★ 229 |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | vercel-labs/vercel-plugin ↗ |
How do I authentication integration guidance — clerk (native vercel marketplace), descope, and auth0 setup for next.js applications. covers middleware auth patterns, sign-in/sign-up?
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up.
Who is it for?
Developers using auth workflows documented in SKILL.md.
Skip if: Skip when the task falls outside auth scope or needs a different stack.
When should I use this skill?
User implementing user authentication.
What you get
Completed auth workflow with documented commands, files, and expected deliverables.
- middleware auth configuration
- sign-in and sign-up route scaffolding
- provider integration setup
By the numbers
- Metadata priority 6 in vercel-plugin manifest
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
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kForks & variants (2)
Auth has 2 known copies in the catalog totaling 410 installs. They canonicalize to this original listing.
How it compares
Use auth for hosted identity providers on Next.js/Vercel; roll custom auth only when provider constraints or compliance rules block Clerk, Descope, or Auth0.
FAQ
What does auth do?
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up.
When should I use auth?
User implementing user authentication.
Is auth safe to install?
Review the Security Audits panel on this page before installing in production.