NextAuth session undefined in production

Auth.js (the v5 rebrand of NextAuth) relies on three pieces to rehydrate a session client-side. First, a JWT cookie signed with NEXTAUTH_SECRET. Second, a <SessionProvider> React context that polls the session endpoint. Third, an accurate NEXTAUTH_URL so the provider knows where to call. Break any one and useSession() returns { data: undefined, status: 'unauthenticated' } with no error shown to the user.

AI builders scaffold NextAuth with the quickstart that assumes a local dev setup. They set NEXTAUTH_SECRET in a .env.local that never gets committed, and assume NEXTAUTH_URL defaults to http://localhost:3000. At deploy on Vercel, neither env var exists in the project settings. Auth.js either throws a quiet error in the server log (which the user never sees) or refuses to sign JWTs. The sign-in flow appears to succeed — the provider redirects, the cookie is set — but the JWT has no valid signature or the callback URL points at localhost and the session never rehydrates.

The second pattern is a regenerated secret. Some teams put NEXTAUTH_SECRET in a GitHub Action that rotates on every deploy. Each rotation invalidates every JWT in circulation. Users see themselves logged in for a millisecond, then logged out. The fix is to treat the secret as a fixed production credential managed in Vercel env, not in CI. Rotating it requires planned downtime and user re-sign-in.

The third pattern is missing SessionProvider. The hook throws no error when context is missing — it returns undefined. AI-generated App Router code sometimes forgets to add the provider because it was a Pages Router pattern. Add it to app/layout.tsx wrapped around {children}, pre-fetching the session on the server so the client has data on first paint.