How to fix Firebase 9.0 invalid API key

Question

I have my API key stored in a local .env file in my React project, and it is correctly pasted directly from my firebase console setup page. However, I receive this error:

Firebase: Error (auth/invalid-api-key).
createErrorInternal
D:/src/core/util/assert.ts:101

   98 |   );
   99 | }
  100 | 
> 101 | return _DEFAULT_AUTH_ERROR_FACTORY.create(
      | ^  102 |   authOrCode,
  103 |   ...(rest as AuthErrorListParams<K>)
  104 | );

I don't see why React is giving me an error. I initialized Firebase in the following file:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth();

export default app;

Answer 1

It seems your env variables are invalid.

You can check a few things though.

1. You have to restart your server if your server is already running and you are changing/adding the env variables.
   
2. Make sure your env variable names are correct.
3. Make sure your env file is in root folder means it should be with your your src and public folder.
   

Answer 2

this problem occurs because , you might have written your env file in wrong way like this

// Wrong: 
REACT_APP_FIREBASE_KEY=”AHEHEHR”

// Right:
REACT_APP_FIREBASE_KEY=AHEHEHR

you don't have use any trailing comma or quotes , after or around you api key ,and after making changes to your env file you have to restart server