I try to use firebase firestore in my latest vue3.js webapps. I have used vuex4 as sate management in my apps. My apps also use firebase authentication as login, logout, and make new users.

My apps use snapShot function after login, but an error occurred like below.

Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.

But I have made the code unsubscribe onSnapshot function after logout event. My code is like below:

store/index.js

const store = createStore({
 state: {
  unsubscribe: null,
 },
 actions: {
  startListner(context) {
   context.state.unsubscribe = onSnapshot(
      //something result get proccess
   )
  },
  stopPostsListner(context) {
      context.state.unsubscribe();
    },
 }
})

I made onSnapshot function as vuex actions methods. And then use these functions at index.vue.

index.vue

<script setup>
import { useStore } from "vuex";
import { onMounted, onUnmounted } from "vue";
const store = useStore();

onMounted(() => {
  store.dispatch("startPostsListner");
});
onUnmounted(() => {
  store.dispatch("stopPostsListner");
});
</script>

I thought onSnapshot function unsubscribe after destroying the component, but errors keep occurring.

How correctly way to use onSnapshot in vuex4?