From vercel
Guides Clerk, Descope, and Auth0 authentication setup in Next.js apps. Covers middleware patterns, sign-in/sign-up flows, and Vercel Marketplace provisioning. Use for implementing user auth.
npx claudepluginhub vercel/vercel-plugin --plugin vercel-pluginThis skill uses the workspace's default tool permissions.
You are an expert in authentication for Vercel-deployed applications — covering Clerk (native Vercel Marketplace integration), Descope, and Auth0.
Installs Clerk SDK and configures authentication for Next.js, React, or Express apps. Sets up env vars, ClerkProvider, middleware, and verifies initial auth.
Complete Next.js integration patterns for Clerk authentication with App Router and Pages Router. Use when setting up Clerk in Next.js, configuring authentication middleware, implementing protected routes, setting up server/client components with auth, or when user mentions Clerk Next.js setup, App Router auth, Pages Router auth, or Next.js authentication integration.
Detects app framework (React, Next.js, Vue, Angular, Express, Fastify, React Native), sets up Auth0 account/CLI/app, and routes to SDK-specific authentication workflows.
Share bugs, ideas, or general feedback.
You are an expert in authentication for Vercel-deployed applications — covering Clerk (native Vercel Marketplace integration), Descope, and Auth0.
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 Clerk from Vercel Marketplace (auto-provisions env vars)
vercel integration add clerk
Auto-provisioned environment variables:
CLERK_SECRET_KEY — server-side API keyNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY — client-side publishable key# Install the Clerk Next.js SDK
npm install @clerk/nextjs
// 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)(.*)",
],
};
// 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();
}
});
Proxy Clerk's Frontend API through your own domain to avoid third-party requests:
// middleware.ts
export default clerkMiddleware({
frontendApiProxy: { enabled: true },
});
// 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>
);
}
// 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
// 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>;
}
// 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 is available on the Vercel Marketplace with native integration support.
vercel integration add descope
npm install @descope/nextjs-sdk
// 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"],
});
"use client";
import { Descope } from "@descope/nextjs-sdk";
export default function SignInPage() {
return <Descope flowId="sign-up-or-in" />;
}
Auth0 provides a mature authentication platform with extensive identity provider support.
npm install @auth0/nextjs-auth0
// 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.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).*)",
],
};
// 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>
);
}
| 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 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 synchronousauth.protect() moved — use await auth.protect() directly, not from the return value of auth()clerkClient() is async — use await clerkClient() in middleware handlersauthMiddleware() 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<ClerkProvider> inside <body>, not wrapping <html>satelliteAutoSync option skips handshake redirects when no session cookies existgetToken() now correctly distinguishes signed-out from offline states⤳ skill: marketplace⤳ skill: routing-middleware⤳ skill: env-vars