I have deployed my web app on netlify but the site only shows a blank white page with following error in console.

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).

at F_ (assert.ts:142:44)
at U_ (assert.ts:167:30)
at new e (auth.ts:56:5)
at e.instanceFactory (index.ts:82:16)
at e.value (provider.ts:318:33)
at e.value (provider.ts:115:21)
at e.value (firebaseApp.ts:138:21)
at t.<computed> [as auth] (firebaseNamespaceCore.ts:185:29)
at Object.o [as auth] (firebaseNamespaceCore.ts:166:32)
at firebase.utils.js:39:30

I have doubled checked all the firebase config variables in my app, they are correct. I have also set the env variables on netlify. The app runs successfully on localhost. If the environment variables were not correct the site won’t compile on localhost.

Localhost:

Deployment on netlify:

The environment variables set on netlify app.

All the environment variables set on netlify have been double checked. They are the same as in .env file

>Solution :

This error usually occurs when the API key provided in the Firebase configuration is invalid
It is possible that the environment variables are not being correctly passed to the application during the build process on Netlify
You can try adding the environment variables declared in your .env.local file to Netlify as well Another way to solve this issue is by relocating the .env.local file from the src folder to the root folder. I hope these solutions resolve the issue