Middleware + pinia not working

[maksimdrosdov]

Environment

middleware

Reproduction

middleware

Describe the bug

When I reload the page, it throws me to the authorization page, although the user is authorized

import { useAuthStore } from '~/store/auth';

export default defineNuxtRouteMiddleware(async () => {
  const { loggedIn } = useAuthStore();

  if (!loggedIn) {
    return navigateTo('/auth');
  }
});

Additional context

No response

Logs

No response

[HigherOrderLogic]

This doesn't look like a Nuxt bug. Can you provide a minimum reproduction?

[Dodje]

I believe that happens because you need to connect your pinia instance with app store.

In your vue components pinia can get store context from app's context (this.$store) via some magic, but there is no such a thing in a simple general function. But you can get it from ctx.app.$store Sadly I've not worked with pinia closely, but I guess a little trick from Vuex-smart-modue might help you to find easy solution, You need to connect you store manager with store context manually:

// vuex-smart-module example
// Get module context
const ctx = yourModule.context(store);

So if there is no such a thing for pinia, there is an issue in the pinia lib.

And actually we can find similar issue there

[maksimdrosdov]

console.log('loggedIn = ', loggedIn);

shows that true, but everything exactly redirects to auth

[maksimdrosdov]

@danielroe sent an invite

[TheAlexLichter]

@maksimdrosdov Please be aware that a full-blown project is no reproduction 🙈

The goal is to have as little "moving pieces" as possible and a project that is as small as possible to reproduce the bug so contributors can pin it down easily and it is not caused by any custom userland logic

[Dodje]

console.log('loggedIn = ', loggedIn);

shows that true, but everything exactly redirects to auth

There might be a little trick with lifecycle and browser's logs..

Try to do smth like this to clear link to store's object

const authState = useAuthStore();
console.log({...authState});

And check your loggedIn in exact moment

[maksimdrosdov]

import { storeToRefs } from 'pinia';
import { useAuthStore } from '~/store/auth';

export default defineNuxtRouteMiddleware(() => {
  const authStore = useAuthStore();

  console.log({...authStore});

  const { loggedIn } = storeToRefs(authStore);

 if (!loggedIn.value) {
  //return navigateTo('/auth');
 }
});

[typhoon11]

This problem is still there please fix it. In middleware pinia data is empty

[TheAlexLichter]

@typhoon11 Can you provide a reproduction?

[typhoon11]

@typhoon11 Can you provide a reproduction?

So I made a getter in pinia

and tried them on middleware and a page

So it's visible that pinia is empty for the files in the middleware directory

[TheAlexLichter]

@typhoon11 Please provide a repository or use Stackblitz or Codesandbox as linked above. This is the best way to make it easy for maintainers to help you. I highly recommend to read the linked paragraph above.

[typhoon11]

@typhoon11 Please provide a repository or use Stackblitz or Codesandbox as linked above. This is the best way to make it easy for maintainers to help you. I highly recommend to read the linked paragraph above.

Sorry for late reply. I tested it and found it works on normal page redirect but when we refresh the page it becomes unavailable. I attach the stack blitz below
https://stackblitz.com/edit/github-nf9a2f

[TheAlexLichter]

@typhoon11 In your middleware, you should not trigger navigateTo in the "default"/"happy" case. Instead, just not return anything and the middleware will "succeed".

import { useDiscordUser } from '~/stores/auth';

export default defineNuxtRouteMiddleware(async (to, from) => {
  const app = useNuxtApp();
  const user = await useDiscordUser(app.$pinia);

  if (!user.user) {
    console.log('User not logged in');
    return navigateTo('/');
  }
});