| name | clerk-common-errors |
| description | Troubleshoot common Clerk errors and issues.
Use when encountering authentication errors, SDK issues,
or configuration problems with Clerk.
Trigger with phrases like "clerk error", "clerk not working",
"clerk authentication failed", "clerk issue", "fix clerk".
|
| allowed-tools | Read, Write, Edit, Grep, Bash(npm:*) |
| version | 1.14.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","clerk","authentication"] |
| compatibility | Designed for Claude Code |
Clerk Common Errors
Overview
Diagnose and resolve common Clerk authentication errors. Organized by error category with root cause analysis and fix code.
Prerequisites
- Clerk SDK installed
- Access to Clerk Dashboard for configuration verification
- Browser developer tools for client-side debugging
Instructions
Error Category 1: Configuration Errors
Clerk: Missing publishableKey
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
console.log('PK:', process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY)
ClerkProvider must wrap your application
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html><body>{children}</body></html>
</ClerkProvider>
)
}
Error Category 2: Authentication Errors
form_identifier_not_found
import { createClerkClient } from '@clerk/backend'
const clerk = createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY! })
const users = await clerk.users.getUserList({ emailAddress: ['user@example.com'] })
console.log('User found:', users.totalCount > 0)
form_password_incorrect
session_exists (Error during sign-in)
'use client'
import { useAuth } from '@clerk/nextjs'
import { redirect } from 'next/navigation'
export default function SignInPage() {
const { isSignedIn } = useAuth()
if (isSignedIn) redirect('/dashboard')
}
Error Category 3: Middleware Errors
Infinite redirect loop
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isPublicRoute = createRouteMatcher([
'/sign-in(.*)',
'/sign-up(.*)',
'/',
'/api/webhooks(.*)',
])
export default clerkMiddleware(async (auth, req) => {
if (!isPublicRoute(req)) await auth.protect()
})
auth() was called but Clerk middleware was not detected
export const config = {
matcher: [
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
'/(api|trpc)(.*)',
],
}
Error Category 4: Server/Client Component Errors
useUser() in Server Component
import { currentUser } from '@clerk/nextjs/server'
export default async function Page() {
const user = await currentUser()
return <div>{user?.firstName}</div>
}
'use client'
import { useUser } from '@clerk/nextjs'
export function Profile() {
const { user } = useUser()
return <div>{user?.firstName}</div>
}
Hydration mismatch with auth state
'use client'
import { useUser } from '@clerk/nextjs'
export function SafeAuthUI() {
const { user, isLoaded } = useUser()
if (!isLoaded) return <div>Loading...</div>
return <div>{user ? `Hello ${user.firstName}` : 'Not signed in'}</div>
}
Error Category 5: Webhook Errors
Invalid signature on webhook endpoint
export async function POST(req: Request) {
const body = await req.text()
const wh = new Webhook(process.env.CLERK_WEBHOOK_SECRET!)
const evt = wh.verify(body, { })
}
app.post('/webhooks', express.raw({ type: 'application/json' }), handler)
Output
- Identified error category and root cause
- Working fix code for each common error
- Diagnostic steps for verification
Error Handling
| Error | Cause | Quick Fix |
|---|
Missing publishableKey | Env var not set | Add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY to .env.local |
auth() not detected | Middleware missing/misplaced | Move middleware.ts to project root |
| Redirect loop | Auth pages not public | Add sign-in/sign-up to isPublicRoute matcher |
| Hydration mismatch | Server/client state differs | Guard with isLoaded check |
| Webhook invalid signature | Body parsed before verify | Use req.text() not req.json() before wh.verify() |
Examples
Quick Diagnostic Checklist
npm list @clerk/nextjs 2>/dev/null
node -e "console.log('PK:', !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, 'SK:', !!process.env.CLERK_SECRET_KEY)"
curl -s -o /dev/null -w "%{http_code}" -H "Authorization: Bearer $CLERK_SECRET_KEY" https://api.clerk.com/v1/users?limit=1
ls middleware.ts 2>/dev/null && echo "Found" || echo "Missing - create middleware.ts at project root"
Resources
Next Steps
Proceed to clerk-debug-bundle for comprehensive debugging tools.
