clerk-install-auth

# 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 }: { chil...