Building on the foundation of DanailMinchev's payload-clerk-example, this starter modernises the stack with MongoDB and provides a complete authentication solution.
A minor contribution by Jaiden Capra as part of the TYMO Forge open source app starter initiative.
- Payload CMS v3.53 - Modern headless CMS with TypeScript
- Clerk Authentication - Complete user management with roles & permissions
- Role-Based Access - Super admin, admin, editor, and user roles
- Webhook Integration - Real-time user sync between Clerk and Payload
- Node.js 18+
- MongoDB Atlas account (free tier available) - can also use local containerised mongo in your dev environment (run
docker-compose up) - Clerk account (free tier available)
git clone https://github.com/your-org/payload-mongo-clerk-example.git
cd payload-mongo-clerk-example
pnpm install-
Copy environment variables:
cp .env.example .env.local
-
Set up Clerk:
- Create a new Clerk application
- Enable Email as Sign-in option
- Enable Test mode for development
- Configure public metadata with
{"metadata": "{{user.public_metadata}}"} - Add your keys to
.env.local:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... SIGNING_SECRET=whsec_...
-
Set up MongoDB:
- Create a MongoDB Atlas cluster
- Get your connection string and add to
.env.local:MONGODB_URI=mongodb+srv://username:[email protected]/database
-
Configure Payload:
PAYLOAD_SECRET=your-32-character-secret-key
For more details, check out the full videos from Danail:
Part 2 - Advanced integration
https://www.youtube.com/watch?v=egKaeOuddFA
Source code for the video is in the part-2 branch of the original repo: https://github.com/DanailMinchev/payload-clerk-example/tree/feat/part-2
Part 1 - Basic integration
https://www.youtube.com/watch?v=7PNGNqqFlu0
Source code for the video is in the part-1 branch of the original repo: https://github.com/DanailMinchev/payload-clerk-example/tree/feat/part-1
pnpm devOpen http://localhost:3000 and follow the setup wizard to create your first admin user.
For testing with predefined roles, visit /api/app/seed to create:
[email protected](Super Admin)[email protected](Admin)[email protected](Editor)[email protected](User)
For local MongoDB without Atlas:
# Update MONGODB_URI in .env.local to mongodb://127.0.0.1/your-db-name
docker-compose up -d
pnpm devThe app includes Clerk webhook integration at POST /api/clerk/webhooks for real-time user synchronisation.
Supported Events:
user.created- Creates corresponding Payload useruser.updated- Updates user data and rolesuser.deleted- Removes user from Payload
Ngrok Testing:
ngrok http 3000 --url=your-domain.ngrok-free.appAdd the ngrok URL to your Clerk webhook endpoints.
In production, ngrok is not needed. Use your live domain.
Full E2E test suite with Playwright:
# Install Playwright
npx playwright install
# Run tests
pnpm run playwright:test:ui # Interactive mode
pnpm run playwright:test:debug # Debug mode
pnpm run playwright:test # CI modeTests cover authentication flows, role-based access control, and admin panel functionality.
Auth-enabled collection with Clerk integration and role-based permissions.
Upload-enabled collection with automatic resising, focal points, and multiple size variants.
This project builds on the Payload-Clerk example from Danail Minchev and the Payload CMS community. Contributions welcome!
- Payload CMS Documentation
- Clerk Documentation
- MongoDB Atlas Documentation
- TYMO Forge - More open source tools coming soon
Need help with Payload CMS implementation or custom solutions? TYMO AI offers expert consulting services for startups and established firms.