I am currently developing a project on React Native Web and this is my login call in a component. (The call is in the components useEffect, as soon as the component opens, it should log in anonymously)
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
const firebaseConfig = {
apiKey: "****",
authDomain: "****",
projectId: "****",
storageBucket: "****",
messagingSenderId: "****",
appId: "****",
measurementId: "****"
};
firebase.initializeApp(firebaseConfig)
const login = async () => {
firebase.auth().signInAnonymously()
.then((userCredential) => {
// Signed in
// ...
})
.catch((error) => {
console.log("LOG: "+error)
});
}
But everytime I get the error: Uncaught (in promise) TypeError: _app.default.auth is not a function
I tried several different imports, but none of them seemed to work. I see the error when I open the Console on Firefox. How can I fix this issue?
Thanks
Try this approach by checking if firebase is initialized and the user is not logged in:
const [loggedIn, setLoggedIn] = React.useState(false)
React.useEffect(() => {
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "****",
authDomain: "****",
projectId: "****",
storageBucket: "****",
messagingSenderId: "****",
appId: "****",
measurementId: "****"
});
}
}, [])
React.useEffect(() => {
if (firebase.apps.length && !loggedIn) {
setLoggedIn(true)
login()
}
}, [firebase])
const login = async () => {
firebase.auth().signInAnonymously()
.then((userCredential) => {
// Signed in
// ...
})
.catch((error) => {
console.log("LOG: " + error)
});
}