useSession() not getting the updated session after logout and re login

[sreenathkumar]

I am trying to implement add to Wishlist feature. I wanted that when use click on the "add to wishlist" btn(client component) update the session and catch the updated session in the header and show the number of the wish list items.

It working fine when I stayed login. But when I logout then server component's session becomes null but the client component still holding the previous login state. I mean wishlist show the number. But it should be 0 because the session doesn't exist.

But if i reload the tab then the session is available inside the client component session

[oleksiimazurenko]

This is how I fixed the problem.

"use client";

import { Session } from "next-auth";
import { useSession } from "next-auth/react";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { authRoutes, publicRoutes } from "../routes";

export function useCustomSession() {
  const { data: lieSession, status, update } = useSession();
  const [truthSession, setUpdatedSession] = useState<Session | null>(null);

  const pathname = usePathname();

  //TODO: When logging out of your account, the session is not updated. An interesting fact is that the update occurs if you lose the focus of a browser tab and go back.
  useEffect(() => {
    update().then((s) => {
      setUpdatedSession(s);
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const session =
    publicRoutes.includes(pathname) || authRoutes.includes(pathname)
      ? truthSession
      : lieSession;

  return { session, status, update };
}

[sreenathkumar]

Yes. I also fixed that issue by storing the session on my custom context and providing that through out the entire application. But my uneasyness was that, as we are already using sessionProvider context from NextAuth then why we make extra context and do all of the extra hassle. I think NextAuth should work on it and make the SessionContext in such a way that the frontend and backend can keep in sync.

@oleksiimazurenko thank you so much for your help.