如何在不使用模拟器的情况下启用认证并使用Firebase实时数据库

排查本地模拟器配置残留 #

首先确认是否有隐藏的模拟器配置导致请求指向localhost:9099：

• 检查项目根目录的.env/.env.local文件，删除类似REACT_APP_FIREBASE_AUTH_EMULATOR_HOST=localhost:9099的环境变量
• 查看firebase.json，如果存在emulators.auth配置，确保本地未通过Firebase CLI启动模拟器相关服务
• 清除浏览器的LocalStorage/IndexedDB中Firebase相关缓存，避免旧配置残留

修正认证与数据库监听流程 #

由于数据库规则要求auth != null，必须确保用户成功登录并完成认证状态同步后，再初始化数据库监听。调整代码逻辑如下：

import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
import { getDatabase, ref, onValue } from "firebase/database";
import { initializeApp } from "firebase/app";

// 初始化Firebase App
const firebaseConfig = { /* 你的Firebase控制台配置 */ };
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);

// 存储数据库监听取消函数
let unsubscribeFirebaseListener = null;

// 监听认证状态变化，确保登录后再读取数据库
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("用户已登录:", user.uid);
    // 初始化数据库监听
    const myRef = ref(db, '/myresource');
    unsubscribeFirebaseListener = onValue(myRef, (snapshot) => {
      const data = snapshot.val();
      console.log("获取到数据:", data);
    }, (error) => {
      console.error("数据库读取失败:", error);
    });
  } else {
    console.log("用户未登录");
    // 取消数据库监听
    if (unsubscribeFirebaseListener) {
      unsubscribeFirebaseListener();
      unsubscribeFirebaseListener = null;
    }
  }
});

// 登录操作函数
const handleLogin = (email, password) => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      console.log("登录成功:", user);
    })
    .catch((error) => {
      console.error("登录失败:", error.code, error.message);
    });
};

额外检查项 #

• 更新Firebase SDK：执行npm install firebase@latest，避免旧版本SDK的兼容性问题
• 确认控制台配置：
  • 确保Firebase控制台已启用邮箱/密码认证方式
  • 确认测试用的邮箱账号已在控制台创建或通过注册流程生成
  • 数据库规则已在控制台发布生效（修改规则后需点击"发布"按钮）

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