React应用部署Github Pages后Firebase请求出现权限不足错误

问题场景 #

React应用集成Firebase，本地环境功能正常，但部署到Github Pages后，点击「Get Tokens」按钮时触发权限错误：Missing or insufficient permissions.，Firestore规则已设置为允许所有请求。

核心代码片段 #

获取用户数据组件 #

const {user, logout, deleteSignedUser} = UserAuth();

async function getDataFromUser() {
    // 用户文档ID与user.uid一致
    const docRef = doc(firestoreDB, 'usersData', user.uid).withConverter(tokensConverter);
    const docSnap = await getDoc(docRef);
    console.log(docSnap.data());

    setTokens(docSnap.data().tokens);
    setUsername(docSnap.data().username);
}

const [tokens, setTokens] = useState(undefined);
const [username, setUsername] = useState(undefined);

return(
<>
    {tokens && <h4>Tokens available: {tokens}</h4>}
    {username && <h4>Username: {username}</h4>}

    <Button onClick={getDataFromUser} 
       variant='primary' 
       className="col-6">
       Get Tokens
    </Button>
</>);

AuthContext 实现 #

import { createContext, useContext, useEffect, useState } from 'react';
import {
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signOut,
    onAuthStateChanged,
    sendPasswordResetEmail,
    reauthenticateWithCredential,
    deleteUser,
    EmailAuthProvider,
} from 'firebase/auth';
import { auth } from '../services/firebase';

const UserContext = createContext(undefined);

export const AuthContextProvider = ({ children }) => {
    const [user, setUser] = useState({});

    // 注册新用户
    const createUser = (email, password) => {
        return createUserWithEmailAndPassword(auth, email, password);
    };

    // 用户登录
    const signIn = (email, password) =>  {
        return signInWithEmailAndPassword(auth, email, password)
    }

    // 重置密码
    const resetPassword = (email) => {
        return sendPasswordResetEmail(auth, email);
    }

    // 用户登出
    const logout = () => {
        return signOut(auth)
    }

    // 删除当前用户
    const deleteSignedUser = async (password) => {
        const credential = EmailAuthProvider.credential(auth.currentUser.email, password)
        const result = await reauthenticateWithCredential(auth.currentUser, credential)

        await deleteUser(result.user)
    }

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            console.log(currentUser);
            setUser(currentUser);
        });
        return () => {
            unsubscribe();
        };
    }, []);

    return (
        <UserContext.Provider value={{ createUser, user, logout, signIn, resetPassword, deleteSignedUser}}>
            {children}
        </UserContext.Provider>
    );
};

export const UserAuth = () => {
    return useContext(UserContext);
};

排查方向与解决方法 #

• 规则未发布：检查Firebase控制台的Firestore规则，确认修改后点击了右上角的「发布」按钮，未发布的规则不会生效到线上环境。
• 用户认证状态异常：
  • 在getDataFromUser开头添加console.log(user)，确认线上环境点击按钮时user.uid是否存在。如果user为null或undefined，说明认证状态未正确持久化。
  • 显式设置Firebase Auth的持久化策略，在初始化Auth时添加：

    import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";
    
    const auth = getAuth(app);
    setPersistence(auth, browserLocalPersistence)
      .catch(err => console.error(err));
    

• Firestore初始化错误：确认线上环境的Firestore实例firestoreDB使用的是生产环境配置，而非本地模拟器地址。
• 授权域名未添加：进入Firebase控制台「Authentication > 设置 > 授权域名」，添加你的Github Pages域名（如xxx.github.io）。
• 缓存问题：强制刷新页面（Ctrl+F5）清除浏览器缓存，同时确认Github Pages部署的是最新代码版本。

内容的提问来源于stack exchange，提问作者Xander Bigarè