Hello, can you provide an ENV example?

bro can u tell me how did u resolve this issue?
0

when i sync clerk data to my back end using webhook and do all steps i recive 401 error on vercel Log

this is app/api/webhook/route.ts

/* eslint-disable camelcase */
import { Webhook } from "svix";
import { headers } from "next/headers";
import { WebhookEvent } from "@clerk/nextjs/server";
import { createUser, updateUser, deleteUser } from "@/lib/actions/user.action";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
// You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
// TODO: add your webhook secret to .env.loca
const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET;

if (!WEBHOOK_SECRET) {
throw new Error(
"Please add 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,
});
}

// Get the event type
const eventType = evt.type;

console.log({ eventType });

// Handle the event
if (eventType === "user.created") {
const { id, email_addresses, image_url, username, first_name, last_name } =
evt.data;

// Create a new user in your database
const mongoUser = await createUser({
  clerkId: id,
  name: `${first_name}${last_name ? ` ${last_name}` : ""}`,
  username: username!,
  email: email_addresses[0].email_address,
  picture: image_url,
});

return NextResponse.json({ message: "OK", user: mongoUser });

}

if (eventType === "user.updated") {
const { id, email_addresses, image_url, username, first_name, last_name } =
evt.data;

// Update a user in database
const mongoUser = await updateUser({
  clerkId: id,
  updateData: {
    name: `${first_name}${last_name ? ` ${last_name}` : ""}`,
    username: username!,
    email: email_addresses[0].email_address,
    picture: image_url,
  },
  path: `/profile/${id}`,
});

return NextResponse.json({ message: "OK", user: mongoUser });

}

if (eventType === "user.deleted") {
const { id } = evt.data;

// Delete a user in database
const deletedUser = await deleteUser({ clerkId: id! });

return NextResponse.json({ message: "OK", user: deletedUser });

}

return new Response("", { status: 200 });
}

middleware.ts

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
publicRoutes: [
"/",
"/api/webhook",
"question/:id",
"/tags",
"/tags/:id",
"/profile/:id",
"/community",
"/jops",
],
ignoredRoutes: ["/api/webhook", "/api/chatgpt"],
});

export const config = {
matcher: ["/((?!.+\.[\w]+$|_next).)", "/", "/(api|trpc)(.)"],
};

after deploy my app in vercel and copy url on clerk endpoint then clerk faild and i get 401 [post] api/webhook

what shoud i do to solve this 401 warnning

i try to change ignoredRoutes once i add it and delete it, once change webhooksecret in .envlocal and add env variables on vercel and re-deploy and nothing change