[SOLVED] Netlify, environment variables are undefined

Netlify, environment variables are undefined

On the local server everything is working fine, but when I deployed it, the API for firebase from env vars is undefined for some reason...

Of course I added env vars in netlify settings. I’m also trying to redeploy the site with a clean cache, but still error: Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).

//firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const provider = new GoogleAuthProvider();

Solution

I had a similar issue with a deployment on Netlify. The thing that I was doing wrong was adding the environment variables after deployment. And then doing further deployments would just give the same error. What you can try is manually building the project again and then deploying it, and make sure to add your environment variables in Netlify project console before building and deploying it.