Signing in as a different user still keeping previous user's pages on server
Unanswered
Channel catfish posted this in #help-forum
Channel catfishOP
Hi, I'm using next-auth for my auth, but I'm noticing that if I sign in to a user, say userA, nextjs would render the page with the user's initials, say UA. Then I sign out and then sign in with a different user, say userB, then I would get hydration error showing mismatch with the initials:
server: UA, client: UB. So I'm guessing is that nextjs is still keeping the old pages. Is there a way to purge the previous pages when I sign out?
server: UA, client: UB. So I'm guessing is that nextjs is still keeping the old pages. Is there a way to purge the previous pages when I sign out?
26 Replies
Its because of client cache I believe.
when you logout, can you try using router.logout?
when you logout, can you try using router.logout?
Channel catfishOP
so in addition to next-auth's sign out?
router.refresh*
it can be a quick fix, but there can be better solutions
@Anay-208 it can be a quick fix, but there can be better solutions
Channel catfishOP
would you use it in addition to the sign out or replacing it?
in addition
Channel catfishOP
thanks that works!
@Anay-208 in addition
Channel catfishOP
ok i spoke too soon, it seems to be intermittent now
basically the signout button
onClick event onClick={() => {
// refresh the page to clear the cache
router.refresh();
signOut({ callbackUrl: "/", redirect: true });
}}@Anay-208 Here
Channel catfishOP
it didn't solve the problem afterall. i still dont have a good solution, but i think the problem was related to my tanstack prefetch query tho and removing the prefetches did seem to remove the problem. also what seemed to have set in the query config to dehydrate pending queries
@Channel catfish it didn't solve the problem afterall. i still dont have a good solution, but i think the problem was related to my tanstack prefetch query tho and removing the prefetches did seem to remove the problem. also what seemed to have set in the query config to dehydrate pending queries
There should be a way to revalidate the prefetch
What are you exactly using tanstack prefetch for?
Channel catfishOP
seems like whoever the first user would log in after build would fixed the server page with that user info, and any subsequent user who logged in would get the hydration mismatch error
in this case user profile data
Wait, I didn't see the title properly, it keeps prev user's data on server?
Channel catfishOP
yes
you are using tanstack prefetch to get user data?
what exactly are you using to get the session
Sorry, router.refresh is not a valid solution for this, i didn't notice the title initially
In server, you might be using something else to get session
Channel catfishOP
i'm using next-auth for user session data, but i'm also getting user profile data in a different endpoint
@Channel catfish i'm using next-auth for user session data, but i'm also getting user profile data in a different endpoint
Can you share code of your implementation both in client & server?
I'm seeing people face similar issues with next-auth more, like similar to server & client mismatch error.
I'd also suggest you to use better-auth, but if you don't want to, I can continue helping
I'd also suggest you to use better-auth, but if you don't want to, I can continue helping
Channel catfishOP
i think what ended up working for me was changing my queryClient options as shown in here https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
i also consolidated some queryClient calls, as I think it was making multiple new QueryClient calls. not sure how much that played into it but one or both those seems to no longer getting hydration errors