Layout and user information
Unanswered
Chinese Egret posted this in #help-forum
Chinese EgretOP
Hello everyone, I use Next.js v15.3.1 and have an async Layout like the one in the image. The
If I log in with user A, then log out, and log in with user B, the nav bar still shows the information of user A, but if I refresh the page, it correctly displays the information of user B.
It's not an authentication issue because the JWT is correctly generated and saved in the cookies. I've also tried invoking
Why is this happening and how can I fix it? Thanks
getAdmin() method retrieves basic user information (such as first name, last name, email) from the database and passes this information to the AuthShell component (client component), which displays it in a nav bar.If I log in with user A, then log out, and log in with user B, the nav bar still shows the information of user A, but if I refresh the page, it correctly displays the information of user B.
It's not an authentication issue because the JWT is correctly generated and saved in the cookies. I've also tried invoking
revalidatePath("/", "layout") in the route handler that handles the login, but the problem persists.Why is this happening and how can I fix it? Thanks
14 Replies
Asian black bear
Layouts don't rerender if you stay within their corresponding route segment.
This is also one of the reasons you shouldn't even do any auth checks in layouts and instead do it in pages which will rerun on navigation.
Here's an example of how you make yourself vulnerable if you don't take that into consideration: https://github.com/eric-burel/securing-rsc-layout-leak
Chinese EgretOP
@Asian black bear thanks for the clarification.
I have the following project structure:
When the user does the login and navigates from
I am not doing any auth check, because I have middleware that. The
I have the following project structure:
/(auth)/layout.tsx (the one in the image)
/(auth)/page.tsx
/(no-auth)/layout.tsx (different from the image)
/(no-auth)/login/page.tsxWhen the user does the login and navigates from
/login to /, do I stay within the (auth)/layout.tsx ?I am not doing any auth check, because I have middleware that. The
getAdmin() method only retrieves basic data to be displayed in the nav.Asian black bear
The remark about the auth check is to point out that you shouldn't rely on any dynamic data in the layouts. They are, after all, just meant to be for layouts anyways.
Judging by your shared structure a navigation from
/login to / should switch route groups and technically even fully rerender the entire app since you're swapping between root layouts in their entirety.Chinese EgretOP
Ok, but the issue persists. Moreover it happens only in production, and not in dev mode.
in dev mode, data are displayed correctly.
Asian black bear
Here's something purely for debugging purposes: add a
key prop to the AuthShell and give it a unique value depending on the user, the user ID would be the best. I am curious if this makes it so that you don't see stale data anymore.Chinese EgretOP
I will prepare a new prod release and let you know. Thanks
Asian black bear
I'd be surprised if that fixes the stale data given that a full route navigation between separate root layouts should rerender everything. Either way, it'd be best if you can follow this up with a minimal reproducible example.
Chinese EgretOP
A public repo on GitHub could be ok?
Asian black bear
Yeah, just remove everything that is unnecessary and just keep two separate pages/root layouts using the same route group setup with the code you use to redirect between the two to investigate why the state persists.
Chinese EgretOP
Ok, do you have idea why in dev mode it does not happen?