7 replies

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}</>;
}

'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

Better Auth•3mo ago•

7 replies

Risatoga

Implement Server-Side Session Hydration with Better Auth

'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}</>;
}

'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

Implement Server-Side Session Hydration with Better Auth

Similar Threads

Implement Server-Side Session Hydration with Better Auth

Similar Threads

Similar Threads

Similar Threads