| name | clerk |
| title | Clerk |
| category | Payments & Auth |
| description | Use to add drop-in authentication (sign-in/up, sessions, orgs, user button) to a Next.js/React app and protect server code. |
| tags | ["auth","authentication","sessions","nextjs","organizations","users"] |
| official_docs | https://clerk.com/docs |
| sources | ["https://clerk.com/docs/quickstarts/nextjs","https://clerk.com/docs/references/nextjs/clerk-middleware","https://clerk.com/docs/references/nextjs/read-session-data"] |
| last_verified | 2026-08-10T00:00:00.000Z |
Clerk — Skillship
Drop-in authentication and user management: prebuilt UI components, hosted sign-in/up, sessions,
and organizations, wired into Next.js middleware and server helpers.
🧭 When to use this skill
- Use when: you want auth working in minutes with prebuilt UI (
<SignIn/>, <UserButton/>).
- Use when: you need organizations/teams, roles, or B2B multi-tenant auth.
- Don't use for: cases where you must fully own the auth tables/DB (use Auth.js/Lucia or Supabase Auth).
⚡ Quickstart
1. Scaffold with the CLI (recommended — wires provider, middleware, and env keys)
npx -y clerk@latest init
2. Or set up manually
npm install @clerk/nextjs
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
3. Middleware
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: [
"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
"/(api|trpc)(.*)",
"/__clerk/(.*)",
],
};
4. Wrap the app (ClerkProvider goes INSIDE <body>)
import { ClerkProvider, SignInButton, SignUpButton, Show, UserButton } ;
() {
(
);
}
