We Keep Coding

Error in Firebasse"assert.ts:128 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)

Why do I have the error that it says invalid API keys?
This is the sample .env.local
REACT_APP_apiKey=AI**************JmXMKaFQQQrRzp4Q
REACT_APP_authDomain=sample-258a7.firebaseapp.com
REACT_APP_projectId=sample-258a7
REACT_APP_storageBucket=sample-258a7.appspot.com
REACT_APP_messagingSendearId=
REACT_APP_appId=1:1014069435807:web:04390779a92d4e3a4fb1aa
In another file:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
project under its own project settings
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId,
};
//Initializing Firebase
const app = initializeApp(firebaseConfig);
This is the error:
The Package.json:

Make sure your .env.local is placed in the root directory, and not in any subfolders like src or public. Other than that, nothing seems to be wrong with your code. Just to be safe, cross check your API key with firebase.
P.S. There's no need to hide your firebase public API key, its going to be visible in your app to the general public anyway.

Firebase not getting imported in my React JS project/ [duplicate]

This question already has answers here:
Module not found: Error: Package path . is not exported from package
(10 answers)
Closed 10 months ago.
I am trying to use firebase inside my project but the classes related to firebase are not getting imported.
This is what I did till now:
Created a new project in firebase console
ran the commands, npm install -g firebase-tools, npm install firebase-admin --save and npm install --save firebase
Created a new file called firebase.js in my project and added the following code:
import firebase from "firebase"
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAdjdq8JsRSWKeHQYCHNzXm8nn29cOh-4s",
authDomain: "ig-reels-a9b15.firebaseapp.com",
projectId: "ig-reels-a9b15",
storageBucket: "ig-reels-a9b15.appspot.com",
messagingSenderId: "1018616208158",
appId: "1:1018616208158:web:bb1026f5301bd9294e070f",
measurementId: "G-W3051LNHFL"
};
const firebaseApp = firebase.initializaApp(firebaseConfig)
const db = firebaseApp.firestore()
export default db
I am using db variable to pull out data from the cloud firestore database like this:
import React, {useState, useEffect} from "react"
import './App.css';
import VideoCard from './VideoCard';
import db from "./firebase";
function App() {
const [reels, setReels] = useState([])
useEffect(() => {
db.collection("reels").onSnapshot(snapshot => {
console.log(snapshot.docs.toString())
setReels(snapshot.docs.map(doc => doc.data()))
})
}, [])
Whenever I run this code I get the following error:
Compiled with problems:
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules\firebase (see exports field in C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
I have successfully installed all the firebase related tools. Why am I getting this error?

First, install firebase then You want to create your own firebase.js file. I am give you the example of
firebase.js
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "apiKey",
authDomain: "authDomain",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appid"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
App.js
const db = firebase.firestore();
//write you own code

Cannot read property 'auth' of undefined

I'm trying to use firebase-ui in a VueJS project.
My api credentials is defined in a file called config.js
export default {
apiKey: "*****",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "73482979",
appId: "1:685818581200:web:1f5ebjnfsdjnj",
measurementId: "G-BHJK6N67PZ"
};
I am the importing the config.js file in my init.js where the whole firebase setup is done:
import config from "./config";
import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebase/auth";
import "firebase/firestore";
const app = firebase.initializeApp(config);
const auth = firebase.auth();
const firestore = app.firestore();
const authUi = new firebaseui.auth.AuthUI(auth); //Error is thrown at this point
export default app;
export { auth, authUi, firestore };
However the error -> Cannot read property 'auth' of undefined' is thrown and I've been unable to move past here for a few days now. I've checked the documentation (https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin), everything is done correctly and even using the latest firebaseui version "firebaseui": "4.7.0" located in package.json
Any help with how I can solve this problem?

As of Firebase 9.0.0 (August 25, 2021) it should now be
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
to use the backwards compatible interface.
See https://firebase.google.com/docs/web/modular-upgrade for the full upgrade path

I got the same problem. After few hours of trying, I solve it by edit my config like :
import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';
If your firebase version if greater than 7, you got to import from 'firebase/app' instead of 'firebase'.
And you have to import * from 'firebaseui', instead of import only firebaseui.
and my packages.json like:
"dependencies": {
"firebase": "^8.8.0-202162022140",
"firebaseui": "^4.8.1",
},
By the way, my project is using Vue3.js.

You're importing the Firebase client JS library incorrectly. The documentation for module bundlers shows:
// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"
Don't import from "firebase". Import from "firebase/app", and be sure to observe the conventions for the version of the SDK you're using.
The documentation for firebaseui might be out of date. Consider submitting your feedback using the "send feedback" button at the top of the doc page.

What happens when I import firebase from my firebaseConfig.js file?

Not a problem/bug, but I have the following questions about the Firebase config file below:
firebaseconfig.js
import * as firebase from 'firebase';
const config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_ID"
};
firebase.initializeApp(config);
export default firebase;
When I import firebase from this config file (firebaseconfig.js), does it run the entire firebase.js file and then import the firebase object each time, or does it just give me the firebase object at the end? If it's the first answer, then does that mean that multiple instances of firebase app get initialized? If it's the second answer, then when does the code preceding "export default firebase" get executed and not-executed?

When you require or import some javascript code, it only gets executed once, no matter how many times it's required or imported. The resulting export is essentially a singleton that's shared across all modules that uses it.

How to import something globally in React Native?

I'm developing an App using React Native and Firebase. So, I created a separate js file to store config of firebase database and then I imported that config file into my screen files when I need to connect with firebase database.
So, I have to import that config file into each and every screen file which I need connect with my firebase database.
I want to know that, is it possible to import that config file globally?
I mean, I create a separate config file, then import it only once into a particular js file (Just for an example, let's think, import it only once into the App.js file) and then, use it in my screen files whenever I need to connect with my firebase database. But in this case, is it possible to use that config file without importing it into each and every screen file?
Hope you will understand what I want to do.

Yes, you just import the file in your main screen/ app entry point.
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
const config = {
apiKey: "API_KEY",
authDomain: "DOMAIN",
databaseURL: "DB_URL",
projectId: "PROJECT_ID",
storageBucket: "BUCKET",
messagingSenderId: "MSG_ID",
appId: "APP_ID"
};
app.initializeApp(config);
module.Store = {
Firebase() {
return app;
},
}
if (global) {
global.Store = module.Store;
}
In your main screen
import './Global';
all the functions in Global will be available to all screens.
Demo