React环境下如何通过用户UID获取Firebase Auth的lastSignInTime

注意：Firebase 客户端SDK不支持直接通过前端批量获取所有用户的账号信息（包含lastSignInTime），该权限仅开放给Firebase Admin SDK，防止普通用户越权访问其他用户的敏感数据。

方案1：前端直接获取当前登录用户的lastSignInTime #

仅适用于只需要获取当前登录用户自身登录时间的场景：

• 先在React项目中安装Firebase客户端依赖：npm install firebase
• 完成Firebase客户端初始化后使用如下代码获取：

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useEffect, useState } from "react";

const UserSignInTime = () => {
  const [lastSignInTime, setLastSignInTime] = useState('');
  const auth = getAuth();

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (user) => {
      if (user) {
        // 直接从用户元数据中读取lastSignInTime
        setLastSignInTime(user.metadata.lastSignInTime);
      }
    });
    return () => unsub();
  }, [auth]);

  return <div>用户上次登录时间：{lastSignInTime}</div>
};
export default UserSignInTime;

该方案限制：仅能获取当前登录用户的信息，无法拉取其他指定UID或全量用户的lastSignInTime。

方案2：批量拉取全量/指定UID用户的lastSignInTime #

需要通过Firebase云函数/自建后端中转调用Firebase Admin SDK实现，避免将Admin权限暴露在前端：

第一步：部署云函数接口 #

1. 初始化Firebase Cloud Functions项目，安装依赖：npm install firebase-admin firebase-functions
2. 云函数侧代码示例：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.getAllUserLastSignInTime = functions.https.onCall(async (data, context) => {
  // 生产环境必须加权限校验，比如仅管理员账号可调用
  // if (!context.auth?.token?.isAdmin) throw new functions.https.HttpsError('permission-denied', '无权限访问');

  const allUsers = [];
  let nextPageToken;
  // 循环拉取全量用户，Admin SDK单次listUsers最多返回1000条用户数据
  do {
    const listResult = await admin.auth().listUsers(1000, nextPageToken);
    listResult.users.forEach(userRecord => {
      allUsers.push({
        uid: userRecord.uid,
        lastSignInTime: userRecord.metadata.lastSignInTime,
        email: userRecord.email
      });
    });
    nextPageToken = listResult.pageToken;
  } while (nextPageToken);

  // 若传入指定UID数组则过滤返回对应数据
  if (data.uidList && Array.isArray(data.uidList)) {
    return allUsers.filter(item => data.uidList.includes(item.uid));
  }
  return allUsers;
});

第二步：React前端调用云函数 #

1. 安装Functions依赖：npm install @firebase/functions
2. 前端调用代码示例：

import { getFunctions, httpsCallable } from "firebase/functions";
import { useState, useEffect } from "react";

const AllUserSignInTime = () => {
  const [userList, setUserList] = useState([]);
  const functions = getFunctions();
  const getAllUserTime = httpsCallable(functions, 'getAllUserLastSignInTime');

  const fetchData = async () => {
    try {
      // 如需拉取指定UID用户的信息，传参即可：getAllUserTime({uidList: ['xxx1','xxx2']})
      const res = await getAllUserTime();
      setUserList(res.data);
    } catch (err) {
      console.error('拉取失败', err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <ul>
      {userList.map(item => (
        <li key={item.uid}>
          UID：{item.uid} | 上次登录时间：{item.lastSignInTime}
        </li>
      ))}
    </ul>
  );
};
export default AllUserSignInTime;

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