Why Clerk?

Clerk is a complete authentication solution that provides:

• Multiple Sign-In Methods: Email/password, Google OAuth, and more
• User Management: Complete user profiles, avatars, and session management
• Security: Built-in security features, password hashing, and session management
• Easy Integration: Simple Next.js integration with @clerk/nextjs
• Webhooks: Real-time user events for database synchronization

Step-by-Step Setup

Step 1: Create Clerk Account

1. Go to clerk.com
2. Click "Start for Free" or "Sign Up"
3. Sign up with your email or GitHub account
4. Verify your email address
5. Complete the onboarding process

Step 2: Create a New Application

1. After signing in, click "Create Application"
2. Enter application name: LogoAIpro
3. Choose authentication options:
   • Email address
   • Password
   • Google (recommended)
4. Click "Create Application"

Step 3: Configure Authentication Settings

1. Navigate to Settings → User & Authentication
2. Configure sign-in methods:
   • Enable "Email address" and "Password"
   • Enable "Google" if you want social login
3. Set password requirements (recommended: at least 8 characters)
4. Configure email verification (recommended: enable)

Step 4: Get API Keys

1. Navigate to API Keys in the sidebar
2. You'll see two keys:
   • Publishable Key: Starts with pk_test_ or pk_live_
   • Secret Key: Starts with sk_test_ or sk_live_
3. Copy both keys (you'll need them for your .env.local file)

# Add to .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxx
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxx

Step 5: Configure Application URLs

1. Navigate to Settings → Paths
2. Set up your application URLs:

   # Development
   Sign-in URL: http://localhost:3000/login
   Sign-up URL: http://localhost:3000/sign-up
   After sign-in: http://localhost:3000/dashboard
   After sign-up: http://localhost:3000/dashboard
   
   # Production (after deployment)
   Sign-in URL: https://yourdomain.com/login
   Sign-up URL: https://yourdomain.com/sign-up
   After sign-in: https://yourdomain.com/dashboard
   After sign-up: https://yourdomain.com/dashboard

3. Save your changes

Step 6: Set Up Webhooks (Required)

Webhooks are essential for syncing user data to your MongoDB database.

1. Navigate to Webhooks in the sidebar
2. Click "Add Endpoint"
3. Configure the webhook:
   • Endpoint URL:

     # Development (use ngrok for local testing)
     https://your-ngrok-url.ngrok.io/api/webhooks/clerk
     
     # Production
     https://yourdomain.com/api/webhooks/clerk

   • Subscriptions: Select these events:
     • user.created - When a user signs up
     • user.updated - When user data changes
     • user.deleted - When a user is deleted
4. Click "Create"
5. Copy the Signing Secret (starts with whsec_)
6. Add it to your .env.local:

   CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

Step 7: Configure Next.js Integration

LogoAIpro already has Clerk configured. Verify your middleware.ts file:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isPublicRoute = createRouteMatcher([
  '/',
  '/login(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
])

export default clerkMiddleware((auth, request) => {
  if (!isPublicRoute(request)) {
    auth().protect()
  }
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

Step 8: Test Authentication

1. Start your development server: npm run dev
2. Navigate to http://localhost:3000
3. Click "Sign Up" or "Get Started"
4. Try creating an account with email/password
5. Verify you're redirected to the dashboard
6. Check your MongoDB database for the new user entry

Production Setup

Switching to Production Keys

1. In Clerk Dashboard, toggle from "Test" to "Production" mode
2. Get your production API keys
3. Update environment variables on your production server:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxxxx
   CLERK_SECRET_KEY=sk_live_xxxxxxxxxxxxx
   CLERK_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

4. Update webhook URL to your production domain
5. Test authentication in production

Advanced Configuration

Social Logins (Google OAuth)

1. In Clerk Dashboard, go to Settings → Social Connections
2. Click on "Google"
3. Enable Google authentication
4. Configure Google OAuth (see Google OAuth setup guide)
5. Save changes

Custom User Metadata

LogoAIpro stores additional user data in MongoDB. The webhook handler at app/api/webhooks/clerk/route.ts automatically syncs user data.

Verification Checklist