How to configure navigation guards

[osmelg]

Vue: 3.2.47
Pinia: 2.0.35
Router: 4.1.6
main.ts

import { createApp, markRaw } from 'vue'
import router from '@/router/index'
import { createPinia } from 'pinia'
import type { Router } from 'vue-router';
import App from './App.vue'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    router: Router;
  }
}

const app = createApp(App)
export const pinia = createPinia()

pinia.use(({ store }) => {
  store.router = markRaw(router)
});

app.use(pinia)
app.use(router)
app.mount('#app')

router index

import { createRouter, createWebHistory } from 'vue-router'
import { useUsersStore } from '@/stores/users'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
routes:[]
})
router.beforeEach((to: any, from: any) => {
  const store = useUsersStore()
  console.log(store.user.id); // undefined

  if (to.meta.requireAuth && !store.user.id) {
    return {
      path: '/login',
    }
  }
})

export default router

I am calling the authlistener from App.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { useUsersStore } from '@/stores/users'
onMounted(() => {
  const usersStore = useUsersStore()
  usersStore.authStateListener()
})
</script>

Can someone show me where's the errror?. I cannot access to the pinia store in the router beforeeach

[ramsesmoreno]

Hi! are you sure you can't access the Pinia store or is just the user or the user.id properties the ones undefined at that moment?

[osmelg]

Yeah, I am sure, btw if use setTimeout, then i can see the user properties, so i think it's a problem of where I'm calling the authStateListener?

[osmelg]

@posva help please 🥇