如何从Clerk获取用户登录与登出时间？求技术指导

1. 获取当前登录时间（实时会话） #

Clerk的会话（Session）对象自带createdAt字段，对应用户当前登录会话的创建时间，也就是本次登录时间。可以通过useSession钩子直接获取：

import { useSession, useClerk } from '@clerk/clerk-react';
import { useState, useEffect } from 'react';

const Timesheet = () => {
  const [activeTab, setActiveTab] = useState("Time Sheet");
  const { session } = useSession();
  const clerk = useClerk();
  const [signInTime, setSignInTime] = useState(null);
  const [signOutTime, setSignOutTime] = useState(null);

  // 监听会话变化，更新登录时间
  useEffect(() => {
    if (session) {
      // session.createdAt 是ISO格式字符串，可直接转为Date对象
      setSignInTime(new Date(session.createdAt));
    }
  }, [session]);

  // 处理登出并记录登出时间
  const handleSignOut = async () => {
    const currentSignOutTime = new Date();
    // 可选：将登出时间发送到你的后端存储
    // await fetch('/api/save-signout-record', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ userId: clerk.user.id, signOutTime: currentSignOutTime })
    // });
    setSignOutTime(currentSignOutTime);
    await clerk.signOut();
  };

  return (
    <div>
      {signInTime && <p>本次登录时间: {signInTime.toLocaleString()}</p>}
      {signOutTime && <p>本次登出时间: {signOutTime.toLocaleString()}</p>}
      <button onClick={handleSignOut}>登出</button>
    </div>
  );
};

2. 获取历史登录/登出记录 #

如果需要用户的历史登录、登出记录，Clerk本身不会持久化存储这类数据，需要结合Clerk Webhook和你的后端服务实现：

• 配置Clerk Webhook，监听session.created（用户登录触发）和session.ended（用户登出触发）事件
• 当Webhook收到事件时，将事件中的时间戳（created_at或ended_at）与用户ID绑定，存储到你的数据库
• 前端调用自己的后端接口，拉取用户的历史登录/登出数据，替换你代码中fetchSignInSignOutTimeFromServer的逻辑

关键注意点 #

• session.createdAt仅对应当前会话的登录时间，用户重新登录后该值会更新为新的登录时间
• 登出时间需要主动捕获：要么在调用clerk.signOut()前记录当前时间，要么通过Webhook的session.ended事件获取
• 历史记录必须依赖自有数据库存储，Clerk不会保留用户的所有会话历史数据

内容的提问来源于stack exchange，提问作者Yash Repal