auth/api-key-not-valid.-请传递-a-valid-api-key

Question

我有一个包含project/.env、project/frontend和project/server的项目文件，在project/frontend中，我还有一个.env（project/frontend/.env），其中包含：

REACT_APP_FIREBASE_API_KEY="xxxxxxx";
REACT_APP_FIREBASE_AUTH_DOMAIN="xxxxxxx";
REACT_APP_FIREBASE_PROJECT_ID="xxxxxx";
REACT_APP_FIREBASE_STORAGE_BUCKET="xxxxx";
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="xxxxxx";
REACT_APP_FIREBASE_APP_ID="xxxxxxx";
REACT_APP_FIREBASE_MEASUREMENT_ID="xxxxxxx";

我还有project/frontend/config/firebase.js，例如：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const storage = getStorage(app);

export { app, auth, storage };

我尝试将 .env 中的相同值复制粘贴到 firebase.js 并且它有效。我尝试打印 project/frontend/src/components/auth/Login.js 中的值，登录时出现错误，并且打印的值是正确的。我该如何解决这个问题？

编辑： Login.js 是这样的：

import { Link, useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import { useAuth } from "../../contexts/AuthContext";

export default function Login() {
    const navigate = useNavigate();

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [loading, setLoading] = useState(false);

    const { currentUser, login, setError } = useAuth();

    useEffect(() => {
        if(currentUser) {
            navigate("/");
        }
    }, [currentUser, navigate]);

    async function handleFormSubmit(e) {
        e.preventDefault();

        try {
            setError("");
            setLoading(true);
            await login(email, password)
            navigate("/");
        } catch(e) {
            setError(e.message);
        }

        setLoading(false);
    }

    return (
        <div>
            <div className="authbox">
                <h2>Brag Game</h2>

                <form id="login-form" method="post" action="/login" onSubmit={handleFormSubmit}>
                    <div>
                        <div>
                            <label htmlFor="login-email">email: </label>
                            <input
                                type="email"
                                id="login-email"
                                autoComplete="email"
                                onChange={(e) => setEmail(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <label htmlFor="login-password">password: </label>
                            <input
                                type="password"
                                id="login-password"
                                autoComplete="current-password"
                                onChange={(e) => setPassword(e.target.value)}
                                required
                            />
                        </div>
                    </div>
                    <button type="submit" id="loginbutton" disabled={loading}>Sign In</button>
                </form>
                <div className="authtips">Don't have an account?<br />
                    <div className="authlink"><Link to="/register">Register here!</Link></div>
                </div>
            </div>
        </div>
    );
}

Answer 1

我遇到了同样的错误，我在所有环境变量前面加上

REACT_APP_...

，并尝试使用

process.env

访问它们，就像在 firebase.js 中一样。然而，我注意到像你一样，当将它们记录到控制台时，它们被正确加载，所以这意味着你现在没问题。过了一会儿我意识到我这边没有实际的错误，而是某种网络错误导致了无法连接到数据库的问题。遇到此问题后，您是否尝试重新启动服务器？有时，这本身可能会有所帮助。

Answer 2

对于遇到此问题的任何人，请确保在 .env 文件中每个变量后面没有任何逗号或任何内容：

      VITE_API_KEY="AIzaSyAXXXXXXXXXXXXXXXXXXXXjILO32ZDxRKY",
      VITE_AUTHDOMAIN="myproject.firebaseapp.com",
      VITE_PROJECT_ID="myproject",
      VITE_STORAGE_BUCKET="myproject.appspot.com",
      VITE_APP_ID="971123072180"

删除那些逗号。