(React, and Firebase version 9.6.9) Firebase: Firebase App named '[DEFAULT]' already exist-CodePudding

I am writing a React app with firebase version 9.6.9 for a login system, but this error keeps getting in my way. I have already tried this method:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { async } from '@firebase/util';
import { firebase } from "firebase/app";

import { getAuth, onAuthStateChanged, connectAuthEmulator, 
signInWithEmailAndPassword, createUserWithEmailAndPassword, 
signOut } from "firebase/auth";

export const firebaseApp = initializeApp({
  //Configuration stuff
});

if (firebase.apps.length === 0/*or !firebase.apps.length*/) {
    firebase.initializeApp(firebaseConfig);
}`

My current code looks like this:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { async } from '@firebase/util';
import { firebase } from "firebase/app";

import { getAuth, onAuthStateChanged, connectAuthEmulator, 
signInWithEmailAndPassword, createUserWithEmailAndPassword, 
signOut } from "firebase/auth";


export const firebaseApp = initializeApp({
 //Configuration stuff
});

export const app = initializeApp(firebaseApp);
export const analytics = getAnalytics(app);
export const auth = getAuth(firebaseApp);

Any suggestions?

CodePudding user response：

Why are you initializing your firebase app twice?

export const firebaseApp = initializeApp({
 //Configuration stuff
});

export const app = initializeApp(firebaseApp); <- remove this line

you need to make sure that your firebase app is initialized only once, change your code to this:

export const firebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp();

don't forget to import getApps() and getApp()

import { getApp, getApps, initializeApp } from 'firebase/app';

and by the way, you don't need to export const firebaseApp since you're not going to use it out of that file.

CodePudding user response：

Look like this :

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: 'XXXXXXXXXXXXXX',
  authDomain: 'XXXX.firebaseapp.com',
  databaseURL: 'https://dburl.firebaseio.com',
  projectId: 'proj-XXXX',
  storageBucket: 'XXXXX.appspot.com',
  messagingSenderId: 'XXXXXXX',
  appId:XXXXXXXXXXXXXXXXXX"
};
    
firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebase.auth();
export const firestore = firebase.firestore()

then use :

import { firebaseAuth } from 'firebase'

const CustomComponent = props => {

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()

  const handleAuth = e => {

    firebaseAuth.signInWithEmailAndPassword(email, password).then(res => {
        console.log(res.user)
      }).catch(err => {
        const { code, message } = err
        console.log(code, message)
      })
  }

  return (<button onClick={handleAuth}>firebase</button>)