Intermittent Hydration Error After Page Reload with Better Auth getSession()

[VitorAndrey]

Summary

Issue:

Intermittent Hydration failed error that appears only after one or multiple 'F5' or 'Crlt + Shift + r' reloads (non-deterministic timing - sometimes 2 reloads, sometimes 10+).
Error occurs exclusively in (auth)/... route, never in (routes)/....

Environment:

Next.js 16.1.6 (Turbopack)
React 19
Better Auth for authentication

Tests Performed (all unsuccessful):

✅ Removed ThemeProvider completely → error persists
✅ Removed Toaster → error persists
✅ Removed DynamicThemeToggle → error persists
✅ Added suppressHydrationWarning to all elements → error persists
✅ Tested in Incognito mode (no extensions) → error persists
✅ Removed enableSystem from theme → error persists
✅ Commented out redirect logic → error persists
✅ Added AuthProvider wrapper → error persists

Specific Observations:

Intermittent nature suggests non-deterministic factor
Tested in Incognito mode (no extensions)
Only happens after one or multiple (10+) page reloads
Only in (auth), never in (routes)
Trace indicates server-side Suspense boundary mismatch

Question:

Is this a known Next.js 16 issue with Turbopack and server components, or a subtle hydration timing issue I'm missing?

Component with error:

src/app/(pages)/(auth)/layout.tsx

import { headers } from "next/headers";
import { redirect } from "next/navigation";

import { auth } from "@/app/lib/auth";

export default async function AuthLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth.api.getSession({
    headers: await headers()
  });

  if (session) {
    redirect("/");
  }

  return (
    <div className="flex h-full w-full items-center justify-center"> // <--- Error ❌
      {children}
    </div>
  );
}

Screen.Recording.2026-02-05.111638.mp4

Additional information

Folder Structure:


my-project/
├── src/
│   └── app/
│       ├── (pages)/
│       │   ├── layout.tsx                    (Root Layout - ThemeProvider commented)
│       │   ├── (auth)/
│       │   │   ├── layout.tsx               (AuthLayout with getSession + redirect)
│       │   │   ├── sign-in/
│       │   │   │   └── page.tsx             (Client component with useForm)
│       │   │   └── sign-up/
│       │   │       └── page.tsx             (Client component with useForm)
│       │   └── (routes)/
│       │       ├── layout.tsx               (Routes Layout - never fails)
│       │       └── ...
│       └── components/
│           ├── providers/
│           │   ├── theme-provider.tsx       (ThemeProvider with next-themes)
│           ├── shadcn/
│           └── ui/
│               ├── theme-toggle.tsx
│               └── dynamic-theme-toogle.tsx (Comentado)

Error Trace Shows:

Recoverable Error


Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

...


<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>


<HTTPAccessFallbackBoundary notFound={} forbidden={undefined} unauthorized={undefined}>
<HTTPAccessFallbackErrorBoundary pathname="/sign-in" notFound={} forbidden={undefined} ...>


<InnerLayoutRouter url="/sign-in" tree={[...]} params={{}} cacheNode={{...}} segmentPath={[...]} ...>

•                       <div className="flex h-full w-full items-center justify-center">
  

•                       <Suspense>
                  ...
      ...
  

Call Stack (12):

https://react.dev/link/hydration-mismatch throwOnHydrationMismatch node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (5530:11) beginWork node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (12385:17) replayBeginWork node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (19054:24) runWithFiberInDEV node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (986:30) replaySuspendedUnitOfWork node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (19018:18) renderRootConcurrent node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (18901:21) performWorkOnRoot node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (17834:11) performWorkOnRootViaSchedulerTask node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (20384:7) MessagePort.performWorkUntilDeadline node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (45:48) div AuthLayout src\app\(pages)\(auth)\layout.tsx (20:5) ``` ```

Example

No response

[Tiimie1]

I'd move the authentication check to Middleware (src/middleware.ts). This prevents the request from ever reaching the Layout/React rendering phase if a redirect is needed, eliminating the race condition.

import { NextResponse, type NextRequest } from "next/server";
import { getSessionCookie } from "better-auth/cookies"; // you said you were using better-auth

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const isAuthRoute = pathname.startsWith("/sign-in") || pathname.startsWith("/sign-up");

  const sessionCookie = getSessionCookie(request); 

  // If user is logged in and trying to access auth pages -> redirect to home page
  if (sessionCookie && isAuthRoute) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    // Apply to your auth routes
    "/sign-in", 
    "/sign-up",
  ],
};

than update src/app/(pages)/(auth)/layout.tsx : remove the async, the headers and the redirect logic from there

[icyJoseph]

I haven't taken a full look yet, but suppressHydrationWarning only applies to the DOM node where it is applied. In your case the <html> tag.

[VitorAndrey]

This explicitly wrapping the session check in Suspense resolved the issue.

import { Suspense } from "react";

import { headers } from "next/headers";
import { redirect } from "next/navigation";

import { auth } from "@/app/lib/auth";

export default function AuthLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <Suspense fallback={<AuthLayoutFallback />}>
        <AuthSessionCheck />
      </Suspense>

      <div className="flex h-full w-full items-center justify-center">
        {children}
      </div>
    </>
  );
}

async function AuthSessionCheck() {
  const session = await auth.api.getSession({
    headers: await headers()
  });

  if (session) {
    redirect("/");
  }

  return null;
}

function AuthLayoutFallback() {
  return <div className="flex h-full w-full items-center justify-center" />;
}

[icyJoseph]

Did this have Cache Components on?