Authentication System
Complete authentication system powered by Clerk with social login, email/password authentication, and user management.
Clerk Integration
The boilerplate uses Clerk for authentication with the following features:
Social Login
Google, GitHub, and other social providers
Email/Password
Traditional authentication methods
User Management
Profile management and settings
Session Handling
Automatic session management
Webhook Integration
User sync with database
Protected Routes
Automatic route protection
Authentication Flow
User Signs Up/In
User authenticates via Clerk using social login or email/password
Webhook Creates User
Clerk webhook automatically creates/updates user record in MongoDB
Data Synchronized
User data is synchronized across Clerk and your database
Protected Routes
Protected routes and API endpoints are automatically handled
Environment Variables
Configure these environment variables for Clerk authentication:
Publishable Key
Used on the client-side for Clerk components
Secret Key
Used on the server-side for API calls
Webhook Secret
Verifies webhook authenticity
Key Files
middleware.ts
Route protection and authentication middleware
/middleware.tsapp/api/webhook/clerk/route.ts
Webhook handler for user synchronization
/app/api/webhook/clerk/route.tscomponents/auth/
Authentication components and forms
/components/auth/Setup Guide
1. Create Clerk Application
- Visit clerk.com and create an account
- Create a new application
- Configure your authentication methods (social providers, email/password)
- Copy your API keys from the dashboard
2. Configure Environment Variables
Add your Clerk keys to the .env file as shown above.
3. Set Up Webhooks
- In Clerk dashboard, go to Webhooks
- Create a new webhook endpoint:
https://yourdomain.com/api/webhook/clerk - Subscribe to user events (created, updated, deleted)
- Copy the webhook signing secret
Next Steps
After setting up authentication, explore these related areas: