Firebase Auth Issue from Vue JS

[basho]

I am getting the following error message intermittently when I try to login via Firebase Auth from my Vue JS app.

Here is my LoginLogout component:

<template>
<div>
  <div v-if="!user">
    <button @click="login()" class="button is-info" :class="{'is-loading': loading}">Connect Wallet</button>
  </div>
  <div v-if="user">
    <button @click="logout()" class="button is-info">Logout</button>
  </div>
</div>

</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { initializeApp } from '@firebase/app'
import { getAuth } from '@firebase/auth'
import { getMoralisAuth } from '@moralisweb3/client-firebase-auth-utils'
import { signInWithMoralis } from '@moralisweb3/client-firebase-evm-auth'
import { firebaseConfig } from '@/firebase-config'

export default {
  name: 'LoginLogout',
  components: {},
  setup() {
    const app = initializeApp(firebaseConfig)
    const moralisAuth = getMoralisAuth(app)
    const auth = getAuth(app)
    const store = useStore()
    const loading = ref(false)
    let user = computed(() => store.state.user )

    const login = async () => {
      try {
        loading.value =  true
        const res = await signInWithMoralis(moralisAuth)
        const user = res.credentials.user
        store.dispatch('setUser', { uid : user.uid, address: user.displayName })
        loading.value = false
      } catch (err) {
        logout()
        loading.value =  false
        console.log('err', err)
      }
    }

    const logout = async () => {
      await auth.signOut()
      store.dispatch('setUser', null)
    }

    return {
      login,
      logout,
      user,
      loading,
    }
  }
}
</script>

And here is the intermittent error:

err Error: Not connected
    at <anonymous>:1:4417

Its weird, I am able to sign in via Brave but not Chrome. You can test here - https://odds-republic-d9750.web.app/events/2022-11-30

[alex]

@basho

I want to know if this is coming from the const res = await signInWithMoralis(moralisAuth)

You can use catch to see where this error is coming from.

try {
  const res = await signInWithMoralis(moralisAuth);
} catch (err) {
  console.log("err", err);
}

Or

await signInWithMoralis(moralisAuth).catch((err) => {
  console.log("err", err);
});

[basho]

@alex

try {
  const res = await signInWithMoralis(moralisAuth);
} catch (err) {
  console.log("err", err);
}

Tried that and it gave me this, it feels like Firebase is timing out

err Error: Not connected
    at <anonymous>:1:4417

[Erno]

Did you make sure that you have metamask installed in Chrome as well? It is weird that it works in Brave, but not Chrome otherwise.

Otherwise it might be an issue with one of your extensions, you could try incognito mode in chrome (and only enable the metamask extension)

I tried, in both Chrome and Brave, and seems to work without any error. (via the hosted app that you linked)

[Erno]

On a side note, I had to click “logout” first (when I loaded the page), before I was able to connect. You probably are still working on this, but just wanted to make you aware of this