How to Add User Auth to Your Cursor App with Clerk
Add beautiful, production-ready authentication to your Cursor app with Clerk. Pre-built UI components, social login, and user management.
Before you start
- ✓Cursor IDE with a Next.js project
- ✓A Clerk account (free tier available at clerk.com)
Step by step
Install Clerk
Install the Clerk Next.js package from Cursor's terminal.
npm install @clerk/nextjs
Add your Clerk keys
Get your publishable key and secret key from the Clerk dashboard and add them to .env.local.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key CLERK_SECRET_KEY=sk_test_your_key
Wrap your app with ClerkProvider
Ask Cursor to set up the Clerk provider in your layout.
Paste this into Cursor:
Update my root layout.tsx to: 1. Import ClerkProvider from @clerk/nextjs 2. Wrap the children with ClerkProvider 3. Keep all existing layout code intact
Add the sign-in and sign-up pages
Clerk provides pre-built auth pages. Just set the routes.
Paste this into Cursor:
Create these files: 1. app/sign-in/[[...sign-in]]/page.tsx — renders <SignIn /> 2. app/sign-up/[[...sign-up]]/page.tsx — renders <SignUp /> 3. Center both components on the page 4. Import from @clerk/nextjs
Add a UserButton to your navbar
Show the user's avatar with a dropdown for profile and sign-out.
Paste this into Cursor:
Add the Clerk <UserButton /> component to the navbar: 1. Show it in the top-right corner 2. Only visible when signed in 3. When signed out, show a 'Sign In' link to /sign-in 4. Import UserButton and SignedIn/SignedOut from @clerk/nextjs
Protect your routes
Use Clerk's middleware to protect routes that require authentication.
Paste this into Cursor:
Create a middleware.ts file in the project root that: 1. Uses clerkMiddleware from @clerk/nextjs/server 2. Protects /dashboard and /settings routes 3. Allows public access to /, /sign-in, and /sign-up 4. Uses createRouteMatcher for the protected routes
Common errors
ClerkProvider not found
The Clerk package isn't installed or imported correctly.
Fix: Run npm install @clerk/nextjs and restart the dev server.
Redirect loop on sign-in page
The middleware is protecting the sign-in page itself.
Fix: Make sure /sign-in and /sign-up are in your public routes list in middleware.ts.
User data not available in API routes
Server-side code can't access the Clerk user.
Fix: Use auth() from @clerk/nextjs/server in API routes to get the current user.