Firebase invalid api key error in console

Question

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

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

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

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