Firebase invalid api key error in console

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