Firebase Auth 重定向登录后管理自定义状态的策略

import { getAuth, GoogleAuthProvider, signInWithRedirect, getRedirectResult } from "firebase/auth";
import { app } from "./firebaseConfig"; // 假设您已初始化Firebase应用

const auth = getAuth(app);
const provider = new GoogleAuthProvider();

// 1. 在触发重定向登录前存储自定义参数
async function initiateSignIn(actionType) {
  const customParams = {
    action: actionType,
    timestamp: Date.now(), // 可以添加时间戳以增加唯一性或过期逻辑
  };

  // 将对象序列化为JSON字符串后存储
  localStorage.setItem("appCustomState", JSON.stringify(customParams));

  // 可选：设置Firebase provider的自定义参数，但注意这些不会被getRedirectResult返回
  provider.setCustomParameters({
    prompt: 'select_account',
    // 如果Firebase Auth的state参数对你有用，也可以在这里设置
    // state: 'someFirebaseSpecificState'
  });

  try {
    await signInWithRedirect(auth, provider);
  } catch (error) {
    console.error("重定向登录失败:", error);
    // 清除可能已存储的自定义参数，以防失败后再次加载
    localStorage.removeItem("appCustomState");
  }
}

// 2. 在应用加载时检查重定向结果并检索自定义参数
async function handleRedirectResult() {
  try {
    const result = await getRedirectResult(auth);
    if (result) {
      // 用户已成功登录
      const user = result.user;
      console.log("用户已登录:", user.displayName);

      // 检索之前存储的自定义参数
      const storedParamsString = localStorage.getItem("appCustomState");
      if (storedParamsString) {
        const retrievedParams = JSON.parse(storedParamsString);
        console.log("检索到的自定义参数:", retrievedParams);

        // 根据 retrievedParams.action 执行后续操作
        if (retrievedParams.action === "user_registration_complete") {
          console.log("完成用户注册流程...");
          // 执行注册完成后的逻辑
        } else if (retrievedParams.action === "update_profile") {
          console.log("引导用户更新个人资料...");
          // 执行更新资料的逻辑
        }

        // 3. 使用后清除存储的参数
        localStorage.removeItem("appCustomState");
      } else {
        console.log("未找到存储的自定义参数。");
      }
    } else {
      console.log("当前没有重定向结果。");
    }
  } catch (error) {
    console.error("获取重定向结果失败:", error);
    // 即使失败，也尝试清除可能已存储的自定义参数
    localStorage.removeItem("appCustomState");
  }
}

// 在应用初始化时调用，例如在React的useEffect或Vue的onMounted中
// 或者在主入口文件加载时
document.addEventListener("DOMContentLoaded", () => {
  handleRedirectResult();
});

// 示例：在某个按钮点击时触发登录
// <button onclick="initiateSignIn('user_registration_complete')">注册并登录</button>
// <button onclick="initiateSignIn('update_profile')">更新资料并登录</button>