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.

Staciestack

is it script in your main process ? – Soane

I use this piece of code, in index.html which in turn calls renderer.js – Chairmanship

Try to write in render.js and append this js file in index.html – Soane

I got this error because my .env file containing my firebase api key had somehow gotten deleted. – Feuilleton

Answer 1

For those using Next.js, you need to preface each env var with NEXT_PUBLIC_.

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

Incandesce

Answer 2

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.

Barksdale

Answer 3

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;

Thermochemistry

Answer 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"

Allegory

Answer 5

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.

Tibiotarsus

Answer 6

I have a similar error. How I Solve it: I saw this when I created a .env file in the react project. it needs to restart the app again and everything works perfectly. So the Solution is, Press Ctrl + c then y and again start it npm start or whatever you used.

Cafard

Answer 7

I was getting the same error but the reason ended up being because I forgot to update my Vercel environment variables as opposed to only my local .env file.

Once I populated the Vercel environment variables, the error went away.

You can add or remove variables at this URL:

https://vercel.com/<team_name>/<project_name>/settings/environment-variables

Ilise

Answer 8

There are two Solutions for those using React with .env:

// Your web app's Firebase configuration
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,
};

1. Put quotes on all environmental variables:

// Your web app's Firebase configuration
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",
};

2. Restart the Server and it will accept env variables without quotes:

ctrl + C
yarn start / npm start

Idioplasm

Answer 9

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

Volumetric

Answer 10

First of all...

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

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

Gradin

Answer 11

If you use Vite with Firebase,use the following pattern

  const firebaseConfig = {
  apiKey: import.meta.env.REACT_APP_API_KEY,
  authDomain: import.meta.env.REACT_APP_AUTH_DOMAIN,
  projectId: import.meta.env.REACT_APP_PROJECT_ID,
  storageBucket: import.meta.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: import.meta.env.REACT_APP_APP_ID,
};

Doorstop

Answer 12

If you just add "export" keyword before const your job is done.

Example:

export const config ={

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

}

Longerich

Answer 13

When using .env for firebase config

Generally avoid reserved env names, including anything that starts with FIREBASE_

When using NextJS & .env:

All variables that are required for client-side firebase need to be prefixed by NEXT_PUBLIC_ e.g. NEXT_PUBLIC_FB_API_KEY

CAREFUL: avoid prefixing the firebase-admin config variables with NEXT_PUBLIC_, like you private key, as these would otherwise be leaked to the client.

Osprey

Answer 14

If you sure that your information is correct, the problem may be with quotes, try this solution

before : apiKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
after : apiKey:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

Avouch

Answer 15

In Next.js, environment variables that are prefixed with NEXT_PUBLIC_ are exposed to the browser, making them accessible in client-side code. This prefix ensures that the environment variable is available both on the server and the client.

When you use initializeApp(firebaseConfig) in client-side code, such as in a Next.js app, the Firebase initialization runs on the client, and thus it needs access to environment variables defined for client-side usage.

So we have to do like this->

.env ->

NEXT_PUBLIC_FIREBASE_API_KEY=A**********
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=*******.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=********
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=**********.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=************
NEXT_PUBLIC_FIREBASE_APP_ID=***************

Then use it like this->

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

Minnieminnnie

Answer 16

• If you are using react, make sure .env file should be in root folder.

• .env file should not be in src folder.

Fillmore

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Cheliform