React集成Firebase认证出现auth/invalid-api-key错误如何解决？

排查方案 #

• 检查.env文件位置：必须放在项目根目录（和package.json同级），不能放在src目录或其他子目录下
• 确认修改环境变量后重启了开发服务：React 只有在启动npm start的时候才会加载.env文件的变量，修改后未重启会导致读取到的变量为空
• 校验.env文件格式：变量定义不要加引号、不要留多余前后空格，正确格式为REACT_APP_FIREBASE_API_KEY=你的实际API密钥，不要写成REACT_APP_FIREBASE_API_KEY="xxx"
• 临时硬编码测试定位问题：把firebase配置里的apiKey: process.env.REACT_APP_FIREBASE_API_KEY暂时替换为你从Firebase控制台复制的真实API密钥字符串，如果报错消失，可100%确认是环境变量加载失败导致的问题，再回头核对前面的环境变量配置即可
• 如果是部署到线上环境，不要把.env文件打包上传，需要在对应部署平台的环境变量配置面板单独配置所有REACT_APP_开头的变量，配置后需要重新触发部署生效

额外代码问题修复 #

你当前的AuthContext代码存在两处逻辑问题，会导致后续认证功能不可用：

1. AuthProvider没有传递children属性，导致被包裹的业务组件无法获取到上下文的值，需要修改返回部分：

return (
    <AuthContext.Provider value = {value}>
        {children}
    </AuthContext.Provider>
)

2. signup方法没有返回Promise，后续调用时无法处理异步结果、捕获错误，修改为：

function signup(email, password){
    return auth.createUserWithEmailAndPassword(email, password)
}

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