clerk-webhook.ts

import { type NextApiRequest, type NextApiResponse } from 'next';
import { PrismaClient } from '@prisma/client';
import { User, type UserJSON } from '@clerk/clerk-sdk-node';
import { type IncomingHttpHeaders } from "http";
import { Webhook, type WebhookRequiredHeaders } from "svix";
import { buffer } from "micro";
import { env } from '../../env.mjs';

const prisma = new PrismaClient();

// Disable bodyParser so I can validate the webhook signature
export const config = {
  api: {
    bodyParser: false,
  },
};

const webhookSecret = env.CLERK_SIGNING_SECRET;

export default async function handler(req: NextApiRequestWithSvixRequiredHeaders, res: NextApiResponse) {
  const payload = (await buffer(req)).toString();
  const headers = req.headers;
  const wh = new Webhook(webhookSecret);
  let evt: Event | null = null;

  try {
    evt = wh.verify(payload, headers) as Event;
  } catch (_) {
    return res.status(400).json({ message: 'Invalid webhook signature' });
  }

  const eventType: EventType = evt.type;
  if (eventType === "user.created") {
    const user = User.fromJSON(evt.data);

    if (!user.emailAddresses || user.emailAddresses.length === 0 || !user.emailAddresses[0]) {
      res.status(400).json({ success: false, message: 'Email address not found' });
      return;
    }

    try {
      await prisma.user.create({
        data: {
          id: user.id,
          email: user.emailAddresses[0].emailAddress
        },
      });
    } catch (error) {
      if (error instanceof Error) {
        res.status(500).json({ success: false, message: 'Failed to create user', error: error.message });
      } else {
        res.status(500).json({ success: false, message: 'Failed to create user', error: 'Unknown error' });
      }
      return;
    }
  }

  res.json({ message: "ok" });
}

type NextApiRequestWithSvixRequiredHeaders = NextApiRequest & {
  headers: IncomingHttpHeaders & WebhookRequiredHeaders;
};

type Event = {
  data: UserJSON;
  object: "event";
  type: EventType;
};

type EventType = "user.created" | "user.updated" | "*";