My App router Nextjs app has a shared layout for all the site.
Said layout has a main nav, children and footer:

export default async function MainLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex flex-col min-h-screen animate-in fade-in">
      <NavBar />
      <div className="flex flex-col grow h-full">{children}</div>
      <Footer />
    </div>
  );
}

My sign in and sign out buttons are on the NAV and I have very few pages:
o Landing page (‘/’) has just info about the site and allows to log in from the menu. This page is not accessible when the user is logged in.
o Other pages (i.e.’/dashboard’) which can only be accessed when user is logged in

The problem occurs when my session expires, and I try to go to any page, which my middleware redirects to the root page (‘/’) but since the layout is shared, only the children on the page gets rerendered and the nav does not get rerendered. This makes my navigation options(links) and signin/signout to show as if a user was logged in when it was not.

I’m using a google provider only to sign in and next-auth to handle the session with JWT

 "next": "latest",
 "next-auth": "5.0.0-beta.20",

I found the nextjs docs talking about this issue and auth checks not happening here, but their solution implies having the navbar inside the children and that means I can’t reuse it

I guess one of my options was to split completely this 2 parts with different nav bars, but it seems not efficient.
Or maybe for the client to be polling for a session and if it is expired to redirect and do a full refresh.
I’m here to listen to other options.