Firebase Error: auth/invalid-api-key, Your API key is invalid, please check you have copied it correctly.

[ghost]

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.

[nicolasgarnier]

@appplumbr can you point us to your app online if possible? (so we experience the issue)

If you prefer to get private support feel free to use our support channel instead: https://firebase.google.com/support/contact/troubleshooting/

[ghost]

@nicolasgarnier - resolved this myself please go ahead and close this issue

[ghost]

Replaced the API key and it worked

[nicolasgarnier]

I'm glad things worked out for you!

[pourashraf]

@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

[terrysmyth]

@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

[eddyekofo94]

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

[ghost]

Im getting the same error.... im using react-native... @terrysmyth @eddyekofo94 @nicolasgarnier @ghost

[eddyekofo94]

@paloman fixed it by re-copying and pasting my API key, so try that

[ghost]

@eddyekofo94 I did :/ but it didn't work... if you don't mind me asking, are you using the google-services.json file to import the key? or directly through initialize app? also is this a native android app? thanks for all your help

[eddyekofo94]

@paloman Yes I am the google-services.json to import the key, I am using ASP.Net Core. But sorry I don’t know how it is implemented in Android. I don’t know how it works on Android, if you’re still stuck I can go look it up later.

[adnanafzal565]

I am getting this error in core javascript.

[dyoung522]

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.

[lucasmouse]

Replaced the API key and it worked

Yes, but where?

[akashrauniyar35]

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

[bhaskar-nair2]

Hello, this is my current config file

const config = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DBURL,
  projectId: process.env.PID,
  storageBucket: process.env.BUCKET,
  messagingSenderId: process.env.MSGID
};

export default config;

and I am using it like so-

import firebase from "firebase/app";
import config from "./config";

firebase.initializeApp(config);

When I use the key string directly in the config file it works but not when it is used as my env variables..

[millerpils]

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

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

.env file

REACT_APP_API_KEY="key"
REACT_APP_AUTH_DOMAIN="domain"
REACT_APP_DATABASE_URL="url"
REACT_APP_PROJECT_ID="id"
REACT_APP_STORAGE_BUCKET="bucket"
REACT_APP_MESSAGING_SENDER_ID="id"

[urosran]

Had the same problem while building a react-native app: Before: export const firebaseConfig = { apiKey: "", etc etc };

After: export default firebaseConfig = { apiKey: "", etc etc };

[GustavoContreiras]

Replaced the API key and it worked

Where should I reset the API? I never assigned any authentication API anywhere in Firebase Console.

I'm using Flutter and received this error after migrate to AndroidX and switch to another notebook (the notebook where I did migration was working perfectly fine).

[ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: PlatformException(FirebaseException, An internal error has occurred. [ API key expired. Please renew the API key. ], null)

[ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: PlatformException(FirebaseException, An internal error has occurred. [ API key expired. Please renew the API key. ], null)
E/flutter ( 6509): #0      StandardMethodCodec.decodeEnvelope 
package:flutter/…/services/message_codecs.dart:564
E/flutter ( 6509): #1      MethodChannel.invokeMethod 
package:flutter/…/services/platform_channel.dart:302
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #2      FirebaseAuth.signInWithCredential
package:firebase_auth/src/firebase_auth.dart:278
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #3      AuthProvider.signInFirebase
package:wavecheck/…/resources/auth_provider.dart:117
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #4      Repository.signInFirebase
package:wavecheck/…/resources/repository.dart:35
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #5      AuthenticationBloc.startApp.<anonymous closure>
package:wavecheck/…/blocs/authentication_bloc.dart:55
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #6      _rootRunUnary  (dart:async/zone.dart:1132:38)
E/flutter ( 6509): #7      _CustomZone.runUnary  (dart:async/zone.dart:1029:19)
E/flutter ( 6509): #8      _FutureListener.handleValue  (dart:async/future_impl.dart:126:18)
E/flutter ( 6509): #9      Future._propagateToListeners.handleValueCallback  (dart:async/future_impl.dart:639:45)
E/flutter ( 6509): #10     Future._propagateToListeners  (dart:async/future_impl.dart:668:32)
E/flutter ( 6509): #11     Future._complete  (dart:async/future_impl.dart:473:7)
E/flutter ( 6509): #12     _SyncCompleter.complete  (dart:async/future_impl.dart:51:12)
E/flutter ( 6509): #13     _rootRunUnary  (dart:async/zone.dart:1132:38)
E/flutter ( 6509): #14     _CustomZone.runUnary  (dart:async/zone.dart:1029:19)
E/flutter ( 6509): #15     _FutureListener.handleValue  (dart:async/future_impl.dart:126:18)
E/flutter ( 6509): #16     Future._propagateToListeners.handleValueCallback  (dart:async/future_impl.dart:639:45)
E/flutter ( 6509): #17     Future._propagateToListeners  (dart:async/future_impl.dart:668:32)
E/flutter ( 6509): #18     Future._complete  (dart:async/future_impl.dart:473:7)
E/flutter ( 6509): #19     _SyncCompleter.complete  (dart:async/future_impl.dart:51:12)
E/flutter ( 6509): #20     _AsyncAwaitCompleter.complete  (dart:async-patch/async_patch.dart:28:18)
E/flutter ( 6509): #21     _completeOnAsyncReturn  (dart:async-patch/async_patch.dart:294:13)
E/flutter ( 6509): #22     AuthProvider.signInGoogleSilently (package:wavecheck/src/resources/auth_provider.dart)
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #23     Repository.signInGoogleSilently
package:wavecheck/…/resources/repository.dart:33
E/flutter ( 6509): <asynchronous suspension>
E/flutter ( 6509): #24     AuthenticationBloc.startApp
package:wavecheck/…/blocs/authentication_bloc.dart:49
E/flutter ( 6509): #25     _AsyncAwaitCompleter.start  (dart:async-patch/async_patch.dart:49:6)
E/flutter ( 6509): #26     AuthenticationBloc.startApp
package:wavecheck/…/blocs/authentication_bloc.dart:43
E/flutter ( 6509): #27     main
package:wavecheck/main.dart:6
E/flutter ( 6509): #28     _runMainZoned.<anonymous closure>.<anonymous closure>  (dart:ui/hooks.dart:199:25)
E/flutter ( 6509): #29     _rootRun  (dart:async/zone.dart:1124:13)
E/flutter ( 6509): #30     _CustomZone.run  (dart:async/zone.dart:1021:19)
E/flutter ( 6509): #31     _runZoned  (dart:async/zone.dart:1516:10)
E/flutter ( 6509): #32     runZoned  (dart:async/zone.dart:1500:12)
E/flutter ( 6509): #33     _runMainZoned.<anonymous closure>  (dart:ui/hooks.dart:190:5)
E/flutter ( 6509): #34     _startIsolate.<anonymous closure>  (dart:isolate-patch/isolate_patch.dart:300:19)
E/flutter ( 6509): #35     _RawReceivePortImpl._handleMessage  (dart:isolate-patch/isolate_patch.dart:171:12)
E/flutter ( 6509):

Solved: Downloaded again google-services.json

[srianbury]

@bhaskar-nair2 what was your solution? It seems that it's not seeing my .env file

[tekpriest]

What I did const firebaseConfig = {apiKey: '', etc, etc} then I exported it export deafault firebaseConfig

import import firebaseConfig from './firebase'

This was in Angular 8

[srianbury]

for my case I needed to restart my dev server since I entered them while it was already running

[heyFahad]

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

This is the main problem. I was also trying to load my firebaseConfig object at runtime, using the import() function, at the time of initializing my FirebaseApp. Now I don't have this issue any more after importing the firebaseConfig object at the top of the file, as described by @akashrauniyar35

[binaryme]

I solved it moving env variables from now.json -> env: {} to .env file

[chan-dev]

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

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

.env file

REACT_APP_API_KEY="key"
REACT_APP_AUTH_DOMAIN="domain"
REACT_APP_DATABASE_URL="url"
REACT_APP_PROJECT_ID="id"
REACT_APP_STORAGE_BUCKET="bucket"
REACT_APP_MESSAGING_SENDER_ID="id"

Thanks, this is exactly my problem. I mistakenly put the .env file under src folder.

[saintaze]

If anyone having problem with the .env file in react project

2 things to keep in mind

1) Make extra sure that .env with key=value pairs is located at the root of the react project

2) 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.

[A-Hosni]

Replaced Api key in the json file and It worked, thnaks everyone

[jeffhuys]

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.

[Rajesh-Royal]

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

module.exports  = {
  apiKey: "YOUR_KEY",
  authDomain: ".........",
  databaseURL: ".......",
  projectId: "....",
  storageBucket: "........",
  messagingSenderId: "........",
  appId: "APP_ID",
  measurementId: "..........."
};

[ghost]

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

module.exports  = {
  apiKey: "YOUR_KEY",
  authDomain: ".........",
  databaseURL: ".......",
  projectId: "....",
  storageBucket: "........",
  messagingSenderId: "........",
  appId: "APP_ID",
  measurementId: "..........."
};

Thanks. It works (Firebase + NodeJs)

[Nishchal-Phoenix]

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

saved me !!!! phew !!

[HassenH1]

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

import app from 'firebase/app'
import 'firebase/storage'

const config = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

const firebase = app.initializeApp(config)

export default firebase

and here is my .env.development

REACT_APP_API_KEY=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_AUTH_DOMAIN=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_DATABASE_URL=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_PROJECT_ID=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_STORAGE_BUCKET=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_MESSAGING_SENDER_ID=xxxxxxxxxxxxxxxxxxxxxx
//everything is correct ! what is going on

and I am importing the config file correctly

import firebase from './index'

[frazras]

My .env was in my /src directory and not the root 🤦🏾‍♂️

[pulkit2001]

I had the same issue. I solved it by doing:

1. Make sure that your filename is .env.local instead of env.local (that dot is a lot imp :P).
2. Your env file should be stored in root directory of your project instead of src or any other folder.

[mhv745]

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.

[wadigabriel]

Check out this article, it might help: https://gabrielwadi.medium.com/how-to-fix-firebase-api-key-not-valid-error-56896c7ba87a

[elijah-mccoy5]

3 SOLUTIONS

1. Make sure .env file is located at root of project (not in src or public folder) after moving the file restart the development server

2. When calling and referencing the firebase file in different modules, beware of calling objects inside of objects when referencing the database or authentication files.

3. use " import firebase from 'firebase/app' " instead of " import firebase from 'firebase' "

[leonkalema]

The solution below fixed my issue: If you are using React Native

import {API_URL, API_TOKEN} from "@env"

[abe157]

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

import firebase from 'firebase';
import firebaseConfig from './firebaseConfig.js'

var app = undefined;
try {  // Check if the app already exists
    app = firebase.app("NewName");
}
catch(e) {
    app = firebase.initializeApp( firebaseConfig , "NewName");
}

console.log( firebase.auth( app ).currentUser  );

[rfx91]

Thank you so much @abe157. You just saved me days.

[thiisiriya]

I had the same issue. I solved it by doing:

1. Make sure that your filename is .env.local instead of env.local (that dot is a lot imp :P).
2. Your env file should be stored in root directory of your project instead of src or any other folder.

For some reason, it worked for me when I changed file's name from .env.local to .env

[TmVukov]

If you are using React, my problem was that I didn't write .env variables with REACTAPP(name of the variable) Pretty funny but at the same time frustrating.

[rutikwankhade]

Make sure you are not using quotes or commas in your .env file. I had the same issue, but fixed it after removing quotes

[mahmoudhamdy123]

Solution: change the version of google services at project level gradle and sync your project and reinstall. classpath 'com.google.gms:google-services:4.3.0'

[Maarcosv99]

I solved !

1º - I went to 'Project Settings' and there I created an application.

2º - As I was using Docker, my NuxtJS shared the application using my ip, so I put my ip in Firebase's authorized domains. Even if Dokcer puts my application in the localhost url.

[codmitu]

for my case I needed to restart my dev server since I entered them while it was already running

thank you, it was working on my live server but not on localhost but restarting the server resolved my issue, twas this easy

[LeeAndrew14]

if someone experiencing this with Nextjs and firebase this solution may help

in next.config.js add this

module.exports = {
  env : {
    FIREBASE_API_KEY: process.env.apiKey,
    AUTH_DOMAIN: process.env.authDomain,
    PROJECT_ID: process.env.projectId,
    STORAGE_BUCKET: process.env.storageBucket,
    MESSAGING_SENDER_ID: process.env.messagingSenderId,
    APP_ID: process.env.appId,
  }
}

then in your firebase config

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
}

then restart the server, it should work.

[Platyypus101]

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

[krishneup]

@LeeAndrew14 Suggestion worked for me. Thank you

[PurplePineapple123]

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

import app from 'firebase/app'
import 'firebase/storage'

const config = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};

const firebase = app.initializeApp(config)

export default firebase

and here is my .env.development

REACT_APP_API_KEY=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_AUTH_DOMAIN=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_DATABASE_URL=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_PROJECT_ID=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_STORAGE_BUCKET=xxxxxxxxxxxxxxxxxxxxxx
REACT_APP_MESSAGING_SENDER_ID=xxxxxxxxxxxxxxxxxxxxxx
//everything is correct ! what is going on

and I am importing the config file correctly

import firebase from './index'

I'm having this exact same issue. @HassenH1, were you ever able to fix this?