It gave me this wall of errors during the build:

(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 {

I honestly have no idea what I'm looking at. Can someone help me narrow down what might be the problem? Why is the API key invalid when it's working fine locally?

CodePudding user response：

I think the most common solution with this situation is to create 2 files. First file is .env with keys. Then '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,
};

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Finally import and insert object in firebase:

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Turns out I just had to add the environment variables to Vercel. Oops.