Firebase结合React JS使用的实现方案及选型疑问

你当前的服务端代码完全无法实现预期的登录校验效果 #

你在Express服务端引入的是客户端版本的Firebase Auth SDK，这个SDK的鉴权状态存储在自身运行时的内存单例中：

• 它不会自动识别前端请求携带的用户登录凭证，和前端实际的用户登录状态完全隔离
• 除非你在服务端启动流程中主动调用登录方法，否则你写的auth.currentUser永远返回null
• 多用户并发请求时，这个单例的状态会互相串扰，哪怕手动做状态同步也完全不具备生产可用性。

两类Firebase SDK的正确使用边界 #

Firebase的两类SDK有严格的运行环境要求，混用就会出现你现在的问题：

• 客户端SDK（你当前安装的firebase包）：只能在React前端代码中使用，负责触发登录流程（邮箱密码登录、第三方登录等）、管理本地用户登录态、自动刷新用户身份凭证（ID Token），也可以直接在客户端读写Firebase数据库/存储——前提是你配置好了对应的服务端安全规则。
• Admin SDK（firebase-admin包）：只能在Express服务端使用，拥有跳过安全规则的最高操作权限，绝对不能把Admin SDK的初始化密钥泄露到前端。

服务端鉴权的标准流程为：

1. 前端登录成功后，从客户端SDK拿到当前用户的ID Token，每次调用需要鉴权的服务端接口时，把Token放在请求的Authorization头中
2. 服务端用Admin SDK的verifyIdToken方法校验请求携带的Token是否合法、是否过期，解析出对应用户的UID
3. 基于解析出的用户信息做权限判断，再处理业务逻辑、返回响应

服务端/checkAuth接口的正确实现参考：

const express = require("express");
const cors = require("cors");
const admin = require("firebase-admin");

// 初始化Admin SDK，密钥文件从Firebase控制台下载，不要提交到前端代码仓库
const serviceAccount = require("./path/to/your/firebase-service-account-key.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "你的Firebase数据库地址"
});

const app = express();
app.use(cors());
app.use(express.json());

app.get('/checkAuth', async (req, res) => {
  // 从请求头提取客户端传入的ID Token
  const idToken = req.headers.authorization?.split("Bearer ")[1];
  if (!idToken) {
    return res.status(401).send("auth error: no token provided");
  }

  try {
    // 校验Token合法性，解析用户信息
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    const uid = decodedToken.uid;
    // 可在此处追加自定义权限判断逻辑，比如查询用户角色、校验账号状态等
    return res.status(200).send(`auth ok, user uid: ${uid}`);
  } catch (err) {
    // Token伪造、过期、无效时会进入该分支
    return res.status(401).send("auth error: invalid token");
  }
});

app.listen(3000, () => console.log("server running on port 3000"));

客户端使用Firebase SDK不存在固有安全漏洞 #

客户端SDK本身就是Firebase官方设计给前端直接调用的，所有安全管控都在Firebase服务端侧生效，和前端代码逻辑无关：

• 你只要给Realtime Database、Firestore、云存储等服务配置好正确的安全规则，限制用户只能读写自己有权限的资源，哪怕前端代码被恶意篡改，没有权限的请求到达Firebase服务端时也会被直接拦截
• 只要不把Admin SDK的密钥、服务端专属的高权限配置放到前端代码中，就不会出现越权风险
• 如果需要实现不能在客户端暴露逻辑的操作（比如调整用户权限、处理支付、操作敏感数据），把这部分逻辑放到Express服务端用Admin SDK实现即可。

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