I noticed that the firestore messagingSenderId is different than the firebase auth's messagingSenderId So I separated them into 2 configs but I get an error FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app)
This is my code
// Import the functions you need from the SDKs you need
import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFireStore } from "#firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "someKey",
authDomain: "someDomain",
projectId: "same ID",
storageBucket: "same storage bucket",
messagingSenderId: "Different messagingSenderId",
appId: "same ID",
};
const fireStoreConfig = {
apiKey: "sameKey",
authDomain: "sameDomain",
projectId: "same ID",
storageBucket: "same storage bucket",
messagingSenderId: "Different messagingSenderId",
appId: "same ID",
};
// Initialize Firebase
let app = {};
getApps().length === 0
? (app = initializeApp(firebaseConfig))
: (app = getApp());
storeApp = initializeApp(fireStoreConfig);
export const auth = getAuth(app);
export const db = getFireStore(storeApp);
Should I separate the 2 configs or is there a better way?
Related
I do know that there are multiple stackoverflow question on this, but it does not work for me for some reason.
I am using firebase v9 so I need to use firebase/compat for my react web to work with firebase.
Here is my firebase config file code:
import firebase from 'firebase/compat/app';
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID
})
const firestore = app.firestore();
const database = {
usersRef: firestore.collection('user'),
portfolioRef: firestore.collection('portfolio'),
projectTitleRef: firestore.collection('projectTitle'),
audioRef: firestore.collection('audio'),
videoRef: firestore.collection('video'),
imageRef: firestore.collection('image'),
ascensionRef: firestore.collection('ascensionNumber'),
regEmailRef: firestore.collection('regEmail')
};
const storage = app.storage();
const auth = app.auth();
export { database, storage, auth, app };
Anyone can tell where did I go wrong?
I want to create simple React Native screen which can store data to firestore. i've tried my code and it didn't work properly. anyone can help me to solve this problem?
MyCode:
FirebaseConfig.js
import { initializeApp } from "firebase/app";
import { getFirestore, initializeFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "AIzaSyATGb_omplyagNkyoGNtAVC1OYkP6xbzMA",
authDomain: "other-project-3131c.firebaseapp.com",
databaseURL: "https://other-project-3131c-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "other-project-3131c",
storageBucket: "other-project-3131c.appspot.com",
messagingSenderId: "574501137641",
appId: "1:574501137641:web:adb6ba1ce0c5e8dff29478",
measurementId: "G-G71KCFJQQV"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//Initialize Firestore
export const db = getFirestore(app);
I am tried to get the firebase config file using env.process. If I use directly the config info. its working well...
Firebase.init.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
.env
REACT_APP_API_KEY=*********************
REACT_APP_AUTH_DOMAIN=**************************
REACT_APP_PROJECT_ID=****************
REACT_APP_STORAGE_BUCKET=***********************
REACT_APP_MESSAGING_SENDER_ID=****************
REACT_APP_APP_ID=***************************
I've tried just about EVERY solution on Stack Overflow and beyond, and still getting errors.
I've setup and confirmed the emulator runs fine. However, trying to connect the react native app to it returns the error:
Could not reach Cloud Firestore backend. Connection failed 1 times...
followed by a bunch of these warnings:
Connnection Webchannel transport errored .
Here's my config info
import * as firebase from 'firebase';
import { initializeApp } from "firebase/app";
import firestore from 'firebase/firestore';
const firebaseConfig = {
apiKey: "ZZZZ",
authDomain: "ZZZZ",
projectId: "ZZZZ",
storageBucket: "ZZZZ",
messagingSenderId: "ZZZZ",
appId: "ZZZ",
measurementId: "ZZZ"
};
firebase.initializeApp(firebaseConfig);
firebase.firestore().useEmulator("localhost", 8080);
I even replaced localhost with 0.0.0.0, same error.
Someone recommended changing the last line to
firebase.firestore().settings({
host: "localhost:8080",
ssl: false
});
which I tried, but still got the same errors.
Please what's the correct, VERIFIED way of doing this? I'd really appreciate it 'cos I want to spend hours on this!
I’m afraid you are not correctly importing firestore and neither initializing the emulator in the appropriate way. You are importing the Firebase function correctly, but there are a few things you need to change.
I will reference Firebase version 9 since it is the one that should be used, if you would like to still use version 8, I will leave the references where you can choose which version to use.
Instrument your app to talk to the emulators
Set up your in-app configuration or test classes to interact with Cloud Firestore as follows.
import { `getFirestore`, connectFirestoreEmulator } from "firebase/firestore";
// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);
When you initialize Firebase you need to do it this way after installing firebase using npm.
const app = initializeApp(firebaseConfig);
and...
Initialize Cloud Firestore
Initialize an instance of Cloud Firestore:
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
const firebaseApp = initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
const db = getFirestore();
At the end your file should look like this:
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
const firebaseConfig = {
apiKey: "ZZZZ",
authDomain: "ZZZZ",
projectId: "ZZZZ",
storageBucket: "ZZZZ",
messagingSenderId: "ZZZZ",
appId: "ZZZ",
measurementId: "ZZZ"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);
I am able to write to my firestore db locally without trouble but after I have deployed my next.js app the writing and updating functions dont result in any change on the DB.
I am initialising firebase like so
import 'firebase/firestore'
import 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
const auth = firebase.auth();
export {
auth,
firebase
};
and my firestore rules are like this:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write, update: if true;
}
}
}
I can't find any errors (is there an easy way to see ZEIT now console.log outputs on the server side, right now I am just passing them back in the response).
Any small response would be much appreciated.