Session fetched after middleware execution when SSR is disabled

[mitto98]

Ciao,

When ssr is disabled the user session data remains empty during the initial page load if the session is retrieved using the useUserSession composable in the middleware.
If I add plugin that call the fetch function returned by the useUserSession composable the session, the session is correctly populated by the time the middleware runs.

This is the middleware/auth.global.ts file

export default defineNuxtRouteMiddleware(() => {
  const { loggedIn, user } = useUserSession();

  console.log("User is logged in", loggedIn.value);

  if (!loggedIn.value) {
    return navigateTo("/auth/keycloak", { external: true });
  }
});

This is the plugins/01.loadsession.ts file that fixed my issue:

export default defineNuxtPlugin(async (nuxtApp) => {
  // nuxtApp.hook("app:created", async () => {
  await useUserSession().fetch();
  // });
});

I've tried to hook the session fetch to app:created, but it is still executing it before the middleware is executed. If you have a better solution I can test it and do a PR, I'm not sure if my current solution will work in others scenarios.

Steps to Reproduce:

• Ensure that a session is present and ssr is disabled
• Add a Nuxt middleware that calls the useUserSession composable and log the returned session and loggedIn value.
• Reload the app, session is empty and loggedIn is false.
• Add a plugin that fetches the session immediatelly.
• Reload the app and, the session is now correctly populated and loggedIn is trye.

[samuelbelo]

I am facing the same issue. Besides my application does behave correctly in development, it does not retrieve the session in production. I am using azure static web app.

[atinux]

Thank you for reporting and investigating!

I was focused on the hydration mismatch and forgot that we need to fetch without waiting for CSR.

You can use the v0.3.5

[DavidSabine]

Hi, I think I'm facing the same issue.

"nuxt-auth-utils": "0.5.18"

The fix discussed in this thread, was it implemented in the module, or just in the playground for demonstration purposes?

The behaviour I'm experiencing:

In dev, everything works.
In production (nuxthub, fyi), /api/_auth/session returns something like the following:

{"id":"214d7d02-b6db-4d4b-879b-e53839e43426","user":{"id":2,"email":"my@example.com","name":"My Name"},"loggedInAt":"2025-04-03T02:39:24.441Z"}

But loggedIn.value is not true in the middleware (below):

export default defineNuxtRouteMiddleware(async () => {
	const { loggedIn, user } = useUserSession()
	if (!loggedIn.value) {
		return navigateTo('/')
	}
})

I'll try to implement the plugin mitto98 shared above, but if this is not the appropriate path I'd love if someone stop me before I do something dumb.