Theo's Typesafe CultTTC
Theo's Typesafe Cult2y ago
14 replies
Yoers

Correct way to access session data, using server & client components

Typically in our old SSR apps, we'd wrap <SessionProvider session={session}> around our <App /> component, and use the hook useSession() to access the session object at any depth easily, without prop drilling.

With server components there's a helper const session = await getServerAuthSession();, which can only be used in server components to retrieve session information server side.

My question is this, if we need to access session data in a deeply nested client component, are the only options now;

1. Pass the servers session details down as props as deep as we need to client components (as we cannot use const session = await getServerAuthSession(); once we reach client components)

2. Revert back to wrapping our highest client component with <SessionProvider session={session}>, using useSession() to access the session object at any depth easily, without prop drilling.

Is there a more pragmatic way on the server side I am missing?
Was this page helpful?