API Key not found error

[irace]

Hello,

I am following the README instructions very closely but cannot get email/password authentication to work for the life of me:

import React, { Component } from "react";

import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";

const config = {
  // Copied directly from the Firebase console...
};
firebase.initializeApp(config);

const firebaseUIConfig = {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD
    }
  ],
  tosUrl: "https://irace.me",
  privacyPolicyUrl: "https://irace.me"
};

class App extends Component {
  render() {
    return <StyledFirebaseAuth uiConfig={firebaseUIConfig} firebaseAuth={firebase.auth()} />;
  }
}

When choosing my email address from the dropdown, I get the following error:

[  5.887s] [firebaseui] Internal error: {"error":{"code":400,"message":"API Key not found. Please pass a valid API key.","errors":[{"message":"API Key not found. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

When looking at the HTTP traffic, I see that the API key is in fact present:

Any ideas? Totally stuck on this – thanks in advance!

[bojeil-google]

It seems like the API key you are using is invalid. Perhaps you copied it incorrectly. You can also try to generating a new browser API key.

[irace]

Yeah – I don't know what I did here. I swear I copied it right out of the Firebase console, but alas I did end up with a weird key in there somehow. False alarm, thanks for taking a look @bojeil-google

[lblaise250]

i am having the same problem with signup codes
please if you found a way to fix it share

thank you

{"error":{"code":400,"message":"API Key not found. Please pass a valid API key.","errors":[{"message":"API Key not found. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

[jeroenpelgrims]

In my case the issue was that I had previously created a project with the same name.
Take a look here: https://console.developers.google.com/cloud-resource-manager
I had 2 projects there that somehow conflicted with each other.

For me, since this was a new project, the easiest solution was to delete the entire project (in firebase AND in the cloud resource manager) and then create it from scratch.

[mephix]

@resurge , do you mean you had two projects with literally the same value in the field called "Project name"? (in the link you pasted to the Google IAM & Admin page). I am getting the same error and my project also has the same name as a previous project, so I changed that field (ie renamed the project), but it did not fix the error. But I suspect that since you completely deleted the project, you also tried simply renaming, without success? Then what led you to the more drastic step of deleting the project? (I am reluctant to do so since mine is pretty far along).

[mephix]

hi guys, I figured it out without having to delete my project. The solution was "REGENERATE KEY" in the top right of the screenshot below.

Note that I also renamed my project as per @resurge , so the solution may be these two things in combination.

[jeroenpelgrims]

@mephix
That's what i think yeah.
I noticed that I was using a different (new) project ID in my firebase config yet the corresponding api key for that project was Invalid.
Then I tried the api key for the other project, which had the same name (but not project id) , and that worked!

So I'm suspecting this is an issue with firebase itself and not this library, but this was the highest ranking Google result for this error message so I thought it could be helpful to write my workaround here.

[mephix]

@resurge Yes it was very helpful, you saved me somewhere between nine and infinity hours of frustration, thankyou. Hopefully this helps others too until it gets fixed.

[rubalIslam]

open firebase project overview copy the api key and paste it in your var config{ apikey =".....",...} location

[abhishekpatel946]

How to fetch the API key from .env.

I'm working with firebase auth with react but if I'm giving key in code directly it works but if I hide my key using DOTENV it gives me an error like that....

apikey: process.env.NODE_ENV
apikey: process.env.MY_KEY

its give me the same error

ErrorError: {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

[nihal9956]

Hey guys I was also facing very same problem and it was kind of frustrating but I solved this just go on firebase console and then go in authentication inside sign in methods scroll down to authorized domain and remove localHost:3000 as default after that you can use your firebase link easy without any problem.

[abhishekpatel946]

How to fetch the API key from .env.

I'm working with firebase auth with react but if I'm giving key in code directly it works but if I hide my key using DOTENV it gives me an error like that....

apikey: process.env.NODE_ENV
apikey: process.env.MY_KEY

its give me the same error

ErrorError: {"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

This issue has been resolved.

You need to just follow these steps

• first, create a .env file in your project root dir

• then put your firebase api key just like this

REACT_APP_FIREBASE_KEY = "my-api-key-is-here"

• then fetch this api key in your firebase configuration like this

import * as firebase from "firebase/app";
import "firebase/auth";
const fireConfig = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_KEY,
....
});
export default fireConfig;

[NarayanBavisetti]

I was trying to bypass login test in cypress in which the data is stored in firebase but I am getting this error

{"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

I followed this documentation
https://stackoverflow.com/questions/48735570/is-it-possible-to-use-cypress-e2e-testing-with-a-firebase-auth-project/58333792#58333792

I have put this in command.js page
const firebaseApp = firebase.initializeApp({
apiKey: ${process.env.REACT_APP_FIREBASE_API_KEY},
authDomain: ${process.env.REACT_APP_FIREBASEZ_AUTH_DOMAIN},
databaseURL: ${process.env.REACT_APP_FIREBASE_DATABASE_URL},
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},
measurementId: ${process.env.REACT_APP_FIREBASE_MEASUREMENT_ID}

});

and created .env file separately and added the API there

[errorhandlee]

@resurge Yes it was very helpful, you saved me somewhere between nine and infinity hours of frustration, thankyou. Hopefully this helps others too until it gets fixed.

What u did