'Firebase invalid api key error in console

I use Firebase-auth for my web application I'm developing with electron framework. I created an API key using project settings, and copied it into my html's body as it is suggested in Firebase guide. However, when I open the HTML page on the browser, console shows the following error.

code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error

Bottom part of the body of the HTML page is as follows.

 <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
          <script>
            // Initialize Firebase
            var config = {
              apiKey: "AIzaSyAXXXXXXXXXXXXXXXXXXXXjILO32ZDxRKY",
              authDomain: "jumbleup-773da.firebaseapp.com",
              databaseURL: "https://jumbleup-773da.firebaseio.com",
              projectId: "jumbleup-773da",
              storageBucket: "jumbleup-773da.appspot.com",
              messagingSenderId: "971123072180"
            };
            firebase.initializeApp(config);
          </script>

Note: I obfuscated the real key by changing 20 digits of it by X.

Solution 1:^[1]

Your API key is invalid, please check you have copied it correctly

This error can be showed for many reasons. I want to explain how I resolved this issue.

Firstly, I copied firebaseConfig variable clicking copy button for my website and kept it under my source folder making a file named firebase.config.js.

export const firebaseConfig = {
    apiKey: 'AIzaSxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'fir-axxxxxxxxxxxxxxxxxxxxxxxxxx',
    projectId: 'fir-axxxxxxxxxxxxxxxxx',
    storageBucket: 'fir-axxxxxxxxxxxxxxxxxx',
    messagingSenderId: '106xxxxxxxxxxxxxx',
    appId: '1:1064xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

Secondly, I called firebaseConfig variable by importing it in my App.js file.

import { firebaseConfig } from './firebase.config';

Finally, I used this variable in this line below.

firebase.initializeApp(firebaseConfig);

If you get something helpful from this solution please press on upvote. Thank you.

Solution 2:^[2]

First of all install firebase and then Import firebase at first as import firebase from 'firebase'; or in js script. The below code is used to connect the app to firebase this includes the id and all the details to connect firebase.

const config ={

    apiKey: "XXXXXXXXXXXX",
    authDomain: "app.firebaseapp.com",
    databaseURL: "https://app.firebaseio.com",
    projectId: "XXXXXX2",
    storageBucket: "XXXXXX.appspot.com",
    messagingSenderId: "5..........",
    appId: "1:52807............."
}

firebase.initializeApp(config);
export default firebase;

Solution 3:^[3]

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "chxxxxxxxxxxxxxx",
    projectId: "chxxxxxxxxxxxxxxxx",
    storageBucket: "chxxxxxxxxxxxxxxxx",
    messagingSenderId: "7xxxxxxxxxxxxxxx",
    appId: "1:7xxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "G-xxxxxxxxx"
  }
};

add this in your environment.ts

Solution 4:^[4]

I am using React.
I was also getting the same error because in my .env file I had , present after the declaration.

Before: REACT_APP_API_KEY="AIXXXXXXXXXXXX",

After: REACT_APP_API_KEY="AIXXXXXXXXXXXX"

Solution 5:^[5]

First of all...

Make sure that you copied the key correctly.
If you are confirmed you copied correctly and rest of the stuffs are ok but still Error is showing...
then just close all of your files and log out from you Gmail account
and then Login again and open your files and folder.

Hopefully it will work. In my case... it worked as I said.

Solution 6:^[6]

After firebase configuration like this :

`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,

You may stop the server by Ctrl + c => y and again run the server (npm start). It will work. I'm also getting such error and after following this my code running well. You may try, hope it will helpful for you.

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
Solution 2	Rakesh Shrestha
Solution 3	gg-dev-05
Solution 4	gg-dev-05
Solution 5	Muhsin Khan
Solution 6	Shubrato Kumar

'Firebase invalid api key error in console

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]