useSession/Provider does not update when a new session is created until page reload.

[paul-vd]

Description 🐜

When a page is not reloaded after login, the useSession/Provider is never updated, even after calling getSession.

How to reproduce ☕️

1. Here is a reproduction of the issue.
2. I have set up a modal based login using a security code, for this example, I have hardcoded the security code to TEST
3. When you log in successfully, the callpack API triggers an additional getSession.
4. At this stage the cookies are created and the session should be there, but the provider does not update until you refresh the page.

Screenshots / Logs 📽

Environment 🖥

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 11.23 GB / 24.97 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm

[balazsorban44]

Hi, thank you for the decent bug report!
Unfortunately, your reproduction is unavailable, maybe it's private?

Once it's available, I'm going to have a look.

[paul-vd]

Sorry yea it was on private, I made it public now.

[balazsorban44]

Please stop commenting "same issue", it's not helpful.

[ThangHuuVu]

Hi all, let's continue the discussion here, I just added our latest update: #3941 (comment) I'm closing this issue.

[estani]

Am I missing something? #3941 is about updating the session, not reacting to session updates.

I have something like:

function UserNameWrapped() {
  const { data: session } = useSession();
  const [userName, setUserName] = React.useState("");
  useEffect(() => {
    if (!session) return;
    setUserName(session.user.name + ' (user)');
  }, [session?.user.name]);
  return <div>dev</div>
}
export default function UserName() {
  return (
    <SessionProvider>
      <UserNameWrapped />
    </SessionProvider>
  )
}

I'm changing the session in some other component. My expectation was that the name would be updated, but is not.
Is this because I use a different Session provider? Even if it is the same session, this are not shared between different SessionProviders?
Reloading sorts everything out, as mentioned in the tittle of this 5 years old ticket (I presume next-js changed a lot in this time...).