Hey,
I’m building an app with Next.js (frontend) and NestJS (backend). Right now I’m integrating authentication, but it’s more complex than I expected. I understand it’s best practice to use server components as much as possible and only use client components when necessary.

Here’s my issue: authentication logic (e.g., reading/creating a session) only works in server components, but Mantine — my chosen UI library — only provides client components. That means I can’t directly access the session inside those components.

To work around this, I pass server-side data (like the session) into client components via props. But this leads to a lot of prop drilling, and I’m not sure if that’s a good approach — it feels messy and hard to scale. Is there a better way to manage authentication state and session access in this setup?

Example:
I created an AppShellWrapper for the layout and use it in the RootLayout. Since the session is only available server-side, I pass a LoginButton as a prop into the wrapper and render it inside the top-right slot of the layout.

AppShellWrapper

<AppShell ...>
<AppShell.Header>
<Group>
<Burger ... />
<Image src="/logo.png" ... />
<Box ml="auto" />
{topRightSlot}
</Group>
</AppShell.Header>
<Navbar />
<AppShell.Main>{children}</AppShell.Main>
</AppShell>
RootLayout

<AppShellWrapper topRightSlot={<LoginButton />} />

LoginButton (Server Component)
{
const session = await getSession();
return session ? <Avatar /> : <a href="/auth/login">Login</a>;
}