firebase working but firebase.auth() not working in Vue.js

Question

I ran

npm i firebase

and have

import firebase from 'firebase/compat/app'

but when i run

console.log(firebase.auth())

I get an error message of

app.js:280 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
    at app (firebaseNamespaceCore.ts?1484:102:1)
    at Object.serviceNamespace [as auth] (firebaseNamespaceCore.ts?1484:152:1)
    at eval (HelloWorld.vue?e90b:24:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:30:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)
    at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
    at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:140:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)

However, when I just run console.log(firebase) I get correct data output in console. I have also setup firebase correctly as documented here but firebause.auth() is still not working. I am working in Vue3 but I don't think that part matters, still trying to find a solution.

I am currently trying to get firebaseUI to work and this is the step I am getting stuck in. Once I'm able to get firebause.auth() to work, I'll be able to initialize the firebaseUI widget by running:

var ui = new firebaseui.auth.AuthUI(firebase.auth());

my ./src/firebaseConfig.js code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "code",
  authDomain: "code",
  projectId: "code",
  storageBucket: "code",
  messagingSenderId: "code",
  appId: "code",
  measurementId: "code"
};

const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp

My component file using firebaseConfig.js in ./src/components/HellowWorld.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());
ui




export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

both

console.log(firebaseConfig);
console.log(firebase);

works but

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui

produces an error as copy and pasted above.

should I specify how I'm using it in my vue.js code? Was hoping the problem might be more generic to solve. I have the firebase config file in a separate file in the 'src' folder that I'm importing into my vue.js component folder. Then everything else is just in the script tag of the component file. Let me know if I should rephrase the question with my vue.js file code or something. I still think I'm doing something wrong outside of vue.js tho since I tried testing it out a lot and vue.js doesn't seem to be the issue at least for now. Maybe I'm wrong. — Simon Suh
– Simon Suh, Commented Mar 28, 2022 at 0:05
I thought I did, isn't console.log(firebase) outputting correctly mean it is initialized? When I remove my 'import firebaseConfig from '../firebaseConfig'; line from my vue.js import section, console.log(firebase) doesn't work anymore. — Simon Suh
– Simon Suh, Commented Mar 28, 2022 at 0:28
Could you follow up on this Doc or could you provide additional details about code? Also, you can follow up on this Doc. As the doc describes, I think that it can't be initialized without config. — Tim Chiang
– Tim Chiang, Commented Mar 28, 2022 at 0:33
added the code I'm working on into the question. I already got the Google/Facebook/Github signins working properly using the Doc you mentioned. Working src code for Google/Facebook/Github signins - github.com/simonjsuh/… - relevant YouTube video I made in repository description. Apparently getting the individual signins working is different than just using firebaseUI. trying to get firebaseUI to work now. — Simon Suh
– Simon Suh, Commented Mar 28, 2022 at 0:45

Yasuo Shimizu · Accepted Answer · 2022-08-07 22:10:43Z

1

I had same problem, then I found points. And I understood why somebody was OK, others was bug.

Initialization needs to App based, of course before call firebaseUI. We have some ways to do that main.js, import configuration.js, before auth timing...etc.
Initialized firebaseApp (your firebaseConfig.js) is different from import firebase from 'firebase/compat/app'
If new firebaseUI is called before Initialization or no initialized, we get error. Then take care Lifecycle of Vue.

Probably you need, Import firebaseApp, Not firebaseConfig to HellowWorld.vue for getting Initialized.

In my case, my 'new firebaseUI' is in mounted() of ChildView. I initialize firebaseApp at main.ts, so childView doesn't need initialization any more, only import firebase from 'firebase/compat/app'.

If you need code, I can show you my case.

answered Aug 7, 2022 at 22:10

Yasuo Shimizu

1162 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

firebase working but firebase.auth() not working in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related