Clerk Authentication

Set up secure user authentication with Clerk for your AI SaaS landing page.

What is Clerk?

Clerk provides complete user management with beautiful, customizable UI components. It handles sign-up, sign-in, user profiles, and session management out of the box.

Why Clerk?

🔐 Secure by Default - Enterprise-grade security
🎨 Beautiful UI - Pre-built components that match your brand
🚀 Quick Setup - Get authentication working in minutes
📱 Multi-Platform - Works on web, mobile, and desktop
🔑 OAuth Support - Google, GitHub, and 50+ providers

Setup Guide

1. Create Clerk Account

Go to clerk.com and sign up
Create a new application
Choose your authentication methods:
- ✅ Email & Password
- ✅ Google OAuth
- ✅ GitHub OAuth

2. Get API Keys

From your Clerk dashboard:

Go to API Keys section
Copy these values:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

Add them to your .env.local file.

3. Install Clerk

If not already installed:

npm install @clerk/nextjs

4. Configure Sign-In/Sign-Up Pages

In Clerk dashboard:

Go to Paths settings
Set URLs:
- Sign-in URL: /sign-in
- Sign-up URL: /sign-up
- After sign-in: /dashboard
- After sign-up: /dashboard

5. Customize Appearance

Match Clerk to your brand:

Go to Customization → Themes
Choose Dark mode to match your site
Set primary color to #F59E0B (amber) to match your brand

Or use code customization in your layout.tsx:

<ClerkProvider
  appearance={{
    baseTheme: dark,
    variables: {
      colorPrimary: '#F59E0B',
      colorBackground: '#0a0a0a',
    }
  }}
>

Webhooks Setup

Sync users to your Supabase database:

1. Create Webhook Endpoint

In Clerk dashboard:

Go to Webhooks → Add Endpoint
Enter URL: https://your-domain.vercel.app/api/webhooks/clerk
Subscribe to events:
- user.created
- user.updated
- user.deleted

2. Get Signing Secret

Copy the Signing Secret and add to .env.local:

CLERK_WEBHOOK_SECRET=whsec_...

3. Test Webhook

For local development, use ngrok:

ngrok http 3000
# Use the ngrok URL in Clerk webhook settings

Using Clerk in Your App

Protect Routes

Routes under /dashboard are automatically protected by middleware.

Get Current User

import { currentUser } from '@clerk/nextjs/server';

export default async function DashboardPage() {
  const user = await currentUser();
  
  return <div>Welcome, {user?.firstName}!</div>;
}

Client-Side User Data

'use client';
import { useUser } from '@clerk/nextjs';

export default function Profile() {
  const { user, isLoaded } = useUser();
  
  if (!isLoaded) return <div>Loading...</div>;
  
  return <div>{user?.emailAddresses[0].emailAddress}</div>;
}

Sign Out Button

import { SignOutButton } from '@clerk/nextjs';

<SignOutButton>
  <button>Sign Out</button>
</SignOutButton>

Production Checklist

Before going live:

[ ] Switch to production API keys (not test keys)
[ ] Add production domain to Clerk's allowed origins
[ ] Update webhook URL to production domain
[ ] Enable 2FA for admin accounts
[ ] Configure email templates
[ ] Set up session duration
[ ] Review security settings

Common Issues

Redirect Loop

Check that sign-in/sign-up paths match in Clerk settings
Verify middleware configuration in middleware.ts

Webhook Not Firing

Use ngrok for local testing
Check webhook URL is accessible
Verify signing secret matches

Styling Issues

Make sure Clerk theme matches your dark mode
Customize appearance in Clerk dashboard
Use appearance prop for fine-tuning

Resources

Next: Set up Supabase Database →

Quick Links