logoTaitd.dev()

Sử Dụng Clerk Webhooks với Ngrok

5 min read
-- views
-- likes
-- comments
Trịnh Đình Tài

Trịnh Đình Tài

@taitd153

Sử Dụng Clerk Webhooks với Ngrok

1. Giới thiệu

Webhook là một cơ chế giúp website tự động thông báo và gửi dữ liệu thời gian thực đến các hệ thống khi có một sự kiện nào đó phát sinh trên website, ví dụ như thực hiện đăng ký, đăng nhập, add giỏ hàng, v.v.

Clerk là một nền tảng quản lý xác thực và người dùng, hỗ trợ webhook để gửi thông báo khi có thay đổi về người dùng, phiên đăng nhập, v.v.

Ngrok là công cụ tạo một đường hầm công khai (public tunnel) đến ứng dụng đang chạy trên local, giúp người khác mạng có thể truy cập được localhost của bạn thông qua custom domain của ngrok. Ví dụ: mydomain.ngrok.io => localhost:3000

Trong bài viết này, chúng ta sẽ học cách:

  • Cấu hình Clerk webhook với Next.js
  • Chạy ngrok để nhận request từ Clerk.
  • Kiểm tra và debug webhook.

2. Tạo project Next.js với Clerk

Trong bài viết này, mình sẽ tạo một ứng dụng Next.js để nhận request webhook, bạn có thể thực hiện tương tự với Express, Fastify hoặc các thư viện khác nhé.

Tạo project Next.js

Tạo project Next.js mới tích hợp sẵn Clerk.

git clone https://github.com/clerkinc/clerk-next-app.git

Tạo application trên Clerk Dashboard

git
  • Copy biến môi trường vào file .env.local tại thư mục gốc của project
git
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

Chạy ứng dụng ở localhost

Chạy ứng dụng bằng lệnh

pnpm run dev

Màn hình chính của ứng dụng:

git

3. Chạy Ngrok

Cài đặt Ngrok

Cài đặt ngrok tại địa chỉ https://ngrok.com/download

Chạy Ngrok để tạo tunnel

ngrok http 3000

Bạn sẽ nhận được một URL có dạng:

Forwarding https://random-subdomain.ngrok.io -> http://localhost:3000

Ví dụ:

git

Okey, copy public URL của Ngrok lên browser và xem thành quả nhé :D

git

4. Tạo Webhook Trong Clerk

Tạo Webhook trên Clerk Dashboard

  • Đăng nhập vào Clerk Dashboard.
  • Chọn Webhooks từ menu bên trái.
  • Nhấn Add Endpoint.
git

Cấu hình Webhook

  • Endpoint URL: Public URL từ ngrok.
  • Events: Chọn các sự kiện mà bạn muốn webhook lắng nghe (ví dụ: user.created, user.deleted, user.updated).
git

Chúng ta sẽ có một webhook mới, copy Signing Secret để sử dụng cho các bước tiếp theo.

git

4. Chạy Ngrok

Ngrok giúp bạn tạo một URL công khai cho ứng dụng local:

Cài đặt Ngrok

Nếu chưa có ngrok, cài đặt bằng lệnh:

npm install -g ngrok

Chạy Ngrok

ngrok http 3000

Bạn sẽ nhận được một URL có dạng:

Forwarding https://random-subdomain.ngrok.io -> http://localhost:3000

Copy URL HTTPS để sử dụng trong bước tiếp theo.

5. Cập Nhật Webhook URL trong Clerk

Quay lại Clerk Dashboard, cập nhật URL webhook thành:

https://random-subdomain.ngrok.io/webhook

Nhấn Save Changes.

5. Kiểm Tra Webhook

Bạn có thể thử gửi một webhook test từ Clerk:

  • Trong Clerk Dashboard, mở webhook vừa tạo.
  • Nhấn Send Test Event.
  • Kiểm tra terminal, bạn sẽ thấy dữ liệu webhook xuất hiện trong console của server.js.

Nếu webhook chạy thành công, bạn đã tích hợp Clerk Webhooks với ngrok thành công!

6. Xác Thực Webhook (Tùy Chọn)

Để đảm bảo webhook đến từ Clerk, bạn có thể xác thực bằng Clerk Webhook Secret.

Cài đặt thư viện crypto:

npm install crypto

Cập nhật server.js để xác thực webhook:

const crypto = require("crypto")
const WEBHOOK_SECRET = "your-webhook-secret" // Lấy từ Clerk Dashboard

app.post("/webhook", (req, res) => {
  const signature = req.headers["clerk-signature"]
  const payload = JSON.stringify(req.body)
  const hash = crypto
    .createHmac("sha256", WEBHOOK_SECRET)
    .update(payload)
    .digest("hex")

  if (hash !== signature) {
    return res.status(401).send("Unauthorized")
  }

  console.log("Valid Webhook Received:", req.body)
  res.status(200).send("Webhook received")
})

Kết Luận

Bạn vừa học cách thiết lập Clerk Webhooks trên local bằng ngrok. Đây là công cụ hữu ích khi thử nghiệm webhook mà không cần deploy lên server.

Tóm tắt các bước:

  1. Tạo webhook trong Clerk và chọn sự kiện cần lắng nghe.
  2. Chạy ứng dụng Express để nhận request webhook.
  3. Dùng ngrok để tạo URL công khai.
  4. Cập nhật webhook URL trong Clerk.
  5. Gửi test event để kiểm tra webhook.
  6. (Tùy chọn) Xác thực webhook bằng secret key.

Bạn có thể áp dụng cách này cho nhiều hệ thống webhook khác như Stripe, GitHub, v.v.