Client Side Session Check

[nathanaelphilip]

Hello!

I’m using NextJS (latest) + Lucia (and it’s been very wonderful so far – it’s really nice to have a bit more control over the flow of things).

The issue I’m running into is that when I log a user in/out, and then push them to a new page (client side), the UI doesn’t reflect the change. I’ve tried revalidating the page revalidatePath('/'), but that doesn’t seem to help.

I used the NextJS Router example in the repo as a guide, but either I’m not understanding how to revalidate/re-render the UI, or I’m missing a key element in making sure things are up to date.

Layout.tsx

Header.tsx

Visual

[pilcrowOnPaper]

Hey, sorry for the late response! I thought about this for a while but this is something I don't have an answer to, mostly due to my lack of experience using Next.js (especially the new app dir). A hard refresh might be the only solution here, unless Next.js has a way to invalidate layout.tsx. Really sorry that I don't have any good answers!

[nathanaelphilip]

No problem :). Is there a way to check the session via a client component?

[pilcrowOnPaper]

Looks like you can reload the entire page with router.refresh(), which should work if you call it after logging in the user (instead of using router.push() to redirect the user to the protected page)

[pilcrowOnPaper]

Also the new examples and guides will use this approach instead of router.push()

[HazimAr]

https://nextjs.org/docs/app/api-reference/functions/revalidatePath

This is exactly what you are looking for.