Clerk Webhook (#6)

app/api/webhooks/clerk/route.ts

@@ -0,0 +1,91 @@
+import { Webhook } from 'svix'
+import { headers } from 'next/headers'
+import { WebhookEvent } from '@clerk/nextjs/server'
+import { db } from '@/lib/db'
+
+export async function POST(req: Request) {
+
+    // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
+    const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET
+
+    if (!WEBHOOK_SECRET) {
+        throw new Error('Please add CLERK_WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local')
+    }
+
+    // Get the headers
+    const headerPayload = headers();
+    const svix_id = headerPayload.get("svix-id");
+    const svix_timestamp = headerPayload.get("svix-timestamp");
+    const svix_signature = headerPayload.get("svix-signature");
+
+    // If there are no headers, error out
+    if (!svix_id || !svix_timestamp || !svix_signature) {
+        return new Response('Error occured -- no svix headers', {
+            status: 400
+        })
+    }
+
+    // Get the body
+    const payload = await req.json()
+    const body = JSON.stringify(payload);
+
+    // Create a new Svix instance with your secret.
+    const wh = new Webhook(WEBHOOK_SECRET);
+
+    let evt: WebhookEvent
+
+    // Verify the payload with the headers
+    try {
+        evt = wh.verify(body, {
+            "svix-id": svix_id,
+            "svix-timestamp": svix_timestamp,
+            "svix-signature": svix_signature,
+        }) as WebhookEvent
+    } catch (err) {
+        console.error('Error verifying webhook:', err);
+        return new Response('Error occured', {
+            status: 400
+        })
+    }
+
+    const eventType = evt.type;
+
+    if (eventType === 'user.created') {
+        await db.user.create({
+            data: {
+                externalUserId: payload.data.id,
+                username: payload.data.username,
+                imageUrl: payload.data.image_url,
+                //stream: {
+                //    create: {
+                //        name: `${payload.data.username}'s stream`,
+                //    },
+                //},
+            },
+        })
+    }
+
+    if (eventType === "user.updated") {
+        await db.user.update({
+            where: {
+                externalUserId: payload.data.id,
+            },
+            data: {
+                username: payload.data.username,
+                imageUrl: payload.data.image_url,
+            },
+        });
+    }
+
+    if (eventType === "user.deleted") {
+        // await resetIngresses(payload.data.id);
+
+        await db.user.delete({
+            where: {
+                externalUserId: payload.data.id,
+            },
+        });
+    }
+
+    return new Response('', { status: 200 })
+}

package.json

@@ -20,6 +20,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "svix": "^1.15.0",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7"
   },

prisma/schema.prisma

@@ -21,3 +21,9 @@ model User {
   createAt  DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
+
+model Stream {
+  id           String  @id @default(uuid())
+  name         String  @db.Text
+  thumbnailUrl String? @db.Text
+}