CursorClerkBeginner8 min read

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