Error in Firebasse”assert.ts:128 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)

Why do I have the error that it says invalid API keys?

This is the sample .env.local

 REACT_APP_apiKey=AI**************JmXMKaFQQQrRzp4Q
  REACT_APP_authDomain=sample-258a7.firebaseapp.com
  REACT_APP_projectId=sample-258a7
  REACT_APP_storageBucket=sample-258a7.appspot.com
  REACT_APP_messagingSendearId=
  REACT_APP_appId=1:1014069435807:web:04390779a92d4e3a4fb1aa

In another file:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";

project under its own project settings
const firebaseConfig = {

  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
};

//Initializing Firebase
const app = initializeApp(firebaseConfig);

This is the error:

The Package.json:

Answer

Make sure your .env.local is placed in the root directory, and not in any subfolders like src or public. Other than that, nothing seems to be wrong with your code. Just to be safe, cross check your API key with firebase. P.S. There’s no need to hide your firebase public API key, its going to be visible in your app to the general public anyway.