React集成Firebase Auth报错auth/invalid-api-key，.env配置求助

问题核心 #

硬编码API_KEY能正常运行，说明Firebase配置本身无问题，故障源于环境变量未正确加载。

排查与修复步骤 #

1. 调整.env.local文件位置 #

你的.env.local放在src/目录下是错误的，必须移到项目根目录（和package.json同级）。Create React App仅会加载根目录下的环境变量文件。

2. 重启开发服务器 #

修改.env.local后，必须重启React开发服务器才能让新变量生效，执行：

npm start
# 或
yarn start

3. 修正变量名匹配错误 #

你在firebase.config.js里的appId对应变量名写错了：

// 错误写法
appId: process.env.REACT_APP_MESSAGING_APP_ID
// 正确写法
appId: process.env.REACT_APP_APP_ID

同时.env.local里的对应变量名也要修改：

REACT_APP_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd

4. 检查变量值格式 #

确保.env.local里的变量值前后无多余空格，比如：

# 错误（含空格）
REACT_APP_API_KEY= AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
# 正确
REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU

5. 验证环境变量加载状态 #

在firebase.config.js中临时添加日志，确认变量是否被正确读取：

console.log("API_KEY:", process.env.REACT_APP_API_KEY);

若输出undefined，回到步骤1检查文件位置。

修正后代码示例 #

根目录.env.local #

REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
REACT_APP_AUTH_DOMAIN=XXXXX.firebaseapp.com
REACT_APP_PROJECT_ID=name-name-name
REACT_APP_STORAGE_BUCKET=name-name-name.appspot.com
REACT_APP_MESSAGING_SENDER_ID=5XXX7XXXX5XX
REACT_APP_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd

src/utils/firebase.config.js #

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

const app = firebase.initializeApp({
  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
});

export const auth = app.auth();

export default app;

内容的提问来源于stack exchange，提问作者Arnaud Le Tallec