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

Config:

vite v2.6.4,

react v17.0.0,

firebase v9.5.0

When I deployed my app on netlify, it all went good. But when I go to my app its all blank and the console log me:

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

For the sake of my firebase project I put the api key in a /.env file that is ignore by git. I've read the https://vitejs.dev/guide/env-and-mode.html page but don't understand so much what to do.

.env file

VITE_APP_API_KEY= *thekey*
VITE_APP_AUTH_DOMAIN= *theauthdomain*
VITE_APP_PROJECT_ID= *theprojectid
VITE_APP_STORAGE_BUCKET= *thebucket*
VITE_APP_MESSAGING_SENDER_ID= *themsId*
VITE_APP_APP_ID= *theappid*

.gitignore file

node_modules
.DS_Store
dist
dist-ssr
*.local
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

Firebase.js file

const firebaseConfig = {
    apiKey: import.meta.env.VITE_APP_API_KEY,
    authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_APP_PROJECT_ID,
    storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_APP_APP_ID
}

Folder Architechture

Solution 1:^[1]

I also got the same error. I was using named exports, but I solved it by changing to default exports.

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

export default auth

Solution 2:^[2]

You can set initialValue for apiKey as some string (not empty) as this

apiKey: process.env.NEXT_PUBLIC_API_KEY || 'mock_key'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ajusa
Solution 2	Nikita

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]