Session not updated when signIn successful

[GvidasP]

Question 💬

It seems that using custom signIn page and setting redirect: false does not automatically update the session when the user is redirected to my desired page (homepage, index page). I have found similar issue #1264 and it is marked as resolved, but unfortunately, I am not able to make it work. The redirection works fine, however, after that, you have to manually refresh the page in order to get the session data.

How to reproduce ☕️

The onSubmit function which contains all the logic regarding signIn

const onSubmit = async (data: { email: string; password: string }) => {
    setLoading(true);
    const response = await signIn<'credentials'>('credentials', {
      redirect: false,
      callbackUrl: 'http://localhost:3000',
      ...data,
    });

    console.log(response);

    if (response) {
      if (response.error) {
        setError('An error has occurred')
      } else {
        router.push(response.url);
      }
    }

    setLoading(false);
  };

The response contains no error, everything seems normal and url is included. As I mentioned before, after the redirection, it is needed to refresh the page manually to get the session. I am using JWT strategy, so maybe this has something to do with it?

This is where I expect the session to be present after redirect:

const Home = () => {
  const { data: session } = useSession();

  return (
    <Layout>
      {session ? (
        <>
          Signed in {session.user.email} <br />
          <button onClick={() => signOut()}>Sign out</button>
        </>
      ) : (
        <>
          Not signed in <br />
          <button onClick={() => signIn()}>Sign in</button>
        </>
      )}
    </Layout>
  );
};

But all I get message Not signed in and trying to console.log(session) prints out null.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[GvidasP]

Okay, I seem to be able to solve this issue by myself. What I noticed by trial and error is that if I remove my serverSideTranslations and use getServerSideProps instead of getStaticProps on my desired page and use the await getSession(), things seem to be working. So, this is how it looks:

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => ({
  props: {
    ...(await serverSideTranslations(ctx.locale, [
      'header',
      'common',
      'itemcard',
      'footer',
    ])),
    session: await getSession(ctx),
  },
});

I am using next-i18next as my localization package. The problem seems to be with the getStaticProps, as the page gets built before the session is retrieved, causing the session not be present and the refresh to me made.