FirebaseError：Firebase：部署站点上的错误（auth/invalid-api-key）

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 身份验证控制台中将域名添加到授权域。

网站链接- https://serverflow.netlify.app/

Github 链接- https://github.com/Pranav016/serverflow

Answer 1

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

• 问题是我在将站点部署到 Netlify 后添加了环境变量，并认为刷新站点会加载环境变量。 即使我的持续部署已设置并且我在设置环境变量后进行了多次部署，但它没有工作并且给出了相同的错误。

• 在在线尝试了许多解决方案后，再次手动构建项目并部署它对我有用。

附加上下文-

• 在我的站点无法在 Netlify 上运行后，我还尝试将它部署在 Vercel 上，并且由于同样的原因在那里遇到了同样的问题，我在部署后添加了 env vars。

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

最终解决方案-

1. 确保您已在 firebase 认证控制台中授权域访问授权 API。 Use URL for firebase auth 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。 阅读有关 env 文件及其优先级列表的更多信息。

Answer 2

如果您从 Github 导入项目

在部署之前和选择一个 repo 之后，单击Show Advanced和New Variable将在那里。