React Firebase 尝试使用 .env 文件时出现错误 auth/invalid-api-key

Question

我正在尝试将 firebase 连接到我的 React Web 应用程序。
如果我使用直接来自 firebase.config.js 的原始密钥，一切都会正常。
但是，如果我尝试将原始密钥放入 .env 并使用 process.env 在 firebase.config 中调用它，它就不起作用。

---

我在本地主机中遇到错误：3000

Firebase: Error (auth/invalid-api-key).
createErrorInternal
C:/Users/user1/src/core/util/assert.ts:142
  139 |   );
  140 | }
  141 | 
> 142 | return _DEFAULT_AUTH_ERROR_FACTORY.create(
      | ^  143 |   authOrCode,
  144 |   ...(rest as AuthErrorListParams<K>)
  145 | );

---

在 firebase.config.js 中
v-- 原始密钥工作正常..但无法将其上传到 github..

// const firebaseConfig = {
//   apiKey: "raw key",
//   authDomain: "raw key",
//   projectId: "raw key",
//   storageBucket: "raw key",
//   messagingSenderId: "raw key",
//   appId: "raw key",
//   measurementId: "raw key"
// }

v--我想用这个，但是 process.env 不起作用

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID 
}

const app = firebase.initializeApp(firebaseConfig);
const firestore = app.firestore();
const auth = app.auth();

export { auth, firestore }

---

在.env

REACT_APP_FIREBASE_API_KEY = raw key
REACT_APP_FIREBASE_AUTH_DOMAIN = raw key
REACT_APP_FIREBASE_DATABASE_URL = raw key
REACT_APP_FIREBASE_PROJECT_ID = raw key
REACT_APP_FIREBASE_STORAGE_BUCKET = raw key
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = raw key
REACT_APP_FIREBASE_APP_ID = raw key
REACT_APP_MEASUREMENT_ID = raw key

---

我认为是错误的，但不知道解决办法
基于乱搞和多次搜索，我认为问题缩小到了 auth
这意味着我需要使用带有默认值的 initalizeApp ，但是我是否要创建带有空白值集的 app2 ？这是一个好方法吗？

还有一个问题..
所以人们似乎使用 .env.local，但是当我创建 .env.local 时，VSCode 只是将它们识别为常规文本文件。我需要安装某种 npm 吗？

我尝试使用预加载的默认值创建第二个initializeApp ..，但React抱怨它是重复的并且不能有其中的2个..

Answer 1

我能够解决我的问题。
问题是我在 src 文件夹中有 .env 文件，
当 它应该位于 src 文件夹之外（也称为根目录）
还必须重新启动服务器才能反映更改。

来源：https://stackoverflow.com/a/68945430/20362113

在 CREATE REACT APP 中使用环境变量的步骤（无需 dotenv 包）

• 在项目的

  root

  文件夹中创建一个名为 .env 的新文件（不是 在 src 文件夹内，但上一层。记住，一定要在同一时间 level 作为 package.json （这非常重要！！）

• 像这样定义变量（请注意，您定义的每个变量 应该以 REACT_APP_ 开头）

  示例：

  .env file

  REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU

  注意：您不必必须将值括在

  "" or ''

  中

• 现在您可以在任何组件中使用该变量，如下所示

  const apiKey = process.env.REACT_APP_ACCESS_KEY

  名称应与

  .env

  文件中给出的密钥匹配

• 现在，在尝试此操作之前，请始终记住重新启动本地 服务器。 一旦运行

  npm start

  ，它就可以工作了。此步骤适用于任何时候 您对

  .env

  文件进行更改。我们通常会忘记这一步，所以 可能不起作用。

• （可选）检查

  .env

  文件中是否存在

  .gitignore

  条目。如果

  .env

  的条目存在于

  .gitignore

  中，那么您的

  .env

  文件将不会被 推送到github（这就是为什么我们在第一个中使用

  .env

  的原因 地方）。

Answer 2

非常感谢！你帮我解决了很多头痛问题。