Clerk Authentication

This gives Claude the context it needs to implement Clerk authentication properly in Next.js apps, with actual code patterns instead of hand-waving. It covers the full stack: middleware setup with route matchers, server components using auth() and currentUser(), client hooks like useUser and useAuth, and critically, how to protect server actions individually. The defense-in-depth approach is good, it emphasizes validating auth at every data access point rather than trusting middleware alone. You also get role-based access patterns, organization support, and JWT handling for external APIs. If you're building anything with user accounts in Next.js, this prevents the common mistakes around assuming middleware protection is enough.

skills.sh installs: 707
GitHub stars: 302
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mindrally/skills --skill clerk-authentication --agent claude-code

Installs into .claude/skills of the current project.

Files

Clerk Authentication

You are an expert in Clerk authentication implementation for Next.js applications. Follow these guidelines when integrating Clerk.

Core Principles

Implement defense-in-depth with multiple authentication layers
Verify authentication at every data access point, not just middleware
Protect server actions individually
Use Clerk's built-in security features (HttpOnly cookies, CSRF protection)

Installation and Setup

npm install @clerk/nextjs

Environment Variables

# Required
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

# Optional: Custom URLs
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=/dashboard

Provider Setup

App Router (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>
  );
}