next-auth: getSession call does not trigger session object update until window loses focus

One way to trigger the internal session re-validation on the active(!) window (thx to @ValentinH for providing some insights) might be to manually trigger a visibilitychange event

https://github.com/nextauthjs/next-auth/blob/main/src/client/index.js#L72

  document.addEventListener(
    "visibilitychange",
    () => {
      !document.hidden && __NEXTAUTH._getSession({ event: "visibilitychange" })
    },
    false
  )

this seems to be a working hack for me that does not require a full page reload or signIn

const reloadSession = () => {
    const event = new Event('visibilitychange');
    document.dispatchEvent(event)
}

@ValentinH @blms Thanks to you both!

This is helpful and I think we understand it well enough to fix now.

It’s supposed to work as described in the docs, but I think is inadvertently relying on localStorage to trigger the event and the way localStorage events work is they only trigger updates in windows other than the window that triggered the event.

+1. NextAuth gets me to the 99 yard line and then fumbles the ball by not being able to trigger a session state update from within the client (w/o needing to resort to fragile hackery). Calling getSession exhibits all the right behaviors throughout the stack except for updating state :0( Frankly, I’m surprised to see how old this issue is (and others like it) w/o any resolution for such an essential capability. NextAuth is an overall excellent, well-maintained library IMHO, and super appreciate the contrib, but I may need to bail on it over this issue given the inaction.

I want to give this issue a bump and see if we can move this along. Not being able to refresh sessions and have updates propagate is a big problem for us. Unfortunately the solutions provide either don’t seem to work or require reloading the page which is a non-starter for long-running real-time WebSocket based applications. (I spoke too soon. This does seem to work https://github.com/nextauthjs/next-auth/issues/596#issuecomment-943453568 but it is a very ugly hack). It seems that session refreshing is one of, if not the most frequent pain points for using NextAuth, as everyone is converging on these same questions in a number of places.

The work that’s been done on NextAuth provides a ton of value and I really appreciate it. Unfortunately, not having token refresh is a pretty critical flaw that makes the rest of the library not particularly useful in all but the simplest of cases. It looks like https://github.com/nextauthjs/next-auth/pull/4744 has been open for some time. Could I kindly ask that it’s either merged or it’s made clear why it can’t be merged so that we can work on an updated solution?

Ok, it works.

Doing as @PhilippLgh said :
event triggering :

const reloadSession = () => {
    const event = new Event('visibilitychange');
    document.dispatchEvent(event)
}

just works ! it does refresh the session.

@balazsorban44 Could this be a way ?

@zanami did you find the right solution for this? I’m in the same situation as you…

Nope, sorry, I gave up and dropped NextAuth.

Any solutions/workarounds for latest versions? 😃

Any news on the issue? following @timshingyu I’m also doing it via useSwr now:

import useSWR, { mutate } from 'swr'

// allows to mutate and revalidate
export const mutateSession = (data?: Session, shouldRevalidate?: boolean) => mutate('/api/auth/session', data, shouldRevalidate)

// parse the response
const fetcher = (url) => fetch(url).then((r) => r.json())

export function useUser({ redirectTo = '', redirectIfFound = false } = {}) {
  const [, loading] = useSession() // check if provider is still loading (avoid redirecting)
  const { data: session, isValidating } = useSWR<Session>('/api/auth/session', fetcher)

  const hasSession = Boolean(session?.user)
  const isLoading = loading || (!session && isValidating)

  useEffect(() => {
    if (!redirectTo || isLoading) return
    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !hasSession) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && hasSession)
    ) {
      Router.push(redirectTo)
    }
  }, [redirectTo, redirectIfFound, hasSession, isLoading])

  return session?.user ?? null
}

In case someone looking for a workaround. I just replace useSession hook and use useSWR library instead.

const { data, error } = useSWR('/api/auth/session', async (url) => {
  const res = await fetch(url)
  if (!res.ok) {
    throw new Error()
  }
  return res.json()
})

// For loading
if (!error && !data) {
}

// For no session
if (!data) {
}

// For session existing
if (data) {
}

// Make change on user 
async function handleSubmit(e: React.SyntheticEvent) {
  // e.g. update user profile

  // Get the latest session
  mutate('/api/auth/session')
}

I just noticed the same issue: if I call getSession() to trigger a session update, the call is correctly sent by the context is not updated. I think I understand why but I’m not sure how to fix it.

The first thing would be that we need to pass {triggerEvent: true} to getSession() so that it updates the localStorage to inform other windows: this line.

However, the code responsible to update the session following such a message has an explicit check to not update the session if the window is coming from the same window: this line

The problem is that the only way to update the Context is to call the internal _getSession of the _useSessionHook() via __NEXTAUTH._getSession().

I think this part of the doc is misleading:

It’s actually “you can can trigger an update of the session object across all other tabs/windows”.

Are we trying to do something that is not intended or is there a way to imperatively trigger a session update that would update the context of the current window?

The new implementation uses a BroadcastChannel based on the localStorage API. This could work (not tested):

export default function refreshSession () {
  const message = { event: 'session', data: { trigger: "getSession" } }
  localStorage.setItem(
    "nextauth.message",
    JSON.stringify({ ...message, timestamp: Math.floor(Date.now() / 1000) })
  )
}

Alternatively use getSession({ broadcast: true })

One way to trigger the internal session re-validation on the active(!) window (thx to @ValentinH for providing some insights) might be to manually trigger a visibilitychange event

https://github.com/nextauthjs/next-auth/blob/main/src/client/index.js#L72

  document.addEventListener(
    "visibilitychange",
    () => {
      !document.hidden && __NEXTAUTH._getSession({ event: "visibilitychange" })
    },
    false
  )

this seems to be a working hack for me that does not require a full page reload or signIn

const reloadSession = () => {
    const event = new Event('visibilitychange');
    document.dispatchEvent(event)
}

This hack stopped working in NextAuth@4. Not 100% sure why, but haven’t been able to get an alternative hack working yet. Anyone have a workaround yet for this in v4?

This hack stopped working in NextAuth@4.

Seems to work for me. Here’s my set up.

"next-auth": "^4.10.3"

export default function refreshSession () {
  const event = new Event('visibilitychange')
  document.dispatchEvent(event)
}

Here’s how I’m using it.

function create (data) {
  return post('/groups', { name: data.name })
    .then(() => refreshSession())
}

@zanami did you find the right solution for this? I’m in the same situation as you…

Heads up, my earlier suggestion still works ("next-auth": "^4.19.1").

This hack stopped working in NextAuth@4.

Seems to work for me. Here’s my set up.

"next-auth": "^4.10.3"

export default function refreshSession () {
 const event = new Event('visibilitychange')
 document.dispatchEvent(event)
}

Here’s how I’m using it.

function create (data) {
  return post('/groups', { name: data.name })
    .then(() => refreshSession())
}

Such an old and important issue, and no progress at all? 😦

The solution with new Event('visibilitychange') works only when the flag refetchOnWindowFocus is set to true on SessionProvider.

In case we don’t want to auto-update the session when a user switches windows we’re kind of stuck.

@PhilippLgh Looks like it’s also possible to use the exported BroadcastChannel function directly.

import { BroadcastChannel, BroadcastMessage } from 'next-auth/client/_utils'

const reloadSession = () => {
  const { post } = BroadcastChannel()
  const message: Partial<BroadcastMessage> = {
    event: 'session',
    data: { trigger: 'getSession' },
  }
  post(message)
}

Unfortunately, it doesn’t really trigger XHR to update the session.

Even if we add await getSession() it seems the SessionProvider doesn’t propagate the changes on the client.

const reloadSession = async () => {
  const { post } = BroadcastChannel()
  const message: Partial<BroadcastMessage> = {
    event: 'session',
    data: { trigger: 'getSession' },
  }
  post(message)

  await getSession({
    event: 'session',
    broadcast: true,
    triggerEvent: true,
  })
}

It’s possible that PR #4744 fixes it, but it’s still pending review.

Only solution so fat is to call your db and update the session yourself in the session callback…

Call database many time not really good, btw I use JWT too 😦

Only solution so fat is to call your db and update the session yourself in the session callback…

I think triggering a re-signin is the easiest method here. this will invoke the jwt callback with the new data, and a second login on most OAuth providers is barely visible as it will be a fast redirect (unless some params explicitly require the user to give their credentials again)