Github-pages deploy, firebase request Error: \"Missing or enough permissions.\" in React

Question

我在我的 React 应用程序中使用了 firebase。 当我的应用程序部署到网络时，我遇到了问题。 （通过 github 页面）。 这里奇怪的部分是它告诉我我没有权限，而我的 firebase 规则设置为允许所有传入请求（见图）。

有谁知道如何解决这个问题/知道为什么会这样？

当我按下“获取令牌”按钮时，我使用以下查询从 usersData 集合请求数据：

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

async function getDataFromUser() {
        // we get the documentId of the user with:
        // docId = user.uid; The uid of the user is the same as the uid of the document in the users' collection.
        const docRef = doc(firestoreDB, 'usersData', user.uid).withConverter(tokensConverter);
        // we get the document
        const docSnap = await getDoc(docRef);
        // print the document to the console
        console.log(docSnap.data());

        // we get the data from the document and set it to the states
        setTokens(docSnap.data().tokens); // we set the tokens to the state
        setUsername(docSnap.data().username); // we set the username to the state
    }

    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({});

    // sign up a new user with email and password
    const createUser = (email, password) => {
        return createUserWithEmailAndPassword(auth, email, password);
    };

    // login an existing with email and password
    const signIn = (email, password) =>  {
        return signInWithEmailAndPassword(auth, email, password)
    }

    // reset password
    const resetPassword = (email) => {
        return sendPasswordResetEmail(auth, email);
    }

    // logout the user
    const logout = () => {
        return signOut(auth)
    }

    // delete the user
    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);
};

My firebase rules

What it should do (this is on localhost)

Error when deployed on the web (github-pages)

Answer 1

我开始这个项目是作为我用 react 和 firebase 制作的第一个项目的副本。

我在下面列出的文件中编辑了我的项目 ID，但忘记在我的 .env.production.local 文件中更改此 ID。

因此，当我在 localhost 上使用我的数据库进行测试时，我使用了 .env.development.local 文件中的正确 ID，但是当我使用 github-pages 发布我的项目时，它尝试使用具有错误 ID 的另一个文件，这当然是不起作用。

短版：确保您的 .env 文件具有正确的数据/为本地和公共部署填写。

.env files

A field for my project id

Example Firebase config where I was filling in my project id from the .env file