Clerk - Webhook

最近学习nextjs后，想用它构建自己的博客网站。在 Authorization上出现了许多选择。可以自己实现，也可以使用Auth Libraries。这里我选择使用了clerk, clerk 提供了用户认证系统，用户数据首先存储在Clerk的系统中， 但是我想将用户维护在自己的数据库中应该如何实现呢？

客户端同步

//认证回调中处理
useEffect(() => {
  if (userId) {
    fetch('/api/sync-user', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId })
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('User sync failed');
      }
      return response.json();
    })
    .catch(error => {
      console.error('User sync error:', error);
      // 可以添加错误提示或重试逻辑
    });
  }
}, [userId]);

轮询

简单讲就是定期的调用clerk的api检查用户数据变化, 将用户信息同步到数据库。不推荐这种做法，既浪费资源又可能错过一些关键的变化。

Webhooks

翻阅clerk的文档，发现了更优雅的解决方案 - clerk webhook 介绍。

简单介绍一下webhook的使用：

创建webhook

1.Clerk Dashboard > Configure > Webhooks

2.Add Endpoint URL
需要注意的是Endpoint URL 必须是公网可访问的https url, 那本地开发环境如何调试呢 ？
别急， 我们可以借助 ngrok 帮我们实现暴露本地服务。
推荐大家使用docker 安装 ngrok镜像， 通过docker 起一个ngrok的服务。打开对应的服务端口可以看到ngrok帮我们生成了一个公网的访问地址，我们可以通过这个地址访问到本地的服务。

将生成的地址添加到Endpoint URL就可以了，当然生产环境直接配置我们项目部署地址就好了。
3.选择订阅的事件类型：user.created, user.updated, user.deleted。我们的需求是同步用户信息到数据库，所以订阅了这几个事件。

验证并使用webhook

Add your Signing Secret to .env
Make sure the webhook route is public
Create a route handler to verify the webhook
Narrow to a webhook event for type inference
官方文档中都有对应的详细介绍，就不再一一赘述了。

Summary

Webhook确保了数据的及时同步，同时减少了不必要的API调用和资源消耗, 我觉得是同步用户数据到数据库的首选方法。
配置方便使用简单，希望大家都用起来。