If you’re using Next.js 15 with NextAuth v5 and the App Router, you might have noticed this:
after calling signIn(), the client-side session state stays stale.

The login succeeds, the cookies are set, the JWT is updated —
but useSession() still shows the previous session until you refresh the browser.

This isn’t just about UI elements being stuck.
It’s the deeper issue: NextAuth's client session cache does not update immediately.

I spent time debugging this and want to show how I fixed it, why it works, and why most “client hacks” don’t.

The Real Issue

You call:

const { data: session, status } = useSession();\n

…but even after a successful signIn():

session.user is still null
status stays unauthenticated or loading
the client keeps serving cached session data

This is exactly what people reported here:
NextAuth GitHub Discussion #5719.

This means your client-side session state is out of sync with the actual session stored in cookies/JWT.

What I Tried

1. Calling `update()` after login

useEffect(() => {\n  if (status === 'loading') update();\n}, [status, update]);\n

✔ Sometimes works
✖ Still stale in many race conditions

2. Forcing `router.refresh()` after `signIn()`

await signIn(\"credentials\");\nrouter.refresh();\n

✔ Forces session fetch from server
✖ Breaks SPA behaviour (page flash, scroll reset)

Both methods try to force the client to update session state, but they rely on client caching behavior — which is unreliable.

The Actual Fix: Stop depending on the client session. Fetch session on the server.

Instead of asking NextAuth's client cache to refresh…
just bypass it.

Fetch the session where it’s always up-to-date: the server.

Then pass it into your components.

Step 1 — Create a server session helper

// server-only\nimport { auth } from \"@auth\";\n\nexport const verifySession = async () => {\n  const session = await auth();\n\n  if (!session || !session.user?.id) return null;\n\n  return {\n    isAuth: true,\n    userId: session.user.id,\n    role: session.user.role,\n    name: session.user.name,\n    email: session.user.email,\n  };\n};\n

Step 2 — Fetch session inside your layout or Page

import { verifySession } from \"@lib/dal\";\n\nexport default async function MainLayout({ children }) {\n  const session = await verifySession();\n\n  return (\n    <>\n      <Header session={session} />\n      {children}\n    </>\n  );\n}\n

Step 3 — Consume fresh session on the client

export default function Header({ session }) {\n  const isLoggedIn = session?.isAuth;\n  ...\n}\n

Because every server-rendered request fetches the latest session,
the client no longer depends on useSession() staying in sync.

🎉 Why This Solves the Client-Side Session Problem

The session is always fetched fresh on the server
No stale session cache on the client
No need for update(), router.refresh(), or effects
No client-side race conditions
No more “session doesn’t update until refresh” issues

You’re essentially removing the unreliable client-side session state from the critical path.

⚠️ Tradeoffs / Cons

You must pass the session to components as props
If the session changes without navigation, the client won’t update automatically (you’d need a manual refresh)

But for auth-aware layouts, this is vastly more stable.

✨ Final Thoughts

If you're using Next.js 15 + NextAuth v5, and your issue is that the client-side session never updates after login, the most reliable fix is to stop relying on the client session altogether.

Leaning on server-fetched session data gives you a consistent, always-accurate auth state — without hacks, flashes, or client-side polling.

Reference:
NextAuth GitHub Discussion #5719