I am trying to follow the tutorial here:
https://www.youtube.com/watch?v=ny92vcpOQFs
…but I get a 400 error back with the message "API Key not found. Please pass a valid API key".
The code section where the API key is provided is literally copied right from the GCP Identity Platform interface, and I have checked it multiple times.
I don’t know where to go from here, all the tutorials just take it for granted that this works.
The minimal reproduction is as follows, although I get the same result if I try to use firebase-ui-auth:
<!DOCTYPE html>
<html>
<head>
<title>Identity Platform Test</title>
<script src="https://www.gstatic.com/firebasejs/8.0/firebase.js"></script>
<script> //this section copied directly from GCP
var config = {
apiKey: '<Private but 100% correct>',
authDomain: 'my-site.firebaseapp.com',
};
firebase.initializeApp(config);
</script>
<script>
let email = '[email protected]';
let pw = 'private';
firebase
.auth()
.signInWithEmailAndPassword(email, pw)
.then((ac) => {
console.log('It worked.');
})
.catch((error) => {
console.log(error.toString());
});
</script>
</head>
<body>
Test
</body>
</html>
Just an update to say I’ve followed the instructions on both of these pages, made sure I have all the pre-requisites, etc. I feel like there’s some underlying assumption that is made but not communicated:
https://medium.com/@ThatJenPerson/whos-there-implementing-identity-platform-for-web-c210c6839d3b
2
Answers
It seems like a bug in GCP/Identity Platform.
If you start in Identity Platform, it will generate an API key for you. If you look at the Firebase console, the API Key will match there. ...but it won't work (for anything it seems).
If you then create an app (seemingly any app) it will regenerate the project API Key (which doesn't seem right). You don't need any of the App configuration information - just the
apiKeyandauthDomainare required from the project, but now the API key (at the project level, not the App level) is regenerated (and GCP Identity Platform will now reflect this new key), and that newly generated API Key will work correctly.The app can just be an HTML file sitting on your local computer and it will still work - but only if you set up SOME app in Firebase (even though you never use it for anything).
It seems problematic that both the
projectIdandappIdare missing from the config. In my multiple Firebase authentication implementations, I always include those.Inside your
Firebase Project Settings, scroll down and copy the entire config just to be certain:https://console.firebase.google.com/u/0/project/<YOUR_PROJECT_NAME_HERE>/settings/general
**EDIT (MORE INFO)
After visiting
https://console.firebase.google.comand selecting your project, click the littlegear iconin the top left >Project Settings> (scroll all the way down to the code sample they give you)You would see something like this:
In this screenshot (purposely cut-off) you’ll see:
const firebaseCon….
That’s the entire config you need to be using – I’ve setup dozens of Firebase Firestore projects with all services and I don’t leave out the
projectIdandappIdever.Another thing to make sure of is that your
Firebase AuthenticationhasEmail / Passwordenabled. Go toBuild > Authentication > Sign-in method. Then make sure you’ve added and enabledEmail/Passwordoption.