Correct way to access session data, using server & client components
Typically in our old SSR apps, we'd wrap
1. Pass the servers session details down as props as deep as we need to client components (as we cannot use
2. Revert back to wrapping our highest client component with
<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?6 Replies
Both are valid
I would assume useSession is somewhat cached? So if you have called getServerSession it should have hydrated the cache entirely sure I use lucia and not next auth
I'm not really sure if
getServerSession
would have any impact on useSession
(which AFAIK uses client side checks), I didn't really think they were linked?
I did used to get some annoying flashing when using useSession
a while back - which is nice to have gone when I use the server component approach (due to useSession
having some weird bugs where it would return some odd states during it's loading lifecycle)
Will have to look into Lucia when I get a minute 🙂Yeah it’s a farfetched hope 😂
Doubt it’s happening on second thoughts
Sounds like you know what you want though, server session
Yeah I do, just can predict it becoming a pain in my ass down the line, but it's definitely nicer! I guess I will update as my current application grows haha 🙂
How comes you're using Lucia curiously? Next auth has been pretty amazing for me, so I can only imagine Lucia must have some really cool features
More fine grained control
You don't export some config and it does magic
You make a route and then you use lucia in said route to do things, validate the request, get the session etc.
Hi, if anyone has best practices tips as well, I’d love to know. I have made a PR 2 months ago on my repo to use session drilling from server components
https://github.com/dBianchii/kodix-turbo/commit/9a1ba42c5bd5f5f8dcdaafe80e3fe15487a9662c
Been using just this since. (No session providers)
GitHub
Fix NextAuthProvider import in Layout component (#40) · dBianchii/k...
* FixAuth5
* Move components to src/_components
* add session to server components
* Update component import paths, fix session needed to be provided to components