feat(backend,react-router,nuxt,astro,nextjs,tanstack-react-start,express,fastify): Add verify webhook function (#5468)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: wobsoriano

.changeset/brave-turkeys-burn.md

@@ -0,0 +1,41 @@
+---
+'@clerk/tanstack-react-start': minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the TanStack React Start SDK:
+
+```ts
+// pages/api/webhooks.ts
+import { verifyWebhook } from '@clerk/tanstack-react-start/webhooks';
+
+export const APIRoute = createAPIFileRoute('/api/webhooks')({
+  POST: async ({ request }) => {
+    try {
+        const evt = await verifyWebhook(req);
+
+        // Do something with payload
+        const { id } = evt.data;
+        const eventType = evt.type;
+        console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+        console.log('Webhook payload:', body);
+
+        return new Response('Webhook received', { status: 200 });
+    } catch (err) {
+        console.error('Error: Could not verify webhook:', err);
+        return new Response('Error: Verification error', {
+          status: 400,
+        });
+    }
+  }
+})
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/bright-crabs-fold.md

@@ -0,0 +1,36 @@
+---
+'@clerk/fastify': minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Fastify SDK:
+
+```ts
+import { verifyWebhook } from '@clerk/fastify/webhooks';
+
+fastify.post('/api/webhooks', async (request, reply) => {
+  try {
+      const evt = await verifyWebhook(request);
+
+      // Do something with payload
+      const { id } = evt.data;
+      const eventType = evt.type;
+      console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+      console.log('Webhook payload:', evt.data);
+
+      return reply.status(200).send('Webhook received');
+    } catch (err) {
+      console.log('Error: Could not verify webhook:', err);
+      return reply.status(400).send('Error: Verification error');
+    }
+})
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/curly-chicken-lick.md

@@ -0,0 +1,38 @@
+---
+'@clerk/react-router': minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the React Router SDK:
+
+```ts
+import { verifyWebhook } from '@clerk/react-router/webhooks';
+
+export const action = async ({ request }) => {
+  try {
+    const evt = await verifyWebhook(request);
+
+    // Do something with payload
+    const { id } = evt.data;
+    const eventType = evt.type;
+    console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+    console.log('Webhook payload:', evt.data);
+
+    return new Response('Webhook received', { status: 200 });
+  } catch (err) {
+    console.log('Error: Could not verify webhook:', err);
+    return new Response('Error: Verification error', {
+        status: 400
+    });
+  }
+};
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/forty-radios-drive.md

@@ -0,0 +1,32 @@
+---
+"@clerk/backend": minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Backend SDK:
+
+```ts
+// app/api/webhooks/route.ts
+import { verifyWebhook } from '@clerk/backend/webhooks';
+
+try {
+    const evt = await verifyWebhook(req);
+
+    // Do something with payload
+    const { id } = evt.data;
+    const eventType = evt.type;
+    console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+    console.log('Webhook payload:', body);
+} catch (err) {
+    console.error('Error: Could not verify webhook:', err);
+}
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/fruity-ghosts-scream.md

@@ -0,0 +1,41 @@
+---
+"@clerk/express": minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Express SDK:
+
+```ts
+import { verifyWebhook } from '@clerk/express/webhooks';
+
+app.post(
+  '/api/webhooks',
+  bodyParser.raw({ type: 'application/json' }),
+
+  async (req, res) => {
+    try {
+        const evt = await verifyWebhook(req);
+
+        // Do something with payload
+        const { id } = evt.data;
+        const eventType = evt.type;
+        console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+        console.log('Webhook payload:', body);
+
+        return res.status(200).send('Webhook received')
+    } catch (err) {
+        console.log('Error: Could not verify webhook:', err.message)
+        return res.status(400).send('Error: Verification error')
+    }
+  },
+)
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/olive-apples-return.md

@@ -0,0 +1,39 @@
+---
+"@clerk/nextjs": minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Next.js SDK:
+
+```ts
+// app/api/webhooks/route.ts
+import { verifyWebhook } from '@clerk/nextjs/webhooks';
+
+export async function POST(req: Request) {
+  try {
+    const evt = await verifyWebhook(req);
+
+    // Do something with payload
+    const { id } = evt.data;
+    const eventType = evt.type;
+    console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+    console.log('Webhook payload:', body);
+
+    return new Response('Webhook received', { status: 200 });
+  } catch (err) {
+    console.error('Error: Could not verify webhook:', err);
+    return new Response('Error: Verification error', {
+      status: 400,
+    });
+  }
+}
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/quick-jars-give.md

@@ -0,0 +1,39 @@
+---
+'@clerk/astro': minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Astro SDK:
+
+```ts
+// pages/api/webhooks.ts
+import { verifyWebhook } from '@clerk/astro/webhooks';
+
+export const POST = ({ request }) => {
+    try {
+        const evt = await verifyWebhook(request);
+
+        // Do something with payload
+        const { id } = evt.data;
+        const eventType = evt.type;
+        console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+        console.log('Webhook payload:', body);
+
+        return new Response('Webhook received', { status: 200 });
+    } catch (err) {
+        console.error('Error: Could not verify webhook:', err);
+        return new Response('Error: Verification error', {
+            status: 400,
+        });
+    }
+}
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

.changeset/upset-vans-do.md

@@ -0,0 +1,38 @@
+---
+'@clerk/nuxt': minor
+---
+
+Introduce a `verifyWebhook()` function to verify incoming Clerk webhook requests and process the payload. This function handles webhook signature verification using `Svix` and is now available across all backend and fullstack SDKs.
+
+To get started, install [`svix`](https://www.npmjs.com/package/svix), which Clerk uses to verify its webhooks:
+
+```shell
+npm install svix
+```
+
+Then in your webhook route handler, import `verifyWebhook()` from the Nuxt SDK:
+
+```ts
+// server/api/webhooks.post.ts
+import { verifyWebhook } from '@clerk/nuxt/webhooks';
+
+export default eventHandler(async (event) => {
+  try {
+    const evt = await verifyWebhook(event);
+
+    // Do something with payload
+    const { id } = evt.data;
+    const eventType = evt.type;
+    console.log(`Received webhook with ID ${id} and event type of ${eventType}`);
+    console.log('Webhook payload:', body);
+
+    return 'Webhook received'
+  } catch (err) {
+    console.error('Error: Could not verify webhook:', err);
+    setResponseStatus(event, 400)
+    return 'Error: Verification error';
+  }
+})
+```
+
+For more information on how to sync Clerk data to your app with webhooks, [see our guide](https://clerk.com/docs/webhooks/sync-data).

packages/astro/package.json

@@ -55,6 +55,10 @@
       "types": "./dist/server/index.d.ts",
       "default": "./dist/server/index.js"
     },
+    "./webhooks": {
+      "types": "./dist/webhooks.d.ts",
+      "default": "./dist/webhooks.js"
+    },
     "./env": "./env.d.ts",
     "./components": "./components/index.ts",
     "./package.json": "./package.json"
@@ -67,6 +71,7 @@
     "server",
     "internal",
     "components",
+    "webhooks",
     "env.d.ts",
     "types.ts"
   ],

packages/astro/src/webhooks.ts

@@ -0,0 +1 @@
+export * from '@clerk/backend/webhooks';