Update to Vercel

{
  "name": "auth",
  "description": "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.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 170
    }
  ],
  "skill_md_contents": "---\nname: auth\ndescription: 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.\nmetadata:\n  priority: 6\n  docs:\n    - \"https://authjs.dev/getting-started\"\n    - \"https://nextjs.org/docs/app/building-your-application/authentication\"\n  sitemap: \"https://authjs.dev/sitemap.xml\"\n  pathPatterns:\n    - 'middleware.ts'\n    - 'middleware.js'\n    - 'src/middleware.ts'\n    - 'src/middleware.js'\n    - 'clerk.config.*'\n    - 'app/sign-in/**'\n    - 'app/sign-up/**'\n    - 'src/app/sign-in/**'\n    - 'src/app/sign-up/**'\n    - 'app/(auth)/**'\n    - 'src/app/(auth)/**'\n    - 'auth.config.*'\n    - 'auth.ts'\n    - 'auth.js'\n  bashPatterns:\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@clerk/nextjs\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@clerk/nextjs\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@clerk/nextjs\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@clerk/nextjs\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@descope/nextjs-sdk\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@descope/nextjs-sdk\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@descope/nextjs-sdk\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@descope/nextjs-sdk\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@auth0/nextjs-auth0\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@auth0/nextjs-auth0\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@auth0/nextjs-auth0\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@auth0/nextjs-auth0\\b'\n---\n\n# Authentication Integrations\n\nYou are an expert in authentication for Vercel-deployed applications — covering Clerk (native Vercel Marketplace integration), Descope, and Auth0.\n\n## Clerk (Recommended — Native Marketplace Integration)\n\nClerk is a native Vercel Marketplace integration with auto-provisioned environment variables and unified billing. Current SDK: `@clerk/nextjs` v7 (Core 3, March 2026).\n\n### Install via Marketplace\n\n```bash\n# Install Clerk from Vercel Marketplace (auto-provisions env vars)\nvercel integration add clerk\n```\n\nAuto-provisioned environment variables:\n- `CLERK_SECRET_KEY` — server-side API key\n- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` — client-side publishable key\n\n### SDK Setup\n\n```bash\n# Install the Clerk Next.js SDK\nnpm install @clerk/nextjs\n```\n\n### Middleware Configuration\n\n```ts\n// middleware.ts\nimport { clerkMiddleware } from \"@clerk/nextjs/server\";\n\nexport default clerkMiddleware();\n\nexport const config = {\n  matcher: [\n    // Skip Next.js internals and static files\n    \"/((?!_next|[^?]*\\\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)\",\n    // Always run for API routes\n    \"/(api|trpc)(.*)\",\n  ],\n};\n```\n\n### Protect Routes\n\n```ts\n// middleware.ts — protect specific routes\nimport { clerkMiddleware, createRouteMatcher } from \"@clerk/nextjs/server\";\n\nconst isProtectedRoute = createRouteMatcher([\"/dashboard(.*)\", \"/api(.*)\"]);\n\nexport default clerkMiddleware(async (auth, req) => {\n  if (isProtectedRoute(req)) {\n    await auth.protect();\n  }\n});\n```\n\n### Frontend API Proxy (Core 3)\n\nProxy Clerk's Frontend API through your own domain to avoid third-party requests:\n\n```ts\n// middleware.ts\nexport default clerkMiddleware({\n  frontendApiProxy: { enabled: true },\n});\n```\n\n### Provider Setup\n\n```tsx\n// app/layout.tsx\nimport { ClerkProvider } from \"@clerk/nextjs\";\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <ClerkProvider>\n      <html lang=\"en\">\n        <body>{children}</body>\n      </html>\n    </ClerkProvider>\n  );\n}\n```\n\n### Sign-In and Sign-Up Pages\n\n```tsx\n// app/sign-in/[[...sign-in]]/page.tsx\nimport { SignIn } from \"@clerk/nextjs\";\n\nexport default function Page() {\n  return <SignIn />;\n}\n```\n\n```tsx\n// app/sign-up/[[...sign-up]]/page.tsx\nimport { SignUp } from \"@clerk/nextjs\";\n\nexport default function Page() {\n  return <SignUp />;\n}\n```\n\nAdd routing env vars to `.env.local`:\n\n```env\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\n```\n\n### Access User Data\n\n```tsx\n// Server component\nimport { currentUser } from \"@clerk/nextjs/server\";\n\nexport default async function Page() {\n  const user = await currentUser();\n  return <p>Hello, {user?.firstName}</p>;\n}\n```\n\n```tsx\n// Client component\n\"use client\";\nimport { useUser } from \"@clerk/nextjs\";\n\nexport default function UserGreeting() {\n  const { user, isLoaded } = useUser();\n  if (!isLoaded) return null;\n  return <p>Hello, {user?.firstName}</p>;\n}\n```\n\n### API Route Protection\n\n```ts\n// app/api/protected/route.ts\nimport { auth } from \"@clerk/nextjs/server\";\n\nexport async function GET() {\n  const { userId } = await auth();\n  if (!userId) {\n    return Response.json({ error: \"Unauthorized\" }, { status: 401 });\n  }\n  return Response.json({ userId });\n}\n```\n\n## Descope\n\nDescope is available on the Vercel Marketplace with native integration support.\n\n### Install via Marketplace\n\n```bash\nvercel integration add descope\n```\n\n### SDK Setup\n\n```bash\nnpm install @descope/nextjs-sdk\n```\n\n### Provider and Middleware\n\n```tsx\n// app/layout.tsx\nimport { AuthProvider } from \"@descope/nextjs-sdk\";\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <AuthProvider projectId={process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID!}>\n      <html lang=\"en\">\n        <body>{children}</body>\n      </html>\n    </AuthProvider>\n  );\n}\n```\n\n```ts\n// middleware.ts\nimport { authMiddleware } from \"@descope/nextjs-sdk/server\";\n\nexport default authMiddleware({\n  projectId: process.env.DESCOPE_PROJECT_ID!,\n  publicRoutes: [\"/\", \"/sign-in\"],\n});\n```\n\n### Sign-In Flow\n\n```tsx\n\"use client\";\nimport { Descope } from \"@descope/nextjs-sdk\";\n\nexport default function SignInPage() {\n  return <Descope flowId=\"sign-up-or-in\" />;\n}\n```\n\n## Auth0\n\nAuth0 provides a mature authentication platform with extensive identity provider support.\n\n### SDK Setup\n\n```bash\nnpm install @auth0/nextjs-auth0\n```\n\n### Configuration\n\n```ts\n// lib/auth0.ts\nimport { Auth0Client } from \"@auth0/nextjs-auth0/server\";\n\nexport const auth0 = new Auth0Client();\n```\n\nRequired environment variables:\n\n```env\nAUTH0_SECRET=<random-secret>\nAUTH0_BASE_URL=http://localhost:3000\nAUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com\nAUTH0_CLIENT_ID=<client-id>\nAUTH0_CLIENT_SECRET=<client-secret>\n```\n\n### Middleware\n\n```ts\n// middleware.ts\nimport { auth0 } from \"@/lib/auth0\";\nimport { NextRequest, NextResponse } from \"next/server\";\n\nexport async function middleware(request: NextRequest) {\n  return await auth0.middleware(request);\n}\n\nexport const config = {\n  matcher: [\n    \"/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)\",\n  ],\n};\n```\n\n### Access Session Data\n\n```tsx\n// Server component\nimport { auth0 } from \"@/lib/auth0\";\n\nexport default async function Page() {\n  const session = await auth0.getSession();\n  return session ? (\n    <p>Hello, {session.user.name}</p>\n  ) : (\n    <a href=\"/auth/login\">Log in</a>\n  );\n}\n```\n\n## Decision Matrix\n\n| Need | Recommended | Why |\n|------|------------|-----|\n| Fastest setup on Vercel | Clerk | Native Marketplace, auto-provisioned env vars |\n| Passwordless / social login flows | Descope | Visual flow builder, Marketplace native |\n| Enterprise SSO / SAML / multi-tenant | Auth0 | Deep enterprise identity support |\n| Pre-built UI components | Clerk | Drop-in `<SignIn />`, `<UserButton />` |\n| Vercel unified billing | Clerk or Descope | Both are native Marketplace integrations |\n\n## Clerk Core 3 Breaking Changes (March 2026)\n\nClerk provides an upgrade CLI that scans your codebase and applies codemods: `npx @clerk/upgrade`. Requires **Node.js 20.9.0+**.\n\n- **`auth()` is async** — always use `const { userId } = await auth()`, not synchronous\n- **`auth.protect()` moved** — use `await auth.protect()` directly, not from the return value of `auth()`\n- **`clerkClient()` is async** — use `await clerkClient()` in middleware handlers\n- **`authMiddleware()` removed** — migrate to `clerkMiddleware()`\n- **`@clerk/types` deprecated** — import types from SDK subpath exports: `import type { UserResource } from '@clerk/react/types'` (works from any SDK package)\n- **`ClerkProvider` no longer forces dynamic rendering** — pass the `dynamic` prop if needed\n- **Cache components** — when using Next.js cache components, place `<ClerkProvider>` inside `<body>`, not wrapping `<html>`\n- **Satellite domains** — new `satelliteAutoSync` option skips handshake redirects when no session cookies exist\n- **Smaller bundles** — React is now shared across framework SDKs (~50KB gzipped savings)\n- **Better offline handling** — `getToken()` now correctly distinguishes signed-out from offline states\n\n## Cross-References\n\n- **Marketplace install and env var provisioning** → `⤳ skill: marketplace`\n- **Middleware routing patterns** → `⤳ skill: routing-middleware`\n- **Environment variable management** → `⤳ skill: env-vars`\n- **Vercel OAuth (Sign in with Vercel)** → `⤳ skill: sign-in-with-vercel`\n\n## Official Documentation\n\n- [Clerk + Vercel Marketplace](https://clerk.com/docs/deployments/vercel)\n- [Clerk Next.js Quickstart](https://clerk.com/docs/quickstarts/nextjs)\n- [Descope Next.js SDK](https://docs.descope.com/getting-started/nextjs)\n- [Auth0 Next.js SDK](https://auth0.com/docs/quickstart/webapp/nextjs)\n"
}