`getSession`'s status is always unauthenticated on server-side in route middlewares

[noook]

Environment

Nuxi 3.0.0-rc.13
RootDir: /Users/nook/work/tls-interim-front
Nuxt project info: (copied to clipboard)

---

• Operating System: Darwin
• Node Version: v18.12.0
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: npm@8.19.2
• Builder: vite
• User Config: typescript, css, modules, auth, build, googleFonts, runtimeConfig
• Runtime Modules: @nuxtjs/tailwindcss@6.1.3, @nuxtjs/google-fonts@3.0.0-1, @nuxtjs/svg@0.4.0, @pinia/nuxt@0.4.3, floating-vue/nuxt, @sidebase/nuxt-auth@0.0.1-beta.5
• Build Modules: -

---

Reproduction

No response

Describe the bug

Given I am authenticated:

When trying to guard a route, the session is always null (unauthenticated) on server side, but available on client side

definePageMeta({
  middleware: [async () => {
    const { status } = await useSession();
    console.log(status.value); // 'unauthenticated' on server, 'authenticated' on client
    if (status.value === 'authenticated') {
      return true;
    } else {
      console.log('hmm not ok');
      console.log(status.value); // 'unauthenticated' on server
    }
  }],
});

Additional context

No response

Logs

No response

[BracketJohn]

Hey @noook!

Thanks for this bug report 🦃

In the current implementation this is actually intended / a must: useSession only fetches from the client side, as this is where the auth-cookie is stored and can then be transmitted. If you want to stop running the full inline middleware on the server you can add:

if (process.server) {
  return true
}

at the top of your page-meta.

What's the problem you have / the use-case you cannot solve with this behavior? Do you already want to abort navigation on the server-side? This should be possible via a get session endpoint. Let me know if you like the idea, we can maybe add some helpers for this.

[noook]

This app uses an external API that requires authentication with a JWT
That means that even on the server on ssr I should be able to query that API with the session of the user

[BracketJohn]

Yeah - it works - I'll try to add a helper for it later. If you want to proceed now: Use useFetch to fetch the session from GET /api/auth/sesseion.

As useFetch is isomorphic, this should work on both server and client.

I'll either add a helper for this or make useSession itself isomorphic.

[noook]

I just tried and I still have an empty object server side, and a correct value on the client.

(I remapped the auth endpoint because API is reserved for me it routes to another server)

EDIT: my bad, I was missing this in the documentation:

https://v3.nuxtjs.org/getting-started/data-fetching#example-pass-client-headers-to-the-api

Works like a charm with this code:

middleware: [async () => {
  // await useSession();
  const headers = useRequestHeaders(['cookie']);
  const { data, pending } = await useFetch('/auth/session', {
    key: 'session',
    // I'm on strict mode I can't just pass the headers like that
    headers: {
      cookie: headers.cookie!,
    },
  });
  console.log(pending.value, data.value);
}],

[BracketJohn]

Perfect, glad the proposal worked for you (:

We'll publish a new release soon that includes native isomorphic fetching OR a special, isomorphic helper (unsure about the design details atm).

I'll leave this issue open until then (:

[BracketJohn]

@noook did you tsckle the onServerPrefetch warning somehow or just ignore it?

[noook]

I have the warning indeed. This conversation suggests using $fetch instead which removes the warning but that's maybe not what we want

[BracketJohn]

hm, I briefly tried it and it threw some other error. I'll investigate a bit more (:

[BracketJohn]

Hey @noook and @darwebdb (who I know is tracking this for his blog-post https://darweb.nl/blog/article/user-auth-and-session-management-in-nuxt3-with-sidebase-nuxt-auth-and-strapi-v4-1)

v0.1.0 is out now 🎊 It includes isomorphic useSession which resolves this issue (: Let me know or open a new issue if something comes up.

Use the release as:

npm i -D @sidebase/nuxt-auth@0.1.0