Add Clerk authentication to an existing React or Next.js project.
Adds Clerk authentication to React or Next.js projects with provider setup, environment configuration, and middleware.
/plugin marketplace add jezweb/claude-skills/plugin install jezweb-clerk-auth-skills-clerk-auth@jezweb/claude-skillsAdd Clerk authentication to an existing React or Next.js project.
Follow these steps to configure Clerk authentication.
Verify the project has:
For React + Vite:
npm install @clerk/clerk-react
For Next.js:
npm install @clerk/nextjs
From Clerk Dashboard (dashboard.clerk.com):
CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEYFor React (.env.local):
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
For Next.js (.env.local):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
For React (src/main.tsx):
import { ClerkProvider } from '@clerk/clerk-react';
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
if (!PUBLISHABLE_KEY) {
throw new Error('Missing Clerk Publishable Key');
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<App />
</ClerkProvider>
</React.StrictMode>
);
For Next.js (src/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>
);
}
Create src/middleware.ts (Next.js 15) or src/proxy.ts (Next.js 16):
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
const isPublicRoute = createRouteMatcher([
'/',
'/sign-in(.*)',
'/sign-up(.*)',
'/api/public(.*)',
]);
export default clerkMiddleware(async (auth, request) => {
if (!isPublicRoute(request)) {
await auth.protect();
}
});
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};
For React (using Clerk components):
// src/pages/sign-in.tsx
import { SignIn } from '@clerk/clerk-react';
export default function SignInPage() {
return <SignIn routing="path" path="/sign-in" />;
}
// src/pages/sign-up.tsx
import { SignUp } from '@clerk/clerk-react';
export default function SignUpPage() {
return <SignUp routing="path" path="/sign-up" />;
}
For Next.js:
# Creates src/app/sign-in/[[...sign-in]]/page.tsx
# Creates src/app/sign-up/[[...sign-up]]/page.tsx
import { UserButton, SignedIn, SignedOut, SignInButton } from '@clerk/clerk-react';
function Header() {
return (
<header>
<SignedIn>
<UserButton afterSignOutUrl="/" />
</SignedIn>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
</header>
);
}
Set Redirect URLs:
/sign-in/sign-up/dashboard/dashboardEnable desired auth methods (Email, Google, GitHub, etc.)
ā
Clerk authentication configured!
š Added:
- ClerkProvider in app entry
- Middleware for protected routes (Next.js)
- Environment variables
š Auth Components:
<SignIn /> - Full sign-in page
<SignUp /> - Full sign-up page
<UserButton /> - User avatar + menu
<SignInButton /> - Sign-in trigger
<SignedIn /> - Render when authenticated
<SignedOut /> - Render when not authenticated
šŖ Hooks:
useUser() - Get current user
useAuth() - Get auth state
useClerk() - Full Clerk instance
š Skill loaded: clerk-auth
- API version 2025-04-10 (v2 tokens)
- JWT template configuration
- Custom claims support
Clerk deprecated JWT v1 tokens on April 14, 2025. Ensure you're using:
@clerk/nextjs@6.x or @clerk/clerk-react@5.x2025-04-10 or later