atinux / nuxt-auth-utils

Add Authentication to Nuxt applications with secured & sealed cookies sessions.
MIT License
946 stars 87 forks source link

Session data not updated client side after succesful login #126

Closed jelmerdemaat closed 3 months ago

jelmerdemaat commented 3 months ago

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

oylft commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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()