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?
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>)
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.