The guest middleware not working with pinia stores

[CODE-AXION]

i am trying to make a very simple guest middleware which will check if the user is already logged in dont let him visit the log in page thats it , i tried your code and implemented mine too but its still throwing the same error which i mentioned above

but whenever i am tryna use this middleware it just doesn't work, i have already wasted 6 hours on this straight.

when i use the let checkUser = authStore.isLoggedIn the value is always true for logged in users which i have debugged inside console.log but when i hard code the value of the checkuser variable then it works perfectly i dont know what is the problem here

here's what i am getting when i am using stores : the middleware waits for a sec and then redirects and gives me some errors which look like this :

also when i try to do the inverse it works i dont know how but i dont want that , you can see at the below code and the comment

import { useAuth } from "../composables/Auth.js"

export default defineNuxtRouteMiddleware(async(to,from) => {
    const  nuxtApp  = useNuxtApp()
    const authStore = useAuth(nuxtApp.$pinia);
    let checkUser = ref(authStore.isLoggedIn);

    console.log(checkUser.value)

    // this doesn't work
    if ((to !== '/') && (checkUser.value)) {

        return navigateTo('/')
    }

    // this works somehow with the inverse condition but i dont want that 
    if ((to !== '/') && !(checkUser.value)) {

        return navigateTo('/')
    }

    // if (to !== '/' && !authStore.user?.id) return navigateTo("/", { replace: true });
});

[amrnn90]

This repo is not using pinia, so I cannot tell what the issue is just from this. Can you show what you have in your ~/composables/Auth.js file and any other relevant code you have added?

[CODE-AXION]

This repo is not using pinia, so I cannot tell what the issue is just from this. Can you show what you have in your ~/composables/Auth.js file and any other relevant code you have added?

Yes you are right !. But in my case I am using Pinia here . But I am getting the same problem

I am so seriously so tired debugging this for straight 6 hours , it would be alot helpful of you could help me with this !

in here everything works perfectly here there is no errors here, the problem is the middleware

composables/Auth.js

import { defineStore } from "pinia";

export const useAuth = defineStore("Auth", ()=>{

    const route = useRoute()

    const router = useRouter();
    const user = ref(null);
    const user_id = ref(null);

    const isLoggedIn = computed(() => !!user.value);

    async function login(credentials) {
        if (isLoggedIn.value) return;

        await $larafetch("/login", { method: "post", body: credentials,});

        await refresh();
    }

    async function register(credentials) {
        await $larafetch("/register", { method: "post", body: credentials });
        await refresh();
    }

    async function refresh() {
        try {

            let fetchedUser = await fetchCurrentUser();
            user_id.value = fetchedUser.id
            return user.value = fetchedUser;

            // console.log(user.value)
        } catch {

            user_id.value = null
            return user.value = null;
        }
    }

    async function setUser(setUser)
    {
        user.value = setUser;
    }

    async function logout() {
        if (!isLoggedIn.value) return;

        await $larafetch("/logout", { method: "post" });
        user.value = null;

        await router.push("/auth/login");
    }

    const AuthUser = async () => {
        return user.value;
    }

    const fetchCurrentUser = async () => {
        try {
            // const { data } = await useLarafetch("/api/user");
            // console.log(data)
          return await $larafetch("/api/user");
        } catch (error) {
          if ([401, 419].includes(error?.response?.status)) return null;
            throw error;
        }
    };

    return {
        user,
        isLoggedIn,
        user_id,
        fetchCurrentUser,
        login,
        setUser,
        register,
        logout,
        refresh,
    }

})

[amrnn90]

I guess the most immediate issue is you are making this comparison in your middleware:

if (to !== '/') {}

Which instead should be:

if (to.path !== '/') {}

Typescript should have indicated this error for you in the editor.

[CODE-AXION]

I guess the most immediate issue is you are making this comparison in your middleware:

if (to !== '/') {}

Which instead should be:

if (to.path !== '/') {}

@amrnn90

I have tried this but the problem is both the condition are fulfilling but it waits for a sec and then redirects and throws me the error which I showed you in the screenshot I seriously don't know what the problem

This problems seems simple but it isn't

[amrnn90]

Are you initializing the value of the user in a plugin? show its code here plesae.

[amrnn90]

It would also be better if you can create a minimal repo demonstrating the issue and share the url here since I cannot reproduce the issue.

[CODE-AXION]

Are you initializing the value of the user in a plugin? show its code here plesae.

plugins/auth.js

@amrnn90

import { useAuthStore } from "../stores/useAuthStore.js";

export default defineNuxtPlugin(async (nuxtApp) => {

    const authStore = useAuthStore(nuxtApp.$pinia);
    if (authStore.user?.id !== undefined) return;

    authStore.user = await authStore.refresh();

});

[CODE-AXION]

It would also be better if you can create a minimal repo demonstrating the issue and share the url here since I cannot reproduce the issue.

can i give it to you tomorrow , because in my timezone its already 2am and i have job tomorrow , btw would give you the repo link tomorrow if possible ?

cool ? i really want someone to help me with this . because this error seems so obvious but its not at all resolving . and thanks for helping its appreciated !!!

[amrnn90]

Your app is fetching the user twice, once during SSR and another when the app renders in the browser since this condition is never fulfilled:

if (authStore.user?.id !== undefined) return;

because you are initializing the user value to null in your store:

 const user_id = ref(null);

You should initialize the user to undefined instead:

 const user = ref(undefined);

and then check if its value is not undefined in the plugin:

if (authStore.user !== undefined) return;

[CODE-AXION]

Your app is fetching the user twice, once during SSR and another when the app renders in the browser since this condition is never fulfilled:

if (authStore.user?.id !== undefined) return;

because you are initializing the user value to null in your store:

 const user_id = ref(null);

You should initialize the user to undefined instead:

 const user = ref(undefined);

and then check if its value is not undefined in the plugin:

if (authStore.user !== undefined) return;

Your app is fetching the user twice, once during SSR and another when the app renders in the browser since this condition is never fulfilled:

if (authStore.user?.id !== undefined) return;

because you are initializing the user value to null in your store:

 const user = ref(null);

You should initialize it to undefined instead:

 const user = ref(undefined);

@amrnn90 i tried this , but still its not working look i am getting the whole authenticated user here in this which is working perfectly fine:

  const  nuxtApp  = useNuxtApp()
  const authStore = useAuth(nuxtApp.$pinia);

in the middleware the conditions is also fulfulling, but as i explained the scenario

the conditions fullfils the navigateTo method works the main problem --> the current page loads for 1 sec and then navigates to the route and throws me the error (image error)

BUT , when i inverse the condition it works perfectly and i dont know how

 // this doesn't work
    if ((to !== '/') && (checkUser.value)) {

        return navigateTo('/')
    }

    // this works somehow with the inverse condition but i dont want that 
    if ((to !== '/') && !(checkUser.value)) {

        return navigateTo('/')
    }

[amrnn90]

Feel free to share a minimal reproduction url when you have it, please only add to it the minimum amount of code necessary to illustrate the issue.

[CODE-AXION]

Feel free to share a minimal reproduction url when you have it, please only add to it the minimum amount of code necessary to illustrate the issue.

@amrnn90

Thanks so much brother, yeah don't worry I will make sure of that

It doesn't have any additional methods, all the methods are from this package only so no worries .

[amrnn90]

I am closing this for now, if you are still facing a problem feel free to open a new issue with the reproduction repo.

[CODE-AXION]

@amrnn90 hi

you can clone my project https://github.com/CODE-AXION/nuxt-barodagifts.com

because you would also need laravel to test this , so i have given you the full access

[amrnn90]

Hi, that is not really a minimal reproduction! Anyway, I tried running it but I had to comment out this component and things seem to be working fine:

    <div class="bg-purple-50 py-8">
      <ModulesProductsHomeProducts />
    </div>

[CODE-AXION]

@amrnn90

sorry for that , but the main problem occurs in the middleware , all auth code is yours only just converted it to pinia stores

i removed the whole module and its still not working...

i am confused how its working on your side .

[CODE-AXION]

@amrnn90

if you will hardcode the value it will work, but its not working with the api, the middleware does not wait for the data first , it renders the page first and then the data

i am seriously so confused , if this wont get solved i wont be able to continue this project

the scenario goes like this: first the page is rendered, then the data is rendered and after a delay it redirects to home page with dom mismatch nodes errors

[amrnn90]

Unfortunately I cannot really tell what is wrong if I cannot reproduce it, you can see it working for me here

https://github.com/amrnn90/breeze-nuxt/assets/38134195/e3102baf-2e6c-4fab-af70-5eedcc2e2ef5

[amrnn90]

Can you run this command and show me the output:

npx nuxi info

[CODE-AXION]

@amrnn90

the video you showed is exactly what i wanted !!!!!!!!!!!!

how is it working on your side !!!!!!!!

here is the details

[amrnn90]

Are you getting any errors in the console where you run Nuxt's dev sever?

[CODE-AXION]

@amrnn90

i am only getting undefined but i dont think thats the issue, but one thing i understand is due to system requirements

what do you think is it possible ?

[amrnn90]

Could be some weird issue with using Windows/xampp.. I do not really know, sorry.

[CODE-AXION]

@amrnn90

btw thanks for your help brother, like really really thank you for giving your time , its much much appreciated , actually you literally solved my issue .

i got that that its sure system requirements issue because if it would have been a code level issue , it would not have worked on your machine but , i will try to change folders or anything and will see .

again really really thank you for your time mannn , and this package is also really amazing once i solved this issue i am gonna use this package only because its fulfilling my whole requirement .

Thanks for the help and your time !

[amrnn90]

You are welcome, hope you can figure it out.

[CODE-AXION]

@amrnn90

btw one last question , you did not change anything in the code or configuration right ?

you just installed the packages and ran the server npm run dev

right ?

[amrnn90]

Yeah no changes, just commented out that component I mentioned earlier.

[CODE-AXION]

@amrnn90

I CANT BELIVE IT , HOW IS IT EVEN ???

i changed my backend URL from http://localhost:8000 to http://localhost/barodagifts.com/public

and it worked ...

i have wasted not hours but days on to this ??

[amrnn90]

Oh nice, glad it worked out for you!