how to intiialize two firebase apps - javascript

im trying to initialize two firebase apps but getting an annoying error Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). Im not sure how to fix this and how to make two seperate firebase. Any help is greatly appreciated!
database instance
import * as firebase from "firebase";
var config = {
apiKey: "AIzaSyC....",
authDomain: "car-app-506db.firebaseapp.com",
databaseURL: "https://car-app-506db.firebaseio.com",
projectId: "car-app-506db",
storageBucket: "car-app-506db.appspot.com",
messagingSenderId: "496521253390"
};
firebase.initializeApp(config);
const databaseRef = firebase.database().ref();
export const CarsRef = databaseRef.child("Cars");
export const authRef = firebase.auth();
export const provider = new firebase.auth.GoogleAuthProvider();
export const timeRef = firebase.database.ServerValue.TIMESTAMP;
export default databaseRef;
auth instance
import firebase from "firebase";
import 'firebase/auth';
import 'firebase/database';
var firebaseConfig = {
apiKey: "AIzaSyC6C-8A-vfsEzv31acwjhru8N64g0Hzhcc",
authDomain: "car-app-506db.firebaseapp.com",
databaseURL: "https://car-app-506db.firebaseio.com",
projectId: "car-app-506db",
storageBucket: "car-app-506db.appspot.com",
messagingSenderId: "496521253390"
};
var app = firebase.initializeApp(app);
export default app;

Each FirebaseApp instance has its own configuration and its own unique name. If you don't specify a name when you initialize the app, Firebase assumes your (re)initializing the default app. Since neither if your calls to firebase.initializeApp specifies a name, you're initializing the same app twice, which is an error.
The solution is to name your apps by passing a name (string) in to the second call to initializeApp. For example:
var firebaseConfig = {
apiKey: "AIzaSyC6C-8A-vfsEzv31acwjhru8N64g0Hzhcc",
authDomain: "car-app-506db.firebaseapp.com",
databaseURL: "https://car-app-506db.firebaseio.com",
projectId: "car-app-506db",
storageBucket: "car-app-506db.appspot.com",
messagingSenderId: "496521253390"
};
var app = firebase.initializeApp(firebaseConfig, "auth");
export default app;
Also see using multiple projects in your application in the Firebase docs.

Related

How to initialize firebase in firebase version 9 (firebase v9)?

I used to initialize my firebase app using this method -
import firebase from "firebase/app";
import "firebase/auth";
const config = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};
export default function initFirebase() {
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
}
I am upgrading my firebase version to 9 and I need a way to initialize my app using es modules.
I tried this -
import { initializeApp, getApps, getApp } from "firebase/app";
const config = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};
export default function initFirebase() {
getApps().length === 0 ? initializeApp(config) : getApp();
}
But I am getting this error -
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
Why don't you simply use initializeApp?
import { initializeApp } from "firebase/app";
const config = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};
export const app = initializeApp(config);
Do you really need your custom initFirebase() function?

React Firebase Integration - TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.default is undefined

Stack Overflow! Long time no see.
I'm developing a web app with react where you can see definitions that I wrote in a firebase database for modern concepts, like typing quirks and plurality. When trying to implement my firebase firestore database in my app, it fails with the following error:
TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.default is undefined.
Here is my code in firebase.js:
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "dont-steal-my-db",
authDomain: "please-respond",
databaseURL: "https://definition-2d49c-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "definition-2d49c",
storageBucket: "definition-2d49c.appspot.com",
messagingSenderId: "404265179808",
appId: "1:404265179808:web:10f7b7f917d695dabb87c5",
measurementId: "G-SYN64MDXL1"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
How can I fix this error, and where is a good place to go in the future for problems with firebase like these?
//try this :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "dont-steal-my-db",
authDomain: "please-respond",
databaseURL: "https://definition-2d49c-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "definition-2d49c",
storageBucket: "definition-2d49c.appspot.com",
messagingSenderId: "404265179808",
appId: "1:404265179808:web:10f7b7f917d695dabb87c5",
measurementId: "G-SYN64MDXL1"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const db = firebaseApp.firestore();

Attempted import error: 'messaging' is not exported from 'firebase/app'

import firebase from "firebase/app";
import "firebase/messaging";
let messaging = null
if (firebase.messaging.isSupported()) {
const initializedFirebaseApp = firebase.initializeApp({
// Project Settings => Add Firebase to your web app
apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DBURL,
projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MSG_SENDERID,
appId: process.env.REACT_APP_FIREBASE_APPID
});
messaging = initializedFirebaseApp.messaging();
}
export { messaging };
I am starting to run my server am getting failed to compile errors below Like this:
Attempted import error: 'messaging' is not exported from 'firebase/app' (imported as 'firebase').
How can i fix this ???
enter image description here

React and Firebase authentication system

I am attempting to use the authentication system in firebase.js.
I am receiving the following error:
firebase__WEBPACK_IMPORTED_MODULE_6_.default.auth.onAuthStateChanged is not a function".
Here is my code:
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_BASEURL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_IDenter code here
};
// Initialize Firebase
const fire= firebase.initializeApp(firebaseConfig);
const firebaseAuth = firebase.auth();
export default fire;
Also, I have imported the firebase file everywhere, but I still cannot access the auth functions.

Error when initializing firebase database in Reactjs

I am fairly new to react and I am trying out firebase. I am getting this error message
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)
and I have tried many things that didnt fix it.
This is how my config looks likes
export const config = {
apiKey: "AIzaSyCrfLCYS7VuvvUVaEkfzYVdJJLeqVuZHQE",
authDomain: "crudreac.firebaseapp.com",
databaseURL: "https://crudreac.firebaseio.com",
projectId: "crudreac",
storageBucket: "crudreac.appspot.com",
messagingSenderId: "116257347605"
};
And this is how I am TRYING to initialize the databse
import { config } from './Config/config';
import firebase from 'firebase/app';
import 'firebase/database'
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.addNote = this.addNote.bind(this);
this.app = firebase.initializeApp(config);
console.log(firebase.app.name);
this.db = this.app.database().ref().child('notes');
this.state = {
notes:[],
}
}
I am probably doing the initialization wrong, so if anyone could help me out I would apreciate it
I have already tried doing
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
But it didnt help

Categories