I am trying to deploy my nextjs project through vercel. I use firebase in the project so i have uploaded my firebase keys to vercel under environment variables. on the local environment it runs fine since it uses the env.local file for the env variables but I am having significant trouble with vercel.

Any help would be appreciated.

My firebase config file is as follows (I’m leaving the commented code just to give a bigger picture of what i’ve tried):

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";

// // Type definitions for Firebase
// export const API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY as string;
// export const AUTH_DOMAIN = process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN as string;
// export const PROJECT_ID = process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID as string;
// export const STORAGE_BUCKET = process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET as string;
// export const MESSAGING_SENDER_ID = process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID as string;
// export const APP_ID = process.env.NEXT_PUBLIC_FIREBASE_APP_ID as string;
// export const MEASUREMENT_ID = process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID as string;

// export const API_KEY = process.env.REACT_APP_API_KEY as string;
// export const AUTH_DOMAIN = process.env.REACT_APP_AUTH_DOMAIN as string;
// export const PROJECT_ID = process.env.REACT_APP_PROJECT_ID as string;
// export const STORAGE_BUCKET = process.env.REACT_APP_STORAGE_BUCKET as string;
// export const MESSAGING_SENDER_ID = process.env.REACT_APP_MESSAGING_SENDER_ID as string;
// export const APP_ID = process.env.REACT_APP_APP_ID as string;
// export const MEASUREMENT_ID = process.env.REACT_APP_MEASUREMENT_ID as string;

// const firebaseConfig = {
//   apiKey: API_KEY,
//   authDomain: AUTH_DOMAIN,
//   projectId: PROJECT_ID,
//   storageBucket: STORAGE_BUCKET,
//   messagingSenderId: MESSAGING_SENDER_ID,
//   appId: APP_ID,
//   measurementId: MEASUREMENT_ID,
// };


const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY as string,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN as string,
  projectId: process.env.REACT_APP_PROJECT_ID as string,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET as string,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID as string,
  appId: process.env.REACT_APP_APP_ID as string,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID as string,
};

export default firebaseConfig;


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storageRef = getStorage(app);
const auth = getAuth(app);

export { app, auth, db, storageRef };

My env variables in vercel:

I keep getting the following error:

    FirebaseError: Firebase: Error (auth/invalid-api-key).
    at v (ed756598-a831d6f53351aa8d.js:16:523)
    at _ (ed756598-a831d6f53351aa8d.js:16:571)
    at i.instanceFactory (ed756598-a831d6f53351aa8d.js:1021:2780)
    at s.getOrInitializeService (8267-486190a7869a0d11.js:186:2798)
    at s.initialize (8267-486190a7869a0d11.js:186:2173)
    at i.popupRedirectResolver (ed756598-a831d6f53351aa8d.js:1021:178)
    at iv (ed756598-a831d6f53351aa8d.js:1021:202)
    at 63465 (layout-a8a3315fdf32cc09.js:1:765)
    at s (webpack-37e1d6712f871409.js:1:152)
    at 84940 (layout-a8a3315fdf32cc09.js:1:9533)
and

    Error: Minified React error #423; visit https://react.dev/errors/423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at iZ (5578221e-7c84dc17c8769948.js:1:118353)
    at ia (5578221e-7c84dc17c8769948.js:1:95166)
    at 5578221e-7c84dc17c8769948.js:1:94988
    at il (5578221e-7c84dc17c8769948.js:1:94995)
    at oJ (5578221e-7c84dc17c8769948.js:1:92351)
    at oZ (5578221e-7c84dc17c8769948.js:1:91770)

at MessagePort.T (1602-b9c3299b438f1149.js:1:84213)