Deploying my nextjs project on Vercel gives me the error: "FirebaseError: Firebase: Error (auth/invalid-api-key)"

Question

它在构建过程中给了我一大堆错误：

(node:748) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:466:40)
    at _assert (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:470:15)
    at file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5913:13
    at Component.instanceFactory (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5930:11)
    at Provider.getOrInitializeService (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
    at Provider.initialize (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:234:31)
    at initializeAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:584:27)
    at getAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5979:12)
    at /vercel/path0/.next/server/chunks/190.js:32:68
(Use `node --trace-warnings ...` to show where the warning was created)
(node:748) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 13)
(node:748) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
> Build error occurred
Error [FirebaseError]: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:466:40)
    at _assert (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:470:15)
    at file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5913:13
    at Component.instanceFactory (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5930:11)
    at Provider.getOrInitializeService (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
    at Provider.initialize (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:234:31)
    at initializeAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:584:27)
    at getAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5979:12)
    at /vercel/path0/.next/server/chunks/190.js:32:68 {

老实说，我不知道我在看什么。有人可以帮我缩小可能是什么问题吗？为什么 API 密钥在本地正常工作时无效？

Answer 1

我认为针对这种情况最常见的解决方案是创建 2 个文件。第一个文件是带有密钥的 .env。然后 'firebase.config.js':

export const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
};

最终在 firebase 中导入并插入对象：

import { firebaseConfig } from './firebase.config';
firebase.initializeApp(firebaseConfig);

Answer 2

原来我只需要将环境变量添加到 Vercel。哎呀

Deploying my nextjs project on Vercel gives me the error: "FirebaseError: Firebase: Error (auth/invalid-api-key)"

Deploying my nextjs project on Vercel gives me the error: "FirebaseError: Firebase: Error (auth/invalid-api-key)"

firebase

next.js

vercel