Next.js Auth with Clerk and MongoDB

Table of Contents#

Introduction
What is Clerk
What is MongoDB
So What makes it different from SQL Databases
How to Setup Clerk in a Next.js Project
What to do Next ?
It’s time to start with MongoDB
Sync Clerk DB with MongoDB using Webhooks
Conclusion

Introduction#

In this guide, we’re going to explore how to integrate Clerk authentication with a Next.js application, connect it to a MongoDB database, and handle user events using webhooks.

Prerequisites:#

Next.js: Basic knowledge of creating and running apps
TypeScript: Familiarity with TypeScript syntax
Backend concepts: Database and HTTP basics

What is Clerk#

Clerk is a user management platform that provides authentication UIs, APIs, and dashboards. It supports multifactor auth, session management, and user profiles out of the box.

What is MongoDB#

MongoDB is a NoSQL database that stores data in JSON-like documents. It supports structured, semi-structured, and unstructured data — offering flexibility and scalability.

So What makes it different from SQL Databases#

SQL databases store data in tables with fixed schemas. NoSQL like MongoDB allows flexible schemas, ideal for evolving or mixed data types.

How to Setup Clerk in a Next.js Project#

Install Clerk:

1
npm install @clerk/nextjs

Set environment variables in .env.local:

1
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
2
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Add Clerk middleware:

1
import { authMiddleware } from "@clerk/nextjs";
2

3
export default authMiddleware({
4
  publicRoutes: ["/"],
5
});
6

7
export const config = {
8
  matcher: [
9
    "/((?!.+\\.[\\w]+$|_next).*)",
10
    "/(api|trpc)(.*)",
11
  ],
12
};

Wrap your layout in <ClerkProvider>:

1
<ClerkProvider
2
  appearance={{
3
    elements: {
4
      formButtonPrimary: "primary-gradient",
5
      footerActionLink: "primary-text-gradient hover:text-primary",
6
    },
7
  }}
8
>
9
  <ThemeProvider>{children}</ThemeProvider>
10
</ClerkProvider>

What to do Next ?#

It’s time to start with MongoDB#

Install dependencies:

1
npm install mongodb mongoose

Create a MongoDB Atlas cluster and get your connection string.
Add it to .env.local:

1
MONGODB_URL=mongodb+srv://<username>:<password>@cluster0.mongodb.net/ProjectName

Create a mongoose.ts connection utility:

1
import mongoose from "mongoose";
2

3
let isConnected = false;
4

5
export const connectToDatabase = async () => {
6
  mongoose.set("strictQuery", true);
7
  if (!process.env.MONGODB_URL) return console.log("🔴 MISSING MONGODB_URL");
8
  if (isConnected) return console.log("🟢 Already connected to MONGODB");
9

10
  try {
11
    await mongoose.connect(process.env.MONGODB_URL, { dbName: "DBName" });
12
    isConnected = true;
13
    console.log("🟢 Connected to MONGODB");
14
  } catch (error) {
15
    console.log("🔴 Error connecting to MONGODB", error);
16
  }
17
};

Sync Clerk DB with MongoDB using Webhooks#

Deploy your app on Vercel
In Clerk Dashboard → Webhooks → Add Endpoint:

1
https://your-website.com/api/webhook

Add to .env.local:

1
NEXT_CLERK_WEBHOOK_SECRET=your_webhook_secret

Install svix:

1
npm install svix

Create api/webhook/routes.ts:

1
import { Webhook } from "svix";
2
import { headers } from "next/headers";
3
import { NextResponse } from "next/server";
4
import { createUser, updateUser, deleteUser } from "@/lib/actions/user.actions";
5

6
export async function POST(req: Request) {
7
  const WEBHOOK_SECRET = process.env.NEXT_CLERK_WEBHOOK_SECRET;
8
  if (!WEBHOOK_SECRET) throw new Error("Missing Clerk webhook secret.");
9

10
  const headerPayload = headers();
11
  const svix_id = headerPayload.get("svix-id");
12
  const svix_timestamp = headerPayload.get("svix-timestamp");
13
  const svix_signature = headerPayload.get("svix-signature");
14

15
  if (!svix_id || !svix_timestamp || !svix_signature) {
16
    return new Response("Missing headers", { status: 400 });
17
  }
18

19
  const payload = await req.json();
20
  const body = JSON.stringify(payload);
21
  const wh = new Webhook(WEBHOOK_SECRET);
22

23
  let evt;
24
  try {
25
    evt = wh.verify(body, {
26
      "svix-id": svix_id,
27
      "svix-timestamp": svix_timestamp,
28
      "svix-signature": svix_signature,
29
    });
30
  } catch (err) {
31
    console.error("Verification failed", err);
32
    return new Response("Verification error", { status: 400 });
33
  }
34

35
  const eventType = evt.type;
36

37
  if (eventType === "user.created") {
38
    const { id, email_addresses, image_url, username, first_name, last_name } = evt.data;
39
    const mongoUser = await createUser({
40
      clerkId: id,
41
      name: `${first_name} ${last_name ?? ""}`,
42
      email: email_addresses[0].email_address,
43
      username: username!,
44
      picture: image_url,
45
    });
46
    return NextResponse.json({ message: "User created", user: mongoUser });
47
  }
48

49
  if (eventType === "user.updated") {
50
    const { id, email_addresses, image_url, username, first_name, last_name } = evt.data;
51
    const mongoUser = await updateUser({
52
      clerkId: id,
53
      updateData: {
54
        name: `${first_name} ${last_name ?? ""}`,
55
        email: email_addresses[0].email_address,
56
        username: username!,
57
        picture: image_url,
58
      },
59
      path: `/profile/${id}`,
60
    });
61
    return NextResponse.json({ message: "User updated", user: mongoUser });
62
  }
63

64
  if (eventType === "user.deleted") {
65
    const { id } = evt.data;
66
    const deletedUser = await deleteUser({ clerkId: id! });
67
    return NextResponse.json({ message: "User deleted", user: deletedUser });
68
  }
69

70
  return new Response("", { status: 200 });
71
}

Conclusion#

You now have:

✅ Clerk authentication in Next.js
✅ MongoDB set up with Mongoose
✅ Webhooks syncing data between Clerk and MongoDB

You can test webhooks using the Send Test button from Clerk Dashboard. If anything breaks, check your Vercel logs!