Wait for Session storage data before anything else in Nuxt

[Bartas139]

Hi, can someone please help me with my issue. I have a nuxt4 app where I store auth info in pinia session persist storage like this:

import { jwtDecode } from 'jwt-decode'
export const useAuthStore = defineStore('auth-store', {
	state: () => {
		return {
			userid: null,
			isAuth: false,
			authToken: null,
			authTokenExp: null,
			refreshTokenExp: null,
		}
	},
	actions: {
		async signin(credentials) {
			const data = await $fetch('/public/auth/signin', {
				baseURL: useRuntimeConfig().public.api,
				method: 'POST',
				credentials: 'include',
				body: credentials,
			})
				.then(async (res) => {
					this.isAuth = true
					this.authToken = res.authToken
					const payload = jwtDecode(res.authToken)
					this.userid = payload.sub
					this.authTokenExp = payload.exp
					this.refreshTokenExp = payload.refreshExp
					await useProfileStore().getProfile(this.userid)
					navigateTo(useRoute().query.redirect || '/')
				})
				.catch(() => {
					this.isAuth = false
					throw new Error('Chyba při přihlášení')
				})
		},
		async signout() {
			this.userid = null
			this.isAuth = false
			const { destroyProfile } = useProfileStore()
			destroyProfile()
		},
		async refreshToken(newToken) {
			this.authToken = newToken
			const payload = jwtDecode(newToken)
			this.userid = payload.sub
			this.authTokenExp = payload.exp
			this.refreshTokenExp = payload.refreshExp
			return
		},
	},
	persist: {
		storage: piniaPluginPersistedstate.sessionStorage(),
	},
})

This works well until I hard refresh the page in browser, in that case I came to weird behaviour, which is probably (I tested a lot) caused by my authMiddleware logic and the way pinia needs to extract the data from session storage first. The process and problem:

1. I refersh for example on /dashboard
2. Middleware is fired and user (isAuth=false) is navigated to /signin (because pinia is not fast enough to get the data from session)
3. On /signin the middleware is fired again and pinia has the data already, so it sends user directly back to /dashboard

The middleware:

export default defineNuxtRouteMiddleware(async (to) => {
	const { isAuth } = useAuthStore()

	abortNavigation()

	if (!isAuth && to.name !== 'signin') {
		return navigateTo({
			path: '/signin',
			query: { redirect: to.fullPath },
		})
	}
	if (isAuth && to.name === 'signin') {
		const redirect = to.query.redirect || '/'
		return navigateTo({
			path: redirect,
		})
	}
})

This should be ok for me, there is just insta redirect to signin and back to desired page, but here comes the problem. I use some userData in my Nuxt layout and this middleware redirect causes that Nuxt layout is not changed properly from unloged to default, so I see content of /dashboard, but with unloged layout. (and some hydratation missmatches):

Server rendered element contains more child nodes than client vdom. 
  at <Default ref=Ref< undefined > > 
  at <AsyncComponentWrapper ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <NuxtLayout > 
  at <App key=4 > 
  at <NuxtRoot>

(This missmatch is not there, when I navigate "organicly" so I am on signin, press SignIn button and I am send to /dashboard a "normal" way)

I realy dont know why this happens, but when I turn off that middleware everything works well.

What I wanted to do is to wait until all storages are ready (for example display some global loader) and when they are ready display the desired page, so there is not the redirect from /dashboard to /signin and back, but my attempts always failed.

Is there any clear solution, or am I missing something else, what causes the problem?

Thanks