{"name":"add-clerk-auth","description":"Adds Clerk authentication to a Next.js or React app - install the SDK, set the keys, wrap the app in ClerkProvider, add the hosted sign-in components, protect routes with clerkMiddleware, and check the user on the server before reading data. Use when the user mentions Clerk, wants Google sign-in through Clerk, or asks for Clerk middleware or protected pages.","category":"backend","tags":["clerk","auth","nextjs","react"],"models":["any"],"proven":false,"passing_families":0,"model_testing":"Not yet model-tested; testing Jan 2027","url":"https://theskillvault.ai/skills/add-clerk-auth","api_url":"https://theskillvault.ai/api/skills/add-clerk-auth","raw_url":"https://theskillvault.ai/api/skills/add-clerk-auth/raw","body":"# Add Clerk auth\n\nClerk handles sign-up, sign-in, social logins and user profiles for you. Your job is to wire it in and protect the right pages and data.\n\n## When to use\n- You want login with email or Google without building it.\n- Some pages, such as a dashboard, should only be for signed-in users.\n- You already chose Clerk. For Supabase Auth, use set-up-supabase-auth.\n\n## Steps\n1. Create an app in the Clerk dashboard and choose sign-in methods (email, Google, GitHub).\n2. Install the SDK for your framework, such as `npm install @clerk/nextjs`.\n3. Add `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` to `.env.local` and to your host.\n4. Wrap the app in `<ClerkProvider>` in the root layout.\n5. Add sign-in and sign-up pages with Clerk's `<SignIn />` and `<SignUp />` components, or use the hosted pages.\n6. Add a middleware file using `clerkMiddleware()` and mark which routes need a signed-in user.\n7. Show `<UserButton />` in the header for account and sign-out.\n8. On the server, call `auth()` in every route handler and server action that touches user data, and return 401 when there is no user.\n9. Store the Clerk user id on your own records (such as `owner_id`) and filter queries by it.\n10. Test signed out, signed in, and signed in as a different user.\n\n## Gotchas\n- Middleware alone is not enough. Check the user on the server before every read or write of private data.\n- The secret key is server-only. Never expose it with a public prefix.\n- Add your production domain in Clerk and switch to production keys before launch.\n- Sync users to your database with Clerk webhooks if you need profiles there, and verify the webhook signature.\n\n## Portability\nWorks with Next.js App Router and Pages Router, Remix, Astro and plain React. If you use another auth provider such as Auth.js or Supabase Auth instead, the same rule applies: protect routes and check the user on the server.\n\n## Example prompt\n\"Add Clerk sign-in with Google and email to my Next.js app, protect /dashboard, and make sure users only see their own projects.\"\n\n## Done when\n- Users can sign up, sign in and sign out.\n- Protected pages redirect signed-out visitors.\n- Server code checks the user, and one user cannot read another user's data.\n\n---\nHouse original by TheSkillVault (CC-BY-4.0).","files":[],"license":"CC-BY-4.0","license_name":"CC BY 4.0","license_url":"https://creativecommons.org/licenses/by/4.0/","attribution":"From TheSkillVault, https://theskillvault.ai, CC BY 4.0","install":{"claude_code":"curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-clerk-auth/raw' -o ~/'.claude/skills/add-clerk-auth/SKILL.md'","cursor":"curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-clerk-auth/raw' -o '.cursor/skills/add-clerk-auth/SKILL.md'","agents":"curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/add-clerk-auth/raw' -o '.agents/skills/add-clerk-auth/SKILL.md'","mcp_url":"https://theskillvault.ai/mcp","cursor_mcp_deeplink":"cursor://anysphere.cursor-deeplink/mcp/install?name=theskillvault&config=eyJ1cmwiOiJodHRwczovL3RoZXNraWxsdmF1bHQuYWkvbWNwIn0%3D","mcp_config":{"mcpServers":{"theskillvault":{"url":"https://theskillvault.ai/mcp"}}}},"bundles":[],"tested_on":[{"family":"chatgpt","name":"ChatGPT","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"claude","name":"Claude","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"gemini","name":"Gemini","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"grok","name":"Grok","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"llama","name":"Llama","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"deepseek","name":"DeepSeek","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"mistral","name":"Mistral","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"qwen","name":"Qwen","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"kimi","name":"Kimi K","outcome":null,"date":null,"source":null,"counts":false,"stale":false}],"proven_rule":{"threshold":5,"window_days":365,"computed_at":"2026-11-02T03:20:33.817Z"}}