Adding Clerk Authentication to a Full Stack Application with Django, FastAPI, and Next.js
How to add Clerk Authentication to our full stack app with Django, FastAPI and Next.js.
This tutorial builds upon the Full Stack Application with Django, FastAPI, and Next.js by integrating Clerk authentication. We'll extend the existing application to include user authentication and organization management using Clerk.
Steps
1. Set Up the Base Project
1.1 Clone the Original Tutorial Repository
Start by cloning the repository from the original tutorial:
1.2 Confirm Everything Runs
Ensure the existing setup is working correctly:
2. Integrate Clerk with the Frontend
2.1 Install Clerk in the Frontend
Add Clerk to the Next.js frontend:
2.2 Rebuild the Frontend Image
After installation, rebuild the frontend image:
2.3 Create Clerk Middleware
Create a new file frontend/src/middleware.ts
with the following content:
2.4 Add ClerkProvider
Edit frontend/src/app/layout.tsx
:
2.5 Create Sign-In Page
Create a new file frontend/src/app/sign-in/[[...sign-in]]/page.tsx
:
2.6 Create Sign-Up Page
Create a new file frontend/src/app/sign-up/[[...sign-up]]/page.tsx
:
3. Configure the FastAPI Backend for Clerk
3.1 Update Backend Dependencies
Edit backend/requirements.txt
:
Then rebuild the backend services:
3.2 Create a FastAPI Endpoint for the Clerk Webhook
Edit backend/users/routers.py
:
Edit backend/mysaas/asgi.py
:
3.3 Create Schemas for Clerk Webhook
Edit backend/users/schemas.py
:
4. Configure Clerk API Keys and Webhook
4.1 Set Up Clerk API Keys
Visit Developers -> API Keys in the Clerk dashboard, ensure the dropdown says Next.js, and click the Copy button.
Paste the keys into frontend/.env.local
:
4.2 Set Up Webhook Endpoint
Install ngrok if it's not already installed and run it to capture webhook events:
Copy the https:// public hostname for the webhook endpoint.
Visit Configure -> Webhooks in the Clerk dashboard and add an endpoint using the ngrok hostname. For example:
Subscribe to all organization, user, and organizationMembership events.
Get the signing secret from the [eye] icon and paste it into backend/.env.local
:
5. Update Backend Models and Admin
5.1 Update User Model
Edit backend/users/models.py
:
5.2 Update Admin Interface
Edit backend/users/admin.py
:
5.3 Apply Database Migrations
Run the following commands to create and apply migrations:
6. Verify Everything is Running
To ensure everything is set up correctly:
- Visit http://localhost/sign-in and you should see a Clerk sign-in page
- Visit http://localhost/docs and you should see the /auth/clerk_webhook/ endpoint. Verify that the FastAPI backend is properly configured and running to manage user authentication and secure access to sensitive information.
- Visit http://localhost/admin and you should be able to login and see your User and Organizations
Conclusion
You have successfully integrated Clerk authentication into your full stack application with Django, FastAPI, and Next.js. This setup provides a robust authentication system and allows for user and organization management through Clerk's services.
Damian Hodgkiss
Senior Staff Engineer at Sumo Group, leading development of AppSumo marketplace. Technical solopreneur with 25+ years of experience building SaaS products.