clerk-install-auth
Configures Clerk SDK, environment variables, and authentication middleware for various web frameworks.
Install
mkdir -p .claude/skills/clerk-install-auth && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7625" && unzip -o skill.zip -d .claude/skills/clerk-install-auth && rm skill.zipInstalls to .claude/skills/clerk-install-auth
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Install and configure Clerk SDK/CLI authentication.Key capabilities
- →Install Clerk SDK for Next.js, React, or Express
- →Configure Clerk environment variables for publishable and secret keys
- →Add ClerkProvider to wrap application layouts
- →Implement Clerk middleware for route protection
- →Verify Clerk connection and authentication status
How it works
This skill guides the installation of Clerk SDKs and the configuration of environment variables, ClerkProvider, and middleware to secure applications. It sets up initial authentication verification.
Inputs & outputs
When to use clerk-install-auth
- →Integrate Clerk in a Next.js project
- →Configure Clerk environment keys
- →Set up auth middleware for Express
- →Initialize Clerk in a React application
About this skill
Clerk Install & Auth
Overview
Set up Clerk SDK and configure authentication for Next.js, React, or Express. This skill covers SDK installation, environment variables, ClerkProvider, middleware, and initial auth verification.
Prerequisites
- Node.js 18+
- Package manager (npm, pnpm, or yarn)
- Clerk account at dashboard.clerk.com
- Publishable Key (
pk_test_*) and Secret Key (sk_test_*) from Clerk Dashboard > API Keys
Instructions
Step 1: Install SDK for Your Framework
set -euo pipefail
# Next.js (App Router or Pages Router)
npm install @clerk/nextjs
# React SPA (Vite, CRA, etc.)
npm install @clerk/clerk-react
# Express / Node.js backend
npm install @clerk/express
# Backend-only (Cloudflare Workers, serverless, etc.)
npm install @clerk/backend
Step 2: Configure Environment Variables
# .env.local — never commit this file
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
# Optional: routing 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=/onboarding
Ensure .env.local is in .gitignore:
echo ".env.local" >> .gitignore
Step 3: Add ClerkProvider (Next.js App Router)
// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import './globals.css'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>
<header className="flex justify-between p-4">
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}
Step 4: Add Middleware
// middleware.ts (project root, NOT inside app/ or src/app/)
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
// Define which routes should be publicly accessible
const isPublicRoute = createRouteMatcher([
'/',
'/sign-in(.*)',
'/sign-up(.*)',
'/api/webhooks(.*)',
])
export default clerkMiddleware(async (auth, req) => {
if (!isPublicRoute(req)) {
await auth.protect()
}
})
export const config = {
matcher: [
// Skip Next.js internals and static files
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}
Step 5: Create Sign-In and Sign-Up Pages
// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'
export default function SignInPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<SignIn />
</div>
)
}
// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from '@clerk/nextjs'
export default function SignUpPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<SignUp />
</div>
)
}
Step 6: Verify Connection
// app/api/health/route.ts
import { auth } from '@clerk/nextjs/server'
export async function GET() {
const { userId } = await auth()
return Response.json({
clerkConnected: true,
authenticated: !!userId,
userId: userId || null,
})
}
React SPA Setup (Vite)
// src/main.tsx
import { ClerkProvider } from '@clerk/clerk-react'
import App from './App'
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Missing VITE_CLERK_PUBLISHABLE_KEY in .env')
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<App />
</ClerkProvider>
)
Express Setup
// server.ts
import express from 'express'
import { clerkMiddleware, requireAuth, getAuth } from '@clerk/express'
const app = express()
// Apply Clerk middleware globally — attaches auth to all requests
app.use(clerkMiddleware())
// Public route
app.get('/api/health', (req, res) => {
res.json({ status: 'ok' })
})
// Protected route — redirects unauthenticated requests
app.get('/api/profile', requireAuth(), (req, res) => {
const { userId } = getAuth(req)
res.json({ userId })
})
app.listen(3001, () => console.log('Server running on :3001'))
Error Handling
| Error | Cause | Solution |
|---|---|---|
Missing publishableKey | Env var not set | Add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY to .env.local |
ClerkProvider must wrap your application | Hook used outside provider | Ensure ClerkProvider wraps root layout |
auth() was called but Clerk can't detect clerkMiddleware() | Middleware not running | Place middleware.ts at project root, check matcher |
Module not found: @clerk/nextjs | Package not installed | Run npm install @clerk/nextjs |
| 500 error on all pages | CLERK_SECRET_KEY missing or wrong | Verify key prefix matches environment (sk_test_ for dev) |
Enterprise Considerations
- Use separate Clerk instances per environment (dev/staging/prod)
- Store keys in platform secrets (Vercel, AWS Secrets Manager), never in
.envfiles committed to git - The
CLERK_SECRET_KEYmust never be exposed client-side; onlyNEXT_PUBLIC_CLERK_PUBLISHABLE_KEYis safe for browsers - For monorepos, install
@clerk/nextjsonly in the app that needs it; use@clerk/backendfor shared server packages - Enable Clerk's "Enhanced email deliverability" in production for reliable transactional emails
Resources
- Next.js Quickstart
- React Quickstart
- Express Quickstart
- Clerk Dashboard
Next Steps
Proceed to clerk-hello-world for your first authenticated request.
Output
- Installed Clerk SDK/packages for the target stack
- Auth routes/middleware wired and smoke-tested sign-in/sign-out
- Documented env vars and local-dev secrets posture (never commit real keys)
Examples
Fresh install on Next.js
User: Install Clerk auth from zero on this Next.js repo.
Skill: adds dependencies, env template, middleware, and a protected smoke route.
Repair a half-finished install
User: Clerk packages are present but middleware never runs.
Skill: fixes matcher config, provider placement, and env loading order.
When not to use it
- →When Node.js 18+ is not available
- →When a Clerk account is not created at dashboard.clerk.com
- →When Publishable and Secret Keys are not obtained from Clerk Dashboard
Prerequisites
Limitations
- →Missing `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` will cause an error
- →ClerkProvider must wrap the application to function correctly
- →Middleware must be placed at the project root for proper route protection
How it compares
This workflow provides a structured approach to integrating Clerk authentication into various frameworks, unlike manually configuring each component.
Compared to similar skills
clerk-install-auth side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| clerk-install-auth (this skill) | 1 | 27d | Review | Beginner |
| senior-fullstack | 35 | 7mo | Review | Intermediate |
| ai-sdk-documentation | 1 | 7mo | Review | Beginner |
| senior-qa | 0 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by jeremylongshore
View all by jeremylongshore →You might also like
senior-fullstack
davila7
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
ai-sdk-documentation
malob
This skill should be used when working with Vercel AI SDK, AI Gateway, streamText, generateText, generateObject, streamObject, tool calling, or AI SDK providers. Also relevant for "ai-sdk", "@ai-sdk/*" packages, or questions about AI SDK patterns, configuration, and best practices.
senior-qa
diegosouzapw
Comprehensive QA and testing skill for quality assurance, test automation, and testing strategies for ReactJS, NextJS, NodeJS applications. Includes test suite generation, coverage analysis, E2E testing setup, and quality metrics. Use when designing test strategies, writing test cases, implementing
fullstack-developer
daithang59
|
nx
TerminalSkills
>-
dapp
salazarsebas
Stellar dApp / frontend development. Covers the JavaScript stellar-sdk (browser + Node.js), Freighter wallet, Stellar Wallets Kit (multi-wallet), Wallet Standard, smart accounts with passkeys, transaction building / signing / submission, Soroban contract invocation from the client, simulation, and e