React Firebase Error auth/invalid-api-key trying to use .env 文件答案

【问题标题】：React Firebase Error auth/invalid-api-key trying to use .env fileReact Firebase Error auth/invalid-api-key trying to use .env 文件
【发布时间】：2023-02-07 12:57:07
【问题描述】：

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

我进入 localhost: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 抱怨它是重复的，不能有其中的两个..

【问题讨论】：

尝试重新启动服务器，如果vscode将其识别为常规文本文件就没有问题，您只需要为其安装扩展即可

标签： reactjs firebase authentication oauth-2.0

【解决方案1】：

我能够解决我的问题。
问题是我在 src 文件夹中有 .env 文件，
什么时候它应该位于 src 文件夹之外（又名根目录）
还必须重新启动服务器以反映更改。

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

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

在中创建一个名为.env 的新文件根项目文件夹（不是内部 src文件夹但向上一级。记住，它应该在同一时间级别为 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的原因地方）。

【讨论】：