quickstart-js: Firebase Error: auth/invalid-api-key, Your API key is invalid, please check you have copied it correctly.
Ionic version: v1.3.1
AngularFire: 2.0.2
Firebase js: v3.3.0 Build: 3.3.0-rc.7
Issue: I am using the correct config keys from Firebase console > Web Setup, all of a sudden my app started throwing error from Firebase as below:
R {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}
Ionic code to login user with firebase email password enabled firebase.auth().signInWithEmailAndPassword()
Expected: What should be the fix I have checked the API key its same? My app was working fine with same source code and API key and now it is just looping the above error in console.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 72 (2 by maintainers)
Commits related to this issue
- Fix auth/invalid-api-key 'https://github.com/firebase/quickstart-js/issues/61\#issuecomment-1001188854' — committed to k14lb3/picpic by k14lb3 2 years ago
Replaced the API key and it worked
Hello, this is my current config file
and I am using it like so-
When I use the key string directly in the config file it works but not when it is used as my env variables…
@paloman fixed it by re-copying and pasting my API key, so try that
@nicolasgarnier - resolved this myself please go ahead and close this issue
I have the solution finally, just check how you have imported your firebaseConfig.js where you have initilize your firebase. most of the case we export default firebaseConfig and import it as a object
import {firebaseConfig} from ‘./src/config/FirebaseConfig’; ===== Wrong Order import FirebaseConfig from ‘./src/config/FirebaseConfig’; ===== Correct Order
I too am getting this error. Using Google Authentication works perfectly in develop but not in production after deploy. I’m at a loss to figure out why and/or where this needs to be configured.
if someone experiencing this with Nextjs and firebase this solution may help
in next.config.js add this
then in your firebase config
then restart the server, it should work.
This may or may not be of any use to you, but are the env variables set in a
.env
file in the root dir?@bhaskar-nair2
My firebase.js
.env file
If anyone having problem with the .env file in react project
2 things to keep in mind
Make extra sure that .env with key=value pairs is located at the root of the react project
After creating the .env RESTART dev server so that webpack picks up the new project changes. It will rebuild the project taking into accouunt the newly created .env file. Otherwise webpack has no information that you created this file.
@code-vagabond doesn’t seems a good idea to make public your api keys
After spending hours here nothing worked for me except direct adding the string into the firebaseConfig, even checking with console the data as string was there but the sdk continues to complaining and I didn’t want to expose my keys on the file.
But actually find a simple way just
apiKey: String(process.env.NEXT_PRIVATE_APIKEY),
for some reason even that key being a string before String() now it works.Another information is this was a problem only with auth sdk, firestore sdk alone works fine without any “hack”
I am also getting the error @terrysmyth is getting.
{code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}
@nicolasgarnier I am getting these errors and i have checked and checked the API Key (even though i just copied and pasted it). Would could be causing this?
Regards,
Terry
@nicolasgarnier Hi Nicolas, I’m quite new to firebase and would like to use authentication service for Google in a simple Angular2 test app.
But get the error: message: “Your API key is invalid, please check you have copied it correctly.”}
I would appreciate if you help me with it. 😃
Regards, Rozita
In case you are using NextJS be aware that you need to add the
NEXT_PUBLIC_
prefix to the .env vars so they are exposed to the browser, your.env.local
would look something like thisHad the same problem while building a react-native app: Before:
export const firebaseConfig = { apiKey: "", etc etc };
After:
export default firebaseConfig = { apiKey: "", etc etc };
I’m glad things worked out for you!
Thanks, this is exactly my problem. I mistakenly put the .env file under
src
folder.Yes, but where?
I had the same issue. I solved it by doing:
Using NextJS with Firebase v9. Here is my solution…
So, I have the same problem with the .env variables not working, but it does work when hard coding the string. I noticed in the .env they are single quoted when evaluated. This is dumb, but I just concatenated an empty string to the end of each process.env.VAR like so:
apiKey: process.env.API_KEY + “”;
for me it appears the difference was the api key as a single quote string ‘my-key’ and a double quote string “my-key”. I think appending an empty string to the end is dumb and would love a recommendation.
My .env was in my /src directory and not the root 🤦🏾♂️
for my case I needed to restart my dev server since I entered them while it was already running
Hello everyone I am actually having this problem for some reason firebase works locally but once deployed I get this error {code: “auth/invalid-api-key”, message: “Your API key is invalid, please check you have copied it correctly.”} no really sure what to do?
here is my config file
and here is my .env.development
and I am importing the config file correctly
If anyone is still having trouble, what I found to work is initializing an app with a name i.e. not using the “[DEFAULT]” app and passing that app in whenever you require another firebase function. This helps prevent confusion of where which app with which key should be used.
Source of Firebase Javascript Documentation
Spent Hours trying all the solutions but surprisingly this worked !!!
If you are using React, my problem was that I didn’t write .env variables with REACT_APP_(name of the variable) Pretty funny but at the same time frustrating.
thank you, it was working on my live server but not on localhost but restarting the server resolved my issue, twas this easy
Make sure you are not using quotes or commas in your .env file. I had the same issue, but fixed it after removing quotes
Hello everyone, I had the same problem and had made mistakes. First of all, in my .env.development file I had written the api key in quotes, in addition, at the end of each line I had placed a comma. Of course you have to restart the server for the environment variables to change. I hope I have helped something.
I was facing the same issue , after a lot of struggle , what i found out was that , in the .env file I was placing " ," (comma) after every variable:
Before:(in .env file): REACT_APP_API_KEY= adlagjdhksdjhgd, REACT_APP_PROJECT_ID= asldjgklfslkg,
After: REACT_APP_API_KEY= adlagjdhksdjhgd REACT_APP_PROJECT_ID= asldjgklfslkg
How i figured this out, I tried to the environment variables : console.log(process.env.REACT_APP_API_KEY , and there was a comma in the string .
I also faced the same problem. When I used the key string directly it works but it didn’t work on environment variables. It shows
Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
error. But, this error I solved after relocating my.env.local
file in the root folder from the src folder. You could try this way to solve this error.@code-vagabond true, Im not using the admin just firestore + auth but yes I guess you are controlling the access via domain allowed, but I prefer to not direct expose it on the code + manage the keys by .env file for dev vs prod scenarios.
@octavioamu hi, yes in my case I only needed my public API key for Firebase initialisation which is obviously ok to share. In your case you are trying to initialise firebase-admin I imagine
If people are still experiencing this issue, I had the same problem when using a .env.local file for all of the info for firebase what I had to do was stop the test site and restart it again so it realises there’s a new .env file I don’t know why but it worked so 😃
Thank you so much @abe157. You just saved me days.
Thanks. It works (Firebase + NodeJs)
Anyone facing this error:
SOLUTION
Notice one thing before importing any module you have to export a module.
ex -
const config = require('../util/config');
to run successfully your config details should be exported properly
Another gotcha which got me:
My .env file is APPENDED in the pipeline. I forgot to add a newline (
\n
) to the end of the .env files that are already in my repo when I added something to it.So, if you’re appending your
.env
files in your pipelines which are already slightly populated in the repo itself, end in a newline.In fact, end every file always with a newline. It’s a convention, and ignoring it apparently leads to bugs like this.
I solved it moving env variables from now.json -> env: {} to .env file
What I did
const firebaseConfig = {apiKey: '', etc, etc}
then I exported itexport deafault firebaseConfig
import
import firebaseConfig from './firebase'
This was in Angular 8