Невозможно отправить запрос POST от клерка в Версель

Я пытаюсь добавить вебхук в свой проект для Клерка

приложение\api\webhooks\route.ts

import { Webhook } from "svix";
import { headers } from "next/headers";
import { WebhookEvent } from "@clerk/nextjs/server";
import { createUser, deleteUser, updateUser } 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
  const WEBHOOK_SECRET = process.env.NEXT_CLERK_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,
    });
  }

  const eventType = evt.type; 

  console.info({ eventType });
  console.info("hi");

  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,
      fullName: `${first_name}${last_name ? `${last_name}` : ""}`,
      username: username!,
      email: email_addresses[0].email_address,
      profilePicture: image_url,
    });
    return NextResponse.json({ message: "OK", user: mongoUser });
  }
  if (eventType === "user.updated") {
    //agar user mai kuch update hota hai tab mujhe
    const { id, email_addresses, image_url, username, first_name, last_name } =
      evt.data;
    const mongoUser = await updateUser({
      clerkId: id,
      updateData: {
        fullName: `${first_name}${last_name ? `${last_name}` : ""}`,
        username: username!,
        email: email_addresses[0].email_address,
        profilePicture: image_url,
      },
      path: `/profile/${id}`,
    });
    return NextResponse.json({ message: "OK", user: mongoUser });
  }

  if (eventType === "user.deleted") {
    const { id } = evt.data;
    const deletedUser = await deleteUser({
      clerkId: id!,
    });
    return NextResponse.json({ message: "OK", user: deletedUser });
  }

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

промежуточное программное обеспечение.ts

 import { authMiddleware } from "@clerk/nextjs";
    
    export default authMiddleware({
      publicRoutes: [
        "/",
        "/api/webhooks(.*)",
        "question/:id",
        "/tags",
        "tags/:id",
        "/profile/:id",
        "/community",
        "/jobs",
      ],
      ignoredRoutes: ["/api/webhook", "/api/chatgpt"],
    });
    
    export const config = {
      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
    };

После этого я добавил URL-адрес конечной точки в веб-хук клерка. Изображение URL-адреса конечной точки Clerk Webhook

Но когда я проверяю свой журнал развернутого проекта, я не вижу ни одного запроса, связанного с /api/webhook от Clerk. Скриншот проекта Vercel Deployed > журналы

Пожалуйста, помогите мне решить эту проблему!

Я перепроверил весь свой код и не смог выяснить проблему

Разве вы не понимаете причину сбоя в приборной панели Clerk?

grekier 20.03.2024 09:06

@grekier нет, приятель, я просто вижу неудавшуюся ошибку, как показано на изображении веб-перехватчика, которое я приложил ранее

Darshan Verma 20.03.2024 18:51

Это грустно и для меня это веская причина не пробовать Клерка ;)

grekier 20.03.2024 19:40
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
3
236
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решена эта проблема, отключив аутентификацию в настройках проекта. Для получения более подробной информации проверьте эту статью: https://vercel.com/docs/security/deployment-protection/methods-to-protect-deployments/vercel-authentication#managing-vercel-authentication

Другие вопросы по теме