Comments (72)
Replaced the API key and it worked
from quickstart-js.
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..
from quickstart-js.
@Paloman fixed it by re-copying and pasting my API key, so try that
from quickstart-js.
@nicolasgarnier - resolved this myself please go ahead and close this issue
from quickstart-js.
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
from quickstart-js.
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.
from quickstart-js.
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.
from quickstart-js.
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?
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"
from quickstart-js.
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.
from quickstart-js.
@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"
from quickstart-js.
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."}
from quickstart-js.
@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
from quickstart-js.
@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
from quickstart-js.
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 this
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=something.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=yourapikey
NEXT_PUBLIC_FIREBASE_PROJECT_ID=yourprojectname
from quickstart-js.
Had the same problem while building a react-native app:
Before:
export const firebaseConfig = { apiKey: "", etc etc };
After:
export default firebaseConfig = { apiKey: "", etc etc };
from quickstart-js.
I'm glad things worked out for you!
from quickstart-js.
Replaced the API key and it worked
Yes, but where?
from quickstart-js.
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?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.
from quickstart-js.
I had the same issue. I solved it by doing:
- Make sure that your filename is .env.local instead of env.local (that dot is a lot imp :P).
- Your env file should be stored in root directory of your project instead of src or any other folder.
from quickstart-js.
for my case I needed to restart my dev server since I entered them while it was already running
from quickstart-js.
My .env was in my /src directory and not the root 🤦🏾♂️
from quickstart-js.
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.
from quickstart-js.
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'
from quickstart-js.
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 );
from quickstart-js.
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.
from quickstart-js.
@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"
Spent Hours trying all the solutions but surprisingly this worked !!!!
from quickstart-js.
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.
from quickstart-js.
Make sure you are not using quotes or commas in your .env file. I had the same issue, but fixed it after removing quotes
from quickstart-js.
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
from quickstart-js.
Im getting the same error.... im using react-native... @terrysmyth @eddyekofo94 @nicolasgarnier @ghost
from quickstart-js.
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
from quickstart-js.
I solved it moving env variables from
now.json -> env: {}
to .env file
from quickstart-js.
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.
from quickstart-js.
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: "..........."
};
from quickstart-js.
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)
from quickstart-js.
Thank you so much @abe157. You just saved me days.
from quickstart-js.
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 :)
from quickstart-js.
@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
from quickstart-js.
@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.
from quickstart-js.
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..
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.
from quickstart-js.
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 .
from quickstart-js.
@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/
from quickstart-js.
@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
from quickstart-js.
@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.
from quickstart-js.
I am getting this error in core javascript.
from quickstart-js.
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
from quickstart-js.
@bhaskar-nair2 what was your solution? It seems that it's not seeing my .env file
from quickstart-js.
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 objectimport {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
from quickstart-js.
Replaced Api key in the json file and It worked, thnaks everyone
from quickstart-js.
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 objectimport {firebaseConfig} from './src/config/FirebaseConfig'; ===== Wrong Order
import FirebaseConfig from './src/config/FirebaseConfig'; ===== Correct Order
saved me !!!! phew !!
from quickstart-js.
Check out this article, it might help: https://gabrielwadi.medium.com/how-to-fix-firebase-api-key-not-valid-error-56896c7ba87a
from quickstart-js.
3 SOLUTIONS
-
Make sure .env file is located at root of project (not in src or public folder)
after moving the file restart the development server -
When calling and referencing the firebase file in different modules, beware of calling objects inside of objects when referencing the database or authentication files.
-
use " import firebase from 'firebase/app' " instead of " import firebase from 'firebase' "
from quickstart-js.
The solution below fixed my issue: If you are using React Native
import {API_URL, API_TOKEN} from "@env"
from quickstart-js.
I had the same issue. I solved it by doing:
- Make sure that your filename is .env.local instead of env.local (that dot is a lot imp :P).
- 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
from quickstart-js.
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'
from quickstart-js.
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.
from quickstart-js.
@LeeAndrew14 Suggestion worked for me. Thank you
from quickstart-js.
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?
from quickstart-js.
I have same error but only in test, I have tried all solutions from here, but it's not helping. I'm using Jest
from quickstart-js.
I had the same issue. I solved it by doing:
- Make sure that your filename is .env.local instead of env.local (that dot is a lot imp :P).
- Your env file should be stored in root directory of your project instead of src or any other folder.
This worked for me too... kindly follow the above steps for react app and restart your local server... Thanks
from quickstart-js.
In case anybody is using Github's action to deploy to Firebase:
You most probably (.git)ignoring the .env file so Github builds your solution without those credentials. My solution was to add SpicyPizza/create-envfile to my workflow, while the ENV config was saved securely in my repo's Actions secrets
from quickstart-js.
when i pulled my repo, there was only a .venv.deploy, adding a .env.local with the correct config fixed my issue
from quickstart-js.
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 thisNEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=something.firebaseapp.com NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=yourapikey NEXT_PUBLIC_FIREBASE_PROJECT_ID=yourprojectname
thanks!
from quickstart-js.
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 fileimport 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?
same here, any updates on this problem?? @PurplePineapple123
from quickstart-js.
saintaze
Yes thanks saintaze, that worked for me.
from quickstart-js.
Thanks @RobLMartin. your hacky solution worked for me...
from quickstart-js.
Thanks @RobLMartin. your hacky solution worked for me...
Wish it wasn’t a thing.
from quickstart-js.
oooh!!! I restart my project, and it works!
from quickstart-js.
If you're like me, I had this issue when deploying an app to Heroku. There were no issues with my code, it's that Heroku expects you to have your config vars set on the Heroku side, so go into the panel and set your config vars in the Settings section. No need to change code or restart app, just redeploy to Heroku once the config vars are set.
from quickstart-js.
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 thisNEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=something.firebaseapp.com NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=yourapikey NEXT_PUBLIC_FIREBASE_PROJECT_ID=yourprojectname
This fixed my Problem!
Thank you @code-vagabond
from quickstart-js.
to anyone having issues and the firebaseConfig shows undefined when console logged. ensure you place the .env or .env.local file to the root directory and not the src folder. it should be in the same directory as the package.json
from quickstart-js.
@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 justapiKey: 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"Spent Hours trying all the solutions but surprisingly this worked !!!!
Yeah this works perfectly.
from quickstart-js.
Related Issues (20)
- i dont want to show message onbackground because crashing with hundreds notification.
- before online after offline to much notification, there is any to check its last notification ? to prevent some trigger.
- Enter Custom Auth Code
- wrong README.md
- Problems integrating Firebase service woker with existing service-worker of react PWA HOT 1
- [Firebase Cloud Messaging Quickstart] Should be updated to use Firebase Cloud Messaging API (V1)
- Messaging: We are unable to register the default service worker. HOT 2
- Show two messages HOT 1
- Auth in chrome extension is not working
- The "Send Code" button for MFA is never enabled even after entering valid phone number and successful recaptcha HOT 1
- FCM HTTP V1 API
- Cors policy no longer allows calling cloud functions from browser. HOT 6
- Unable to start firebase project for existing instruction
- The GitHub authentication component is used on the Google Authentication page
- Server Key
- messaging quickstart does not work HOT 3
- not working the firebase config HOT 1
- Incorrect script in firestore quickstart readme
- Why can’t I get currentUser on my iPhone? HOT 1
- Fetch data from mobile is 35 times slower than on PC
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quickstart-js.