Authentication with Clerk

Overview

This guide shows you how to set up user authentication using Clerk in your Next.js SaaS Starter. Clerk provides out-of-the-box sign-up, sign-in, account management, and more.

Prerequisites

• A Clerk account
• Environment variables added to your .env file

Refer to the Installation guide if you haven't set up your project yet.

1. Clerk Dashboard Setup

1. Sign in to your Clerk dashboard at clerk.com.

2. Create a new application and note down your credentials:

   • Publishable Key (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY)
   • Secret Key (CLERK_SECRET_KEY)

2. Environment Variables

Open your .env file (copied from .env.example) and add the following:

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXX

3. Project Configuration

1. Install Clerk in your project:

bun add @clerk/clerk-react

(Or use npm / pnpm / yarn depending on your setup.)

4. Webhook Configuration

1. Go to your Clerk dashboard and navigate to configuration > Webhooks.

2. Add a new webhook with the following details:
   • URL: https://yourdomain.com/api/clerk/webhooks/user

3. Turn on the User Events

• User Created
• User Updated
• User Deleted

4. Copy the Webhook Secret and add it to your .env file:

WEBHOOK_SECRET
 

Next Steps

• Customize your sign-in, sign-up, and profile pages with
• Connect user roles or advanced logic in the Clerk dashboard
• Explore Clerk Docs for more advanced configuration.

app/        
├── (auth)/  # Clerk authentication
│   ├──  layout.tsx
│   └── (routes)/
│       ├── sign-in/
│       │   └── [[...sign-in]]/
│       │       └── page.tsx
│       └── sign-up/
│           └── -[[...sign-up]]/
│               └── -page.tsx
└── (server)/
    └── api/
        └── (routes)/
            └── (webhooks)/ # webhook routes
                └── user/
                    └── route.ts