Reactjs backend connection issue - reactjs

Question

My problem is that my browser is showing that fire store is not able to connect to the backend:
#firebase/firestore: Firestore (9.1.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project MY_PROJECT_ID.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
My firebase.js code is
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
const firebaseConfig = {
apiKey: MY_API_KEY,
authDomain: MY_AUTH_DOMAIN,
projectId: MY_PROJECT_ID,
storageBucket: MY_STORAGE_BUCKET_URL,
messagingSenderId: MY_MESSAGING_SENDER_ID,
appId: MY_APP_IP,
measurementId: MY_MEASUREMENT_ID,
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage = firebase.storage();
export { auth, provider, storage };
export default db;
Please help me .

Answer 1

New firebase v(9.1.1) is modular based version. Therefore you have to import everything as named import from respective files.
eg:-
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const firebase = initializeApp({
apiKey: MY_API_KEY,
authDomain: MY_AUTH_DOMAIN,
projectId: MY_PROJECT_ID,
storageBucket: MY_STORAGE_BUCKET_URL,
messagingSenderId: MY_MESSAGING_SENDER_ID,
appId: MY_APP_IP,
measurementId: MY_MEASUREMENT_ID,
})
const firestore = getFirestore()
The method/function way of using firebase is not supported in v(9.1.1), this probably helps with tree shaking(loading only required files/functions, rather than entire library), which saves loading time and creates fast user experience.
For detailed information checkout these videos:-enter link description here
Also check firebase docs:-enter link description here

Answer 2

Can you please try to generate a new firebaseConfig file? You can do that by
Going to your project settings.
At the bottom of the page there's a section called Your apps.
On the top right of that section click the button labeled Add App.
Choose the icon for webapp (3rd from the left).
After choosing a name for the new webapp, you'll get your new fbconfig.
Copy new fbconfig to your project and try again.
Let me know what happens please.
EDIT 0 -