clerk-setup

Adds Clerk authentication to projects by following official framework quickstart guides.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-setup-divinaarmuela
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-setup
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-setup
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-setup-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up authentication from scratch is error-prone: wrong SDK packages, misplaced providers, missing middleware, and leaked secret keys are common mistakes. This Skill automates Clerk integration by detecting your framework, fetching the official quickstart, and executing each setup step correctly. ## Core Features & Use Cases - Framework Detection & Setup: Reads package.json to identify Next.js, React, Vue, Nuxt, Astro, Express, Fastify, Expo, and more, then follows the matching official quickstart. - CLI-Driven Provisioning: Uses the clerk CLI to create apps, link projects, pull environment keys, and run health checks via clerk doctor. - Auth Migration Planning: Audits existing auth (NextAuth, Supabase, Firebase, Auth0) and produces a migration plan covering user export, password hashes, and session transition. - Use Case: You scaffold a new Next.js SaaS app and ask to add authentication. The Skill installs @clerk/nextjs, places ClerkProvider inside the body tag, creates proxy.ts middleware, and configures your API keys. ## Quick Start Ask the assistant to add Clerk authentication to your project and it will detect the framework and complete the setup.

Frequently Asked Questions about clerk-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Clerk authentication to a Next.js app?

Install @clerk/nextjs, place ClerkProvider inside the body tag of your root layout, and create proxy.ts (middleware.ts on Next.js 15 or earlier) with clerkMiddleware. Set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY in .env.local, or let Keyless mode generate dev keys automatically.

How do I migrate from NextAuth to Clerk?

Audit your current auth touchpoints, export users and import them via the Clerk Backend API, and store legacy IDs as external_id. Choose between a big-bang switch or trickle migration running both systems temporarily; existing sessions will terminate on switch.

Which Clerk package should I install for React, Vue, or Express?

Use @clerk/nextjs for Next.js, @clerk/react for React SPAs, @clerk/expo for Expo, @clerk/react-router for React Router v7, and @clerk/tanstack-react-start for TanStack Start. Express and Fastify have their own server SDKs documented in the official quickstarts.

Does Clerk work with Vite-based React SPAs without a server?

Yes. Install @clerk/react, wrap your app root with ClerkProvider, and pass the publishable key via VITE_CLERK_PUBLISHABLE_KEY. No middleware or server components are needed for single-page applications.

Why is my Clerk middleware not protecting routes in Next.js?

Common causes are a missing or incorrect matcher config, auth routes not marked public, or missing await on the async auth() call in Next.js 15+. Run clerk doctor to check framework integration, env vars, and middleware presence automatically.

What Node.js version does Clerk require?

The current Clerk SDK requires Node.js 20.9.0 or higher. Projects on the older Core 2 SDK could run on Node.js 18.17.0, but upgrading Node is recommended when moving to the current SDK.