I am facing a challenge in my personal project using Next.js (T3 stack) where I need to synchronize Clerk users with a user table in my Supabase DB.
My goal is to have a Users table, defined in my schema.prisma, that includes the user_id from Clerk along with a custom int variable. To achieve this, I explored Clerk Webhooks and followed their documentation to implement one. Here is a snippet of the code I used:
import { Webhook } from "svix";
import { headers } from "next/headers";
import { type WebhookEvent } from "@clerk/nextjs/server";
export async function POST(req: Request) {
// Code here for webhook implementation
}
The file containing this code is located at
/pages/api/webhooks/clerkWebhooks.tsI also made changes to my middleware.ts file to ensure it includes the new route:
...
export default authMiddleware({
publicRoutes: ["/", "/api/webhooks(.*)"],
ignoredRoutes: ["/"],
});
...
However, upon testing the webhook, I do not see any console logs. Any guidance or assistance on this matter would be greatly appreciated. Thank you in advance.
Is the location of the clerkWebhook.ts file correct?
Is the middleware.ts file appropriately pointing to the new route of the clerkWebhook?
Why are there no console logs appearing when testing the webhook?