After running npm i firebase and importing firebase from 'firebase/compat/app', I encountered an error when trying to use firebase.auth(). The error message states that no Firebase App '[DEFAULT]' has been created, even though I have followed the setup documentation provided by Firebase.
console.log(firebase) displays correct data in the console, indicating that firebase is set up properly. However, the issue arises when attempting to use firebase.auth() in Vue3.
I am currently stuck at this step while trying to get firebaseUI to work. Once firebase.auth() works correctly, I can initialize the firebaseUI widget using the following code:
var ui = new firebaseui.auth.AuthUI(firebase.auth());
My firebase configuration file (./src/firebaseConfig.js) includes the necessary initialization of firebaseApp using initializeApp() method. This configuration is then imported and used in my component file (./src/components/HelloWorld.vue):
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<pre id="account-details"></pre>
</div>
</template>
<script>
import firebaseConfig from '../firebaseConfig';
import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'
console.log(firebaseConfig);
console.log(firebase);
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
export default {
name: 'HelloWorld',
props: {
msg: String
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
While logging firebaseConfig and firebase works without any issues, initializing the FirebaseUI Widget produces the previously mentioned error. I am still working on finding a solution to resolve this problem.