Session data not updated client side after succesful login

[jelmerdemaat]

Hi, I have worked out this scenario here:

https://stackblitz.com/edit/github-qh7t4n

1. Go to login route
2. Click login button to login with the example sessionId of 1234567890
3. After successful login, you are client side redirected by navigateTo to the homepage
4. Homepage does not reflect the user's session data or loggedIn state
5. Refresh the page to force a server side request
6. Homepage correctly shows the users logged in session state

I would expect it to correctly show the logged in session at step 4. Is that correct?

See attached recording:

https://github.com/user-attachments/assets/5be74085-7a00-4d66-b6b7-049b62ce711b

[ugdot]

U can try it.

const { loggedIn, fetch } = useUserSession()

// ------------------------------------------
const [err] = await to($fetch('/api/login', {
    method: 'POST',
    body: {
      username: model.username,
      password,
    },
  }))
  logining.value = false
  if (err) {
    message.type = 'error'
    message.content = err instanceof FetchError ? err.data.message : err.message
  }
  else {
    message.type = 'success'
    message.content = 'It's ok'
    // ******************
    fetch().then(() => {
      router.push('/dashboard')
    })
    // ******************
  }
}

[jelmerdemaat]

@CynCw Thanks, that works indeed, although I still have the expectation of this working when using navigateTo, without doing an explicit call to fetch.

navigateTo is a navigation (can be client or server side) to another page, which gives me the expectation that the users' session state will have been updated on this next page. Whether this is client or server side navigation would be irrelevant here (to me).

But I might be wrong here, I don't know if it's possible/expected to build this into this module.

[atinux]

@CynCw is right, you need to call fetch() from useUserSession() to fetch the session from the API side to reflect it in the app.

Nuxt Auth Utils cannot guess that your API call is to login actually (until we create those routes/methods). Also I did not want to add a global middleware to avoid making API request between each pages.

[jelmerdemaat]

@Atinux Allright thanks!

And would it maybe be a solution if calling setUserSession would always automatically trigger a fetch call after it, so triggered by the module, removing the need for developers to always implement this call themselves?

(I ask because I feel like Nuxt is mostly used in Universal Rendering mode, which means a lot of developers could have this assumption that this would "automatically" work client side)

[atinux]

So far as long as we don't have the ability to add interceptor to $fetch to know when Set-Cookie is set, sadly we have no other choice.

This fetch() call is only when handling the authentication ourselves in our API route. One solution would be to have a login() method from useUserSession() but this is something I am thinking for the next iteration of the module to become useAuth()