How to use Pinia with Firebase 9 onAuthStateChanged?

[BenJackGill]

I am using Firebase 9 in my Vue 3 / Quasar / TypeScript app.

I am trying to fetch a user object from Firebase 9 using the onAuthStateChanged method, storing it in a ref, and then using that in my Pinia user store.

This is the getUser.ts composable I use to get the user from Firebase:

import { ref } from 'vue';
import { auth } from 'src/firebase/config';
import { User, onAuthStateChanged } from 'firebase/auth';

const user = ref<User | null>(auth.currentUser);

console.log('user.value in getUser', user.value); // <-- This returns null

onAuthStateChanged(auth, (_user) => {
  user.value = _user;
  console.log('user.value in getUser onAuthStateChanged', user.value); // <-- This returns a valid user object
});

const getUser = () => {
  return { user };
};

export default getUser;

And this is my Pinia store named user.ts:

import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';
import useUser from 'src/composables/useUser';
import getUser from 'src/composables/getUser';
import getDocument from 'src/composables/getDocument';
import { User } from 'src/types';

const { updateUserProfile } = useUser();
const { user } = getUser();

console.log('user.value in user store', user.value); // <-- This returns null

let userObject = {};
if (user.value) {
  const { document: userDocument } = getDocument('users', user.value.uid);
  userObject = {
    firstName: userDocument.value?.firstName as string,
    lastName: userDocument.value?.lastName as string,
    displayName: user.value.displayName,
    photoURL: user.value.photoURL,
    email: user.value.email,
    phoneNumber: user.value.phoneNumber,
    uid: user.value.uid,
  };
}

const useUserStore = defineStore('user', {
  state: () => ({
    user: (LocalStorage.getItem('user') || userObject) as User,
  }),
  actions: {
    async setPhotoURL(photoURLData: string | undefined) {
      await updateUserProfile({ photoURL: photoURLData });
      this.user.photoURL = photoURLData;
    },
    setEmail(emailData: string) {
      this.user.email = emailData;
    },
    setPhone(phoneNumberData: string) {
      this.user.phoneNumber = phoneNumberData;
    },
  },
});

export default useUserStore;

The user.value inside onAuthStateChanged correctly populates with the Firebase user object.

But the user.value ref inside the Pinia store always returns null.

What am I doing wrong?

[dajpes]

I know my answer is late, but for those who want to use firebase with pinia, you can take these videos as inspiration:

https://www.youtube.com/watch?v=Kc-FbPSdezg

https://www.youtube.com/watch?v=xceR7mrrXsA

I can even use the explanation for this react video applying it to pinia

https://www.youtube.com/watch?v=L6gG1Y_T2Cs

https://www.youtube.com/watch?v=hUi5RcRyhxM

[dosstx]

Another approach:

In app.vue:

const userStore = useUserStore()

onMounted(() => {
  console.log('mounting..')
  userStore.setUser()
})

In the user store:

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      user: null,
      loading: false,
      userProfile: null,
      listenerUnsubscribe: null
    }
  },
  actions: {
    setUser() {
      const { auth, firestore } = useFirebase()
      this.loading = true
      onAuthStateChanged(auth, async (user) => {
        if (user) {
          console.log('onAuthState Observer: user signed in...')
          const { displayName, email, photoURL, emailVerified, uid } = user // get what you need from the user object
          this.user = { displayName, email, photoURL, emailVerified, uid }
          await this.getUserProfile()
          this.loading = false
        } else {
          console.log('onAuthState Observer: user not logged in or created yet')

          this.loading = false
        }
      })
persist: true //<---------persists user state to local storage! 
    },

To persist user state to local storage (works with SSR), install the Pinia Persisted State plugin for Nuxt: https://github.com/prazdevs/pinia-plugin-persistedstate