Search code examples
javascriptfirebasenext.jsvercel

Vercel deployment issues with firebase: environment variables

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: 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)
Solution

  • I ended up using .PUBLIC.FIREBASE declaration to allow access to my environment variables. my new environment variables have the format: const API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY as string; (you have to add these in vercel under env variables as well). Vercel apparently cannot access env variables without next public keyword.

    Caution, this does make them more accessible during production than just using process.env.REACT_APP_API_KEY. but even REACT_APP doesn't make environment variables completely secure.

    Security should be handled through firestore security rules and cloud functions/ servers.