clerk-auth
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync
Profile →npx skills add sickn33/agentic-awesome-skills --skill clerk-auth --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Implements patterns for Clerk authentication in a Next.js project, covering app router setup, middleware-based route protection, server component access, client hooks, multi-tenancy with organizations, webhook-based user sync, and API route protection.
How it works
- Next.js App Router Setup: Wraps the app with ClerkProvider in the root layout; includes SignIn, SignUp components and a UserButton for session management.
- Middleware Route Protection: Demonstrates a clerkMiddleware usage with createRouteMatcher to protect routes like /dashboard(.), /settings(.), and /api/private(.*); provides a config matcher for various routes and an advanced example that enforces role or permission checks (org:admin, org:premium) on certain paths.
- Server Component Authentication: Uses auth() to obtain userId, orgId, and orgRole for server components; uses currentUser() to fetch full user data when needed; includes examples of redirecting unauthenticated users and filtering by organization.
- Client Component Hooks: Shows useUser, useAuth, useSession, and useOrganization hooks to access user data, sign-out, and organization context within client components.
- Organizations and Multi-Tenancy: Demonstrates how to create and switch organizations, access org-scoped data by filtering queries with orgId from auth(), and a Protect component example for restricting UI to org admins.
- Webhook User Sync: Explains syncing Clerk users via webhooks, verifies requests with svix headers, and handles events user.created, user.updated, and user.deleted to reflect changes in a Prisma-managed database.
- API Route Protection: Uses auth() in App Router route handlers to enforce authentication; returns 401 for unauthorized and fetches projects filtered by organization or user ownership.
When to use it
- When building a Next.js app that requires Clerk-based authentication with clear separation of concerns between app routing, server components, and API routes.
- When multi-tenancy by organization is needed, including org-scoped data access and admin/premium restrictions.
- When you plan to keep your database in sync with Clerk via webhooks.
What it can touch
- Middleware and server components (via @clerk/nextjs/server) to enforce authentication and authorization.
- App Router files (layout, pages) to wire ClerkProvider and auth checks.
- Client components using Clerk hooks (useUser, useAuth, etc.).
- API routes under app/api to enforce authentication at the handler level.
- Webhook endpoints under app/api/webhooks/clerk to process Clerk events and sync Prisma models.
- Prisma models for User and related data structures referenced in examples.
Caveats
- Requires Clerk middleware to be configured for server-side authentication flows.
- Webhook processing assumes SVIX verification and uses environment variable CLERK_WEBHOOK_SECRET; missing secret results in error.
- Anti-patterns highlight the need to avoid placing ClerkProvider inside a page component and to centralize middleware in a single file.
- Some patterns rely on Next.js route matching and may require adaptation for non-Next.js environments.
# Clerk Authentication Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync ## Patterns ### Next.js App Router Setup Complete Clerk setup for Next.js 14/15 App Router. Includes ClerkProvider, environment variables, and basic sign-in/sign-up components. Key components: - ClerkProvider: Wraps app for auth context - <SignIn />, <SignUp />: Pre-built auth forms - <UserButton />: User menu with session management ### Code_example # Environment variables (.env.local) NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding // 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 SignInPage() { return ( <div className="flex justify-center items-center min-h-screen"> <Sign
- Patterns
- Next.js App Router Setup
- Codeexample
- Antipatterns
- References
- Middleware Route Protection
- Server Component Authentication
- Client Component Hooks
- Organizations and Multi-Tenancy
- Webhook User Sync
- API Route Protection
- Sharp Edges
- CVE-2025-29927 Middleware Bypass Vulnerability
- Multiple Middleware Files Cause Conflicts
What does the clerk-auth skill do?
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill clerk-auth --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.