fix handling of signing secret

package.json

@@ -24,6 +24,7 @@
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "svix": "^1.45.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/api/webhook/route.js

@@ -1,7 +1,7 @@
 import mongoose from 'mongoose';
 import { User } from '../../../models/User';
-import crypto from 'crypto';
 import { NextResponse } from 'next/server';
+import { Webhook } from 'svix';
 
 const CLERK_WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
 
@@ -17,35 +17,37 @@ export async function POST(req) {
   console.log('Received request:', req);
 
   if (req.method !== 'POST') {
-    console.log('Method not allowed'); 
+    console.log('Method not allowed');
     return NextResponse.json(
       { message: 'Method Not Allowed' },
       { status: 405 }
     );
   }
 
+  const payload = await req.text();
+  const headers = {
+    'svix-id': req.headers.get('svix-id'),
+    'svix-timestamp': req.headers.get('svix-timestamp'),
+    'svix-signature': req.headers.get('svix-signature'),
+  };
+
+  const wh = new Webhook(CLERK_WEBHOOK_SECRET);
+
+  let evt;
   try {
-    const webhookSignature = req.headers.get('clerk-signature');
+    evt = wh.verify(payload, headers);
-    const payload = JSON.stringify(await req.json());
+  } catch (err) {
-    console.log('Webhook Payload:', payload);
+    console.log('Invalid webhook signature');
-    console.log('Received Clerk Signature:', webhookSignature);
+    return NextResponse.json(
+      { message: 'Invalid webhook signature' },
+      { status: 400 }
+    );
+  }
 
-    const hmac = crypto.createHmac('sha256', CLERK_WEBHOOK_SECRET);
+  const eventType = evt.type;
-    hmac.update(payload);
-    const computedSignature = hmac.digest('hex');
-    console.log('Computed Signature:', computedSignature);
 
-    if (computedSignature !== webhookSignature) {
+  if (eventType === 'user.created') {
-      console.log('Invalid webhook signature');
+    const { first_name, last_name, email_addresses } = evt.data;
-      return NextResponse.json(
-        { message: 'Invalid webhook signature' },
-        { status: 400 }
-      );
-    }
-
-    await connectDB();
-
-    const { first_name, last_name, email_addresses } = await req.json();
     const email = email_addresses && email_addresses[0] ? email_addresses[0].email_address : null;
 
     console.log('Clerk Data:', { first_name, last_name, email });
@@ -60,6 +62,8 @@ export async function POST(req) {
       );
     }
 
+    await connectDB();
+
     let user = await User.findOne({ email });
     if (user) {
       console.log('User already exists');
@@ -84,11 +88,11 @@ export async function POST(req) {
       { message: 'User successfully created' },
       { status: 200 }
     );
-  } catch (error) {
+  } else {
-    console.error('Error during webhook processing:', error);
+    console.log(`Unhandled event type: ${eventType}`);
     return NextResponse.json(
-      { message: 'Internal server error' },
+      { message: `Unhandled event type: ${eventType}` },
-      { status: 500 }
+      { status: 400 }
     );
   }
 }