CODEWITHSUNDEEP
javascripttypescriptfirebasefirebase-authenticationelectron
Ahmet Eroğlu
Ahmet Eroğlu

Reputation: 724

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.

Upvotes: 27

Views: 69514

Answers (18)

gourav verma
gourav verma

Reputation: 41

Don't forget to add to use this prefix REACT_APP while creating the .env file for the firebase.

REACT_APP_FIREBASE_API_KEY = "YOUR_KEY"

Upvotes: 0

Cristi Gutierrez
Cristi Gutierrez

Reputation: 5

I had the same error in my React.js project. What I had done wrong was creating my .env file inside the 'src' folder instead of the client folder. Therefore check that your .env file is in the right directory in case it helps.

Upvotes: 0

Kunal Kalwar
Kunal Kalwar

Reputation: 965

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);

Upvotes: 0

Alaa Adel
Alaa Adel

Reputation: 1

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

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

Upvotes: 0

Kamlesh Kaparvena
Kamlesh Kaparvena

Reputation: 1

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

  • .env file should not be in src folder.

Upvotes: -1

flair
flair

Reputation: 93

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.

Upvotes: 0

omeatai
omeatai

Reputation: 1121

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

Upvotes: 2

Vaelin
Vaelin

Reputation: 918

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

Upvotes: 15

Rohan Nero
Rohan Nero

Reputation: 160

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

Upvotes: 1

Nikita
Nikita

Reputation: 303

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

}

Upvotes: 1

Kabir
Kabir

Reputation: 11

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.

Upvotes: 1

Rezzak
Rezzak

Reputation: 1

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

Upvotes: 0

Shubrato Kumar
Shubrato Kumar

Reputation: 41

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.

Upvotes: 3

Muhsin Khan
Muhsin Khan

Reputation: 1

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.

Upvotes: 0

Mamta Chaudhari
Mamta Chaudhari

Reputation: 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

Upvotes: 0

gg-dev-05
gg-dev-05

Reputation: 407

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"

Upvotes: 4

mustaquenadim
mustaquenadim

Reputation: 81

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.

Upvotes: 8

Unknown Beginner
Unknown Beginner

Reputation: 193

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;

Upvotes: 4

Related Questions