Firebase auth problem

[baroquemusic]

Hi there, not sure if this is the right place to ask my question, please advise me where, if not.

I'm trying to set up Firebase auth and getting an error message popup on clicking the Google or Facebook buttons:

a.a.onAuthStateChanged is not a function [Dismiss]

Firebase doc says: Attach the observer using the onAuthStateChanged method. When a user successfully signs in, you can get information about the user in the observer.

I tried to add it as a vue method but didn't work. Please advise how to do that. Thank you!

My login page code is:

<template>
  <q-page class="flex flex-center">
    <div id="firebaseui-auth-container" />
    <div id="loader">Loading...</div>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'
import firebase from 'firebase/compat/app'
import auth from 'boot/firebase'
import * as firebaseui from "firebaseui"
import "firebaseui/dist/firebaseui.css"

export default defineComponent({
  name: 'LoginPage',

  mounted() {
    var ui = firebaseui.auth.AuthUI.getInstance() ||
             new firebaseui.auth.AuthUI( auth )

    ui.start('#firebaseui-auth-container', {
      autoUpgradeAnonymousUsers: true,
      signInSuccessUrl: '/',
      signInFlow: 'popup',
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
      ],
      callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
        return true;
        },
        uiShown: function() {
          document.getElementById('loader').style.display = 'none';
        },
        signInFailure: function(error) {
          if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
            return Promise.resolve()
          }
          var cred = error.credential
          return firebase.auth().signInWithCredential(cred)
        }
      }
    })
  }
})
</script>

[suleimanas]

hard to tell without knowing the sdk version or whats the value of auth in "import auth from 'boot/firebase'"
this will help you: https://firebase.google.com/docs/auth/web/firebaseui

[baroquemusic]

thanks, i'll go through it. here's my boot/firebase code: import { initializeApp } from "firebase/app" import { getAnalytics } from "firebase/analytics" import { getAuth } from "firebase/auth" import { getFirestore } from "firebase/firestore" const firebaseConfig = { ... } const app = initializeApp(firebaseConfig) const analytics = getAnalytics(app) const auth = getAuth(app) const db = getFirestore(app) export default { app, analytics, auth, db }

…

On Wed, Nov 2, 2022 at 4:22 PM Suleiman A. S ***@***.***> wrote: hard to tell without knowing the sdk version or whats the value of auth in "import auth from 'boot/firebase'" this will help you: https://firebase.google.com/docs/auth/web/firebaseui — Reply to this email directly, view it on GitHub <#14783 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVWDLX6HF23YT4I4A4TAWBDWGMOYFANCNFSM6AAAAAARVUUEXQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[yusufkandemir]

You are using named exports when exporting them:

export default {
  app,
  analytics,
  auth,
  db
}

But, you are using the default export when importing it:

import auth from 'boot/firebase'

What you should do instead:

import { auth } from 'boot/firebase'

[yusufkandemir]

Correction:
I was distracted. You are not using named exports, you are exporting all those as part of a single default export. So, you should import it as @suleimanas said here: #14783 (comment)

[yusufkandemir]

But, as he also said, I won't recommend using default export for this. Use named exports instead.

// no default
export {
  app,
  analytics,
  auth,
  db
}

or

export const app = initializeApp(firebaseConfig)
export const analytics = getAnalytics(app)
export const auth = getAuth(app)
export const db = getFirestore(app)

then

import { auth, db } from 'boot/firebase'

[baroquemusic]

Thanks Yusuf, i tried but then i got this error message on the console: SyntaxError: The requested module '/src/boot/firebase.js?t=1667597532365' does not provide an export named 'auth'

…

On Thu, Nov 3, 2022 at 11:15 PM Yusuf Kandemir ***@***.***> wrote: You are using named exports when exporting them: export default { app, analytics, auth, db} But, you are using the default export when importing it: import auth from 'boot/firebase' What you should do instead: import { auth } from 'boot/firebase' — Reply to this email directly, view it on GitHub <#14783 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVWDLXY76EQGRZU73OR5WDLWGTH35ANCNFSM6AAAAAARVUUEXQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[suleimanas]

you are exporting default

so in the login page, you can rename the import from auth to anything as it is the default export not the auth itself, something like
import firebaseApp from 'boot/firebase'
then use firebaseApp.auth

or from the boot export directly without (default) and then in login page:
import { auth } from 'boot/firebase'

[baroquemusic]

i tried both and got this error: Uncaught SyntaxError: The requested module '/src/boot/firebase.js' does not provide an export named 'default'

…

On Fri, Nov 4, 2022 at 9:17 PM Yusuf Kandemir ***@***.***> wrote: But, as he also said, I won't recommend using default export for this. Use named exports instead. // no defaultexport { app, analytics, auth, db} or export const app = initializeApp(firebaseConfig)export const analytics = getAnalytics(app)export const auth = getAuth(app)export const db = getFirestore(app) then import { auth, db } from 'boot/firebase' — Reply to this email directly, view it on GitHub <#14783 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVWDLXZSFCKA763GYZVPTPTWGYC2DANCNFSM6AAAAAARVUUEXQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[suleimanas]

again you are importing the default not named.
import auth from 'boot/firebase' === default
import { auth } from 'boot/firebase' === named

[baroquemusic]

Oh ok got it i made two different exports and now it's working - thanks so much! const app = initializeApp(firebaseConfig) const analytics = getAnalytics(app) export const auth = getAuth(app) const db = getFirestore(app) export default { app, analytics, db }

…

On Mon, Nov 7, 2022 at 10:49 PM Suleiman A. S ***@***.***> wrote: again you are importing the default not named. import auth from 'boot/firebase' === default import { auth } from 'boot/firebase' === named — Reply to this email directly, view it on GitHub <#14783 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVWDLXZINZBISRBDXNUQOZTWHIHZLANCNFSM6AAAAAARVUUEXQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>