<p>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. </p> <p>However, once the user logs in and reloads the page, the data in pinia storage is lost. If I use the firebase function <code>onAuthStateChanged()</code> , the user is still logged in. </p> <p>My first solution was to call the <code>onAuthStateChanged()</code> function every time the app is launched and the pinia store is populated with the required data. I've tried calling the <code>onAuthStateChanged()</code> function in the firebase config file, but the pinia store hasn't been initialized there yet. </p> <p>At what point in the Vue application do I have to call the <code>onAuthStateChanged()</code> function so that the user is automatically logged in after a refresh and I can write user data to Pinia storage? </p>

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 = ...
    }
  }
});