如何在react firebase-ui中判断用户是否为首次登录

方案1：通过signInSuccessWithAuthResult回调直接获取（推荐） #

react-firebaseui的signInSuccessWithAuthResult回调自带首次登录标识，你可以直接从回调参数中获取isNewUser字段：

• 回调的第一个参数authResult.additionalUserInfo.isNewUser为布尔值，true表示首次登录，false表示已有登录记录

你只需要修改原有uiConfig中的回调逻辑即可：

const uiConfig = {
  signInFlow: "popup",
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
  forceSameDevice: false,
  callbacks: {
    signInSuccessWithAuthResult: (authResult, redirectUrl) => {
      // 直接获取是否为首次登录用户
      const isFirstLogin = authResult.additionalUserInfo.isNewUser;
      const user = authResult.user;
      
      // 在这里执行你的Firestore存储逻辑
      if (isFirstLogin) {
        // 新用户写入初始化数据
        firebase.firestore().collection("users").doc(user.uid).set({
          email: user.email,
          displayName: user.displayName,
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
        })
      } else {
        // 老用户可以执行更新逻辑或者跳过
      }
      
      // 保留原有返回值，不做自动跳转
      return false;
    },
  },
};

方案2：在onAuthStateChanged中通过用户元数据判断 #

如果你需要在全局的登录状态监听中判断首次登录，可以比对用户元数据的创建时间和最近登录时间：

useEffect(() => {
  firebase.auth().onAuthStateChanged(async (user) => {
    if (user) {
      // 比对创建时间和最近登录时间，一致则为首次登录
      const isFirstLogin = user.metadata.creationTime === user.metadata.lastSignInTime;
      
      // 可选：增加Firestore校验逻辑，避免客户端时间误差导致判断错误
      const userDoc = await firebase.firestore().collection("users").doc(user.uid).get();
      const userExisted = userDoc.exists;
      
      if (isFirstLogin || !userExisted) {
        // 执行新用户存储逻辑
      }
    }
  });    
}, []);

注意：方案2中单独比对元数据可能会因为客户端时区或者缓存问题出现极小概率的判断误差，搭配Firestore的用户文档是否存在做二次校验可以100%保证判断准确。

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