Better AuthBA
Better Auth•2mo ago
Risatoga

Implement Server-Side Session Hydration with Better Auth

Currently experiencing undefined session state on initial page load when using Better Auth's useSession() hook. The session becomes available only after client-side hydration completes, causing a flash of unauthenticated content.

I am using Better Auth in a Nextjs app (app router).

Is it possible and recommended to hydrate the session on the server before the first render pass to ensure the session returned by authClient.useSession is never undefined during initial page load?


I mean, I would like something like this to avoid skeleton:

'use client';

import { authClient } from '@/shared/auth/client';
import { Skeleton } from '@/shared/components/ui/skeleton';

export function User() {
  const session = authClient.useSession();
  if (!session.data?.user) return <Skeleton className='w-10 h-10' />;
  return <>{session.data?.user.name}</>;
}


I know I can pass the session down from server components, but I was wondering if there is a way to "hydrate" the useSession hook instead.

Thank you
Was this page helpful?