如何在CRA中正确配置Firebase的.env环境变量？

核心问题分析 #

你遇到的auth/invalid-api-key错误，根源在于环境变量命名不符合CRA规则、变量值格式错误，以及代码中的小疏漏：

1. CRA要求所有自定义环境变量必须以REACT_APP_为前缀，你的变量名少了APP_部分
2. .env文件中变量值加了引号，会导致读取到的API Key带引号，成为无效值
3. getAuth()未传入初始化的app实例，存在潜在风险

正确配置步骤 #

1. 修正.env文件（项目根目录下）

将变量名改为REACT_APP_开头，去掉值的引号，同时修正messagingSenderId的变量名：

REACT_APP_API_KEY=xxxxxxxxxxx
REACT_APP_AUTH_DOMAIN=xxxxxxxxxxxxxx
REACT_APP_PROJECT_ID=xxxxxxxxxx
REACT_APP_STORAGE_BUCKET=xxxxxxxxxxx
REACT_APP_MESSAGING_SENDER_ID=xxxxxxxxxxxxx
REACT_APP_APP_ID=xxxxxxxxxxxxx

注意：.env文件必须放在项目根目录（和package.json同级），不要放在src文件夹下

2. 修正firebase.js代码

更新process.env的引用名，并确保getAuth传入app实例：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth, GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app)
export const storage = getStorage(app)
export const authentication = getAuth(app); // 显式传入app实例
export const google = new GoogleAuthProvider()
export const facebook = new FacebookAuthProvider()
export const twitter = new TwitterAuthProvider()
export const github = new GithubAuthProvider()

3. 重启开发服务器

CRA不会自动重新加载.env文件，修改后必须关闭当前的npm start进程，重新执行npm start

4. 额外说明

• 不需要手动安装dotenv，CRA已经内置了对环境变量的支持，安装了也不会影响，但并非必须
• 如果需要区分开发/生产环境，可以创建.env.development和.env.production文件，CRA会自动加载对应环境的配置

内容的提问来源于stack exchange，提问作者佚名