clerk-install-auth
Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
Best use case
clerk-install-auth is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
Teams using clerk-install-auth should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/clerk-install-auth/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How clerk-install-auth Compares
| Feature / Agent | clerk-install-auth | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# 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
```bash
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
```bash
# .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`:
```bash
echo ".env.local" >> .gitignore
```
### Step 3: Add ClerkProvider (Next.js App Router)
```typescript
// 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
```typescript
// 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
```typescript
// 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>
)
}
```
```typescript
// 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
```typescript
// 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)
```typescript
// 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
```typescript
// 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 `.env` files committed to git
- The `CLERK_SECRET_KEY` must never be exposed client-side; only `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` is safe for browsers
- For monorepos, install `@clerk/nextjs` only in the app that needs it; use `@clerk/backend` for shared server packages
- Enable Clerk's "Enhanced email deliverability" in production for reliable transactional emails
## Resources
- [Next.js Quickstart](https://clerk.com/docs/nextjs/getting-started/quickstart)
- [React Quickstart](https://clerk.com/docs/quickstarts/react)
- [Express Quickstart](https://clerk.com/docs/quickstarts/express)
- [Clerk Dashboard](https://dashboard.clerk.com)
## Next Steps
Proceed to `clerk-hello-world` for your first authenticated request.Related Skills
validating-authentication-implementations
Validate authentication mechanisms for security weaknesses and compliance. Use when reviewing login systems or auth flows. Trigger with 'validate authentication', 'check auth security', or 'review login'.
workhuman-install-auth
Workhuman install auth for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman install auth".
wispr-install-auth
Wispr Flow install auth for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr install auth".
windsurf-install-auth
Install Windsurf IDE and configure Codeium authentication. Use when setting up Windsurf for the first time, logging in to Codeium, or configuring API keys for team/enterprise deployments. Trigger with phrases like "install windsurf", "setup windsurf", "windsurf auth", "codeium login", "windsurf API key".
webflow-install-auth
Install the Webflow JS SDK (webflow-api) and configure OAuth 2.0 or API token authentication. Use when setting up a new Webflow integration, configuring access tokens, or initializing the WebflowClient in your project. Trigger with phrases like "install webflow", "setup webflow", "webflow auth", "configure webflow API token", "webflow OAuth".
vercel-install-auth
Install Vercel CLI and configure API token authentication. Use when setting up Vercel for the first time, creating access tokens, or initializing a project with vercel link. Trigger with phrases like "install vercel", "setup vercel", "vercel auth", "configure vercel token", "vercel login".
veeva-install-auth
Veeva Vault install auth with REST API and VQL. Use when integrating with Veeva Vault for life sciences document management. Trigger: "veeva install auth".
vastai-install-auth
Install and configure Vast.ai CLI and REST API authentication. Use when setting up a new Vast.ai integration, configuring API keys, or initializing Vast.ai GPU cloud access in your project. Trigger with phrases like "install vastai", "setup vastai", "vastai auth", "configure vastai API key", "vastai gpu setup".
twinmind-install-auth
Install and configure TwinMind Chrome extension, mobile app, and API access. Use when setting up TwinMind for meeting transcription, configuring calendar integration, or initializing TwinMind in your workflow. Trigger with phrases like "install twinmind", "setup twinmind", "twinmind auth", "configure twinmind", "twinmind chrome extension".
together-install-auth
Install Together AI SDK and configure API key for inference and fine-tuning. Use when setting up Together AI, configuring the OpenAI-compatible API, or initializing the together Python package. Trigger: "install together, setup together ai, together API key".
techsmith-install-auth
Install TechSmith Snagit COM API and register the COM server for automation. Use when setting up Snagit automation, configuring COM interop, or initializing Camtasia batch processing. Trigger: "install techsmith, setup snagit, techsmith COM API".
supabase-install-auth
Install and configure Supabase SDK, CLI, and project authentication. Use when setting up a new Supabase project, installing @supabase/supabase-js, configuring environment variables, or initializing the Supabase client. Trigger with "install supabase", "setup supabase", "supabase auth config", "configure supabase", "supabase init", "add supabase to project".