Integration with Clerk
Learn how to integrate Clerk with your Lovable application
Why Clerk?
Clerk handles authentication and user management so you don’t have to build it from scratch. With just a few prompts and config steps, you get:
- Secure sign-in & sign-up (social, password, MFA)
- Prebuilt UI components: user profiles, org management, impersonation
- Support for B2B apps (teams, roles, invitations)
- Integration with Supabase, Stripe (coming soon), and more
- Waitlist mode to manage early access
- Generous free tier: 10K MAUs
Step-by-Step Integration Guide
Here is a step-by-step guide:
Set Up Your Clerk App
Step 1
Create a Clerk Account → Clerk.com
Step 2
In the Clerk dashboard, create a new app
Step 1
Sign in to Clerk & create a new app
Step 2
Enable desired authentication providers (e.g. Google, GitHub)
Step 3
Enable “Waitlist” under Configure > Restrictions
Step 4
Copy your Public API Key
Step 3
Add Clerk to Your Lovable App
Step 1
In Lovable, add Clerk as your authentication provider.
Prompt Lovable:
Let’s build a beautiful project and task management app in the style of Asana. Users should be able to login and signup using Clerk for authentication and user management. Let’s start by building a great looking homepage and use Clerk’s waitlist component to let users join while we build the rest of the app.
Step 2
Paste your Public API Key when asked
Step 3
Lovable scaffolds the login and sign-up pages
Step 4
Deploy & test — you’re now using Clerk Auth
Activate Waitlist Mode (Optional)
Why use a waitlist? – Gather early users before launching your app!
Use Clerk’s built-in waitlist to collect users pre-launch.
Step 1
In Clerk dashboard: Configure > Restrictions > Waitlist
Step 2
New sign-ups will show as pending
Step 3
- Users who sign up will now be pending approval
- Admins can approve users from the Clerk dashboard
Step 4 (Bonus)
Customize waitlist emails (branding, content)
Managing Users & Teams in Clerk
Set up team-based access in your app.
Step 1
In Clerk dashboard: enable Organizations
Step 2
Define roles (Admin, Member, Viewer, etc.)
Step 3
Invite users to your org by email
Step 4
Assign roles and permissions via dashboard
Step 5
Prompt Lovable to:
Ask users to create/join an organization after sign-up
Using Clerk’s User Profile Component
- Provides a prebuilt user management dashboard
- Supports social logins & password authentication
- Users can manage their own accounts & 2FA
Impersonation Mode (For Admins)
What is Impersonation Mode?
Admins can log in as any user to troubleshoot issues
Troubleshoot your app as if you were a specific user.
Step 1
In Clerk dashboard > Users, click on a user
Step 2
Click Impersonate
Step 3
View your app from their perspective
Step 4
Security: impersonators can’t perform sensitive actions (e.g. change password)
Integrate with Supabase (Advanced)
Combine Clerk Auth with Supabase backend.
Why integrate with Supabase?
- Store user data in a database
- Secure authentication with JWT tokens
- Connect authentication to app features
How to integrate:
Step 1
In Supabase, go to Settings > API > JWT Secret (documentation)
Step 2
In Clerk: JWT Templates > Add Supabase, paste JWT secret
Step 3
Enable Clerk as an authentication provider
Update RLS policies to use auth.uid()
from Clerk
Prompt Lovable to:
Let’s setup supabase to integrate with Clerk. Clerk has been configured with a Supabase secret. Here’s an example of implementing the supabase client using Clerk. Use this as a reference.
[Supabase client configuration import]
Step 4
Confirm Clerk-issued tokens are accepted by Supabase
Add a Custom Domain (Optional)
Step 1
In Lovable: Settings > Custom Domain
Step 2
Enter your purchased domain (e.g. app.yourcompany.com
)
Step 3
Lovable auto-configures DNS (no need to leave Lovable)
Step 4
Deploy & test your app with the new domain.
Step 5
Done ✅ — your app is now white-labeled
Final Thoughts & Next Steps
Your app now has:
- Secure authentication with Clerk
- A waitlist to collect early users
- User & team management features
- Supabase database integration
- A professional custom domain
Bonus: Build B2B Features in Minutes
Clerk supports:
- Role-based access for organizations
- Invite flows (email-based, pre-built UI)
- Organization profile customization (logo, name)
- Multi-org switching (e.g. Slack-style)
Ask Lovable to:
Add organization switcher UI
Let users invite teammates
Tips & Troubleshooting
- Already using Supabase Auth? You can switch to Clerk without rewriting your app logic. Just configure JWT correctly and swap auth provider.
- Email customization: Clerk lets you edit all transactional email templates (waitlist, invitations, approvals).
- Mobile login: Clerk supports passkeys, OTP, and SMS — no extra config needed in Dev Mode.
- Compliance: Clerk is SOC2, HIPAA, and GDPR compliant.
Frequently Asked Questions (FAQ)
Can I switch from Supabase Auth to Clerk easily?
Can I switch from Supabase Auth to Clerk easily?
Yes. Clerk and Supabase work well together. You just need to:
- Set up Clerk to issue JWTs
- Add Supabase’s JWT secret in Clerk
- Update Supabase RLS policies to use Clerk’s
auth.uid()
This lets you plug Clerk into an existing Supabase-backed app with minimal changes.
Do I need to configure OAuth providers like Google or GitHub?
Do I need to configure OAuth providers like Google or GitHub?
Only for production. In development mode, Clerk provides shared credentials for testing. For production:
- Set up your own Google/GitHub/etc. credentials
- Add them in Clerk under OAuth settings
What’s the difference between Organizations and Users?
What’s the difference between Organizations and Users?
- Users: Individuals who can log in to your app
- Organizations: Groups of users (teams, companies)
Use organizations when you want:
- Role-based access (Admin, Member, etc.)
- Users to invite teammates
- B2B SaaS-style flows
What is “Impersonation Mode”?
What is “Impersonation Mode”?
It allows admins to log in as any user — super helpful for:
- Debugging user issues
- Understanding their experience
- Providing live support
Clerk limits what impersonators can do (e.g., no password changes).
Can I customize Clerk's UI components?
Can I customize Clerk's UI components?
Yes. Clerk offers:
- Full CSS support via
appearance
props - The option to build fully custom UIs using Clerk React hooks
You can keep the out-of-the-box look or fully match your app’s brand.
Can I email my waitlist users from Clerk?
Can I email my waitlist users from Clerk?
Currently:
- Users are auto-notified when approved from the waitlist
- Bulk email support is coming soon
For now, export emails and use your preferred email tool.
Is Clerk free to use?
Is Clerk free to use?
Yes! Clerk has a generous free tier:
- Up to 10,000 Monthly Active Users (MAUs)
- Paid plans start at $25/month, with usage-based pricing after
You can use it in production without paying until you scale.
Does Clerk support compliance (SOC2, HIPAA, GDPR)?
Does Clerk support compliance (SOC2, HIPAA, GDPR)?
Yes. Clerk is:
- SOC 2 certified
- HIPAA-compliant
- GDPR-ready
Ideal for teams building in regulated industries.
Can I use Clerk with Stripe for billing?
Can I use Clerk with Stripe for billing?
Coming soon. You’ll soon be able to:
- Define plans (e.g. Free, Pro, Enterprise)
- Let users/orgs manage subscriptions from Clerk’s UI
- Automatically sync data to Stripe
Follow @clerkdev on X for updates.
Want a question added to this FAQ? Let us know on Discord!
Final Thoughts
Clerk turns authentication into a prompt. You don’t need to build it yourself.
With just a few clicks and prompts, your app now has:
- Secure, scalable authentication
- Team & organization management
- Impersonation tools for debugging
- Supabase-backed data and access control
- Custom domain support for a polished UX