FirebaseError: Firebase: Error (auth/invalid-api-key) on deployed site

Question

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
    at Ua (assert.ts:128:10)
    at Va (assert.ts:153:30)
    at register.ts:67:11
    at e.instanceFactory (register.ts:66:17)
    at e.value (provider.ts:318:33)
    at e.value (provider.ts:242:27)
    at qa (initialize.ts:66:25)
    at index.ts:44:10
    at firebaseConfig.ts:19:14
    at index.tsx:16:1

我在部署在 netlify 上的 react.js 站点的控制台中收到此错误。我已经检查了三次在环境变量中输入的 API 键，但它不起作用。 API 密钥在我的机器上本地工作正常，因此它似乎是 netlify 的问题。

我还在我的 firebase 身份验证控制台中将域名添加到授权域。

站点 link- https://serverflow.netlify.app/

Github link- https://github.com/Pranav016/serverflow

Answer 1

• 我能够解决这个问题，方法是再次构建项目，然后在 Netlify 上再次手动部署我的站点。

• 问题是我在将网站部署到 Netlify 后添加了环境变量，并认为刷新网站会加载环境变量。 尽管我的 Continuous-Deployment 已设置，并且我在设置环境变量后进行了多次部署，但它不起作用并且出现了相同的错误。

• 在网上尝试了很多解决方案后，再次手动构建项目并部署它对我来说很有效。

附加上下文-

• 在我的网站无法在 Netlify 上运行后，我也尝试将其部署在 Vercel 上，由于同样的原因在那里遇到了同样的问题，我在部署后添加了环境变量。

• 再次构建项目然后手动部署也对我有用。

结束解决方案-

1. 确保您已在 firebase 身份验证控制台中授权域访问授权 API。将 URL 用于 firebase 身份验证控制台- https://console.firebase.google.com/u/5/project/<your-project-name>/authentication/providers

2. 使用您的构建命令再次手动构建项目，在我的例子中通常是 npm build 或 yarn build。 然后使用命令-

   再次手动部署项目

a) 对于 Netlify（确保您安装了 Netlify CLI 并且项目中有 ./netlify 文件夹）

• netlify deploy --dir=build --prod

注意- 如果您没有 ./netlify 文件夹，则 运行 netlify init。 （需要 Netlify CLI）

b) 对于 Vercel（确保安装了 Vercel CLI 并且项目中有 ./vercel 文件夹）

• vercel --prod

如何避免这个问题-

创建项目并在构建和部署之前在 Netlify 项目控制台中添加环境变量。

如果您使用不同的开发和生产 API 并遇到此错误-

• 如果您使用不同的开发和生产 API 并遇到此错误，请使用您的生产 API 构建项目，然后进行部署。它肯定会开始工作。
• 利用 .env.development.local 和 env.production.local 文件来存储您的开发和生产 API。生产 API 将仅在构建项目时自动使用。 Read more about env files and their priority lists.