why Server side getServerSession return null when refresh the page useFetch call the api

[skpnoes]

// file: ~/pages/get
<template>
    <div>
    {{ user }}
    </div>
</template>

<script setup>
  //  fetch the user
 
  const { data: user } = await useFetch('/api/carrier/get')
</script>

// file: ~/server/api/get.ts
import { getServerSession } from '#auth'
export default eventHandler(async (event) => {
  const session = await getServerSession(event)

  if (!session) {
    return { status: 'unauthenticated!' }
  }
  return { status: 'authenticated!' }
})

Additional information

It return the session when using the nuxtlink go to the page but after refresh the page it would return null. why ?

[BracketJohn]

Heya @skpnoes 👋

In the code you shared the endpoint does not actually return the user but instead only { status: 'authenticated' } or { status: 'unauthenticated' }. Furthermore your page fetches from /api/carrier/get but the api endpoint you show is at /api/get.

So I'm unsure how your code works in the first place. Can you clarify / update your code examples to help me better understand your problem?

[nathanjcollins]

Hey @BracketJohn I think I may be getting a similar issue.

I've got a /api/auth/me.ts which is a get, and using const session = await getServerSession(event); it is always returning null. Because it's on a redirect, it could be that it's SSR and not client side navigation?

Happy to share more info if needed.

EDIT: Just for a bit more info, I have a dashboard page, and the first thing I do is const { data } = await useFetch("/api/auth/me"); and inside that API, the getServerSession(event) is returning null.

[BracketJohn]

Thanks for the information! I think I maybe figured out what is happening: If you useFetch directly to consume an endpoint that uses getServerSession you need to ensure, that the nuxt passes the cookies (that include the auth cookies!) along:

const headers = useRequestHeaders(['cookie']) as HeadersInit
const { data: token } = await useFetch('/api/token', { headers })

Example from docs: https://sidebase.io/nuxt-auth/server-side/jwt-access#application-side-jwt-token-access

Nuxt Docs on useRequestHeaders here: https://nuxt.com/docs/api/composables/use-request-headers

This will ensure that auth-cookies are present independent of the request coming from server / client side.

Can you check and let me know if this resolves your issue?

[nathanjcollins]

@BracketJohn awesome that works, thank you! Apologies, I did try looking for something like that in the docs, but apparently I didn't look hard enough!

[BracketJohn]

No worries (: I've also learned from this issue and opened #124 to clarify this on the getServerSession docs page. It's easy to miss if it's only on the getToken page and a common enough gotcha!