如何解决 Reactjs 中的 "Firebase: Error (auth/invalid-api-key)" 错误？

Question

我遇到一个非常令人沮丧的错误，涉及将 API 密钥与 Firebase 身份验证结合使用。

Firebase: Error (auth/invalid-api-key).

我正在使用环境变量来避免将我的 API 密钥硬编码到我的配置文件中。

尝试了很多事情：确保我正确地复制了 API 密钥、重新启动我的开发服务器、使用 firebase-admin npm 模块验证身份等

./src/config/firebase.js

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const app = firebase.initializeApp({
  apiKey: process.env.QUIZZI_FIREBASE_API_KEY,
  authDomain: process.env.QUIZZI_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.QUIZZI_FIREBASE_PROJECT_ID,
  storageBucket: process.env.QUIZZI_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.QUIZZI_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.QUIZZI_FIREBASE_APP_ID
});

export const auth = app.auth();
export const database = firebase.firestore();
export default app;

.env.local

QUIZZI_FIREBASE_API_KEY=xxx
QUIZZI_FIREBASE_AUTH_DOMAIN=xxx
QUIZZI_FIREBASE_DATABASE_URL=xxx
QUIZZI_FIREBASE_PROJECT_ID=xxx
QUIZZI_FIREBASE_STORAGE_BUCKET=xxx
QUIZZI_FIREBASE_MESSAGING_SENDER_ID=xxx
QUIZZI_FIREBASE_APP_ID=xxx

我也提到了 this thread，但 none 的解决方案对我有用。

如何摆脱这个错误？

Answer 1

深入挖掘线程 mentioned 后，我发现这是因为 create-react-app 的环境变量命名约定。

出于安全原因，我应该使用 REACT_APP_* 来命名任何环境变量。

归功于 this article。

参考the official docs了解更多详情。

Answer 2

这解决了我的问题 "process.env.QUIZZI_FIREBASE_API_KEY",...尝试在“....”之间设置变量

如何解决 Reactjs 中的 "Firebase: Error (auth/invalid-api-key)" 错误？

How to solve "Firebase: Error (auth/invalid-api-key)" error in Reactjs?

environment-variables

api-key

reactjs

firebase-authentication

create-react-app

./src/config/firebase.js

.env.local