VueJS and firebase: Check if the user is logged in after page refresh

Question

I am developing a web application using Vue 3 and firebase framework. As a stroe, I use Pinia. For authentication I'm using firebase and so far it works great, users can register and log in. Once a user logs in, his data is stored in pinia storage.

However, once the user logs in and reloads the page, the data in pinia storage is lost. If I use the firebase function onAuthStateChanged() , the user is still logged in.

My first solution was to call the onAuthStateChanged() function every time the app is launched and the pinia store is populated with the required data. I've tried calling the onAuthStateChanged() function in the firebase config file, but the pinia store hasn't been initialized there yet.

At what point in the Vue application do I have to call the onAuthStateChanged() function so that the user is automatically logged in after a refresh and I can write user data to Pinia storage?

Answer 1

I'm not sure what you've tried, but I know this will work. Of course, you can move onAuthStateChanged out of your store and it will still work. Remember, you have to use observers or computed props to track store.user and update the UI.

import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth();
onAuthStateChanged(auth, async () => {
  const store = useStore();
  store.setUser();
});


const useStore = defineStore('store', {
  state: () => ({ 
    user: null
  }),
  actions: {
    setUser() {
      // Set user here
      // this.user = ...
    }
  }
});