Authenticated Wrapper Component Not Updating
My sign up and sign in pages are server components that use the auth() method of clerk to check if user is authenticated. If they are already authenticated, they will be redirected to the dashboard.
If I have two tabs open on the sign in page, log in on one of the tabs, switch back to the other tab, get redirected to dashboard, but see no updated auth state. The dashboard is still rendering the <Unauthenticated/> content.
I would expect the auth state on the client to update after being redirected. Am I misunderstanding how this should be handled?
See video below, thank you!
22 Replies
Bump
Bump
Bump
Yeah auth is jwt based not cookie based. More could be done to sync the jwt immediately to other tabs like Convex Auth does.
That said, the real confusing part here is that the unauth tab does redirect to the dashboard, but remains unauthenticated. If it just stayed on the sign in page it would make more sense, you'd naturally hit refresh and move on. This is happening because you're checking Clerk for redirect auth state and Convex for in-dashboard auth state. You want to use Convex for both.
Ah ok yes, I’m using the clerk auth() server function to check on the server (which will then do the redirect if not authed). How do I check auth state on server with convex? If I did that, and then did the redirect I think the issue remains? Will have to try. If I use the convex auth hook it will be checking on client side (maybe on tab refocus?) and then do the redirect.
With better auth I never had these issues and I think that’s because it’s not a JWT approach like you mentioned
I’d also argue my users are not tech savvy enough to know to refresh to reload auth state, but maybe I’m underestimating them
Hmm actually, yeah, you'd still successfully get a token from Clerk to authenticate with Convex, so the redirect would still occur
First of all - am I crazy for even caring about this edge case?
If a user has two tabs open, one is logged out but other is logged in id expect them to be synced when going from one to the other
So no matter what (session cookie and JWT), I guess the auth state would have to be checked or refetched on tab refocus. I have that in place for my server components, which is why it redirects when going to the tab, but then the client side auth in the provider has no idea anything has changed, so maybe I just move to the client side check and on refocus refresh the user user with clerk - not sure!
Yeah, that would be the right move if you want this scenario to work. I agree it's a reasonable expectation, but in deference to Clerk Convex is only storing the jwt in memory, so there's no cross tab info to share currently
I see. Ok so I guess I should try client side refetch. Otherwise any recommendations on what you would do?
Thanks for the help
Probably what you're doing, honestly. Updating on refocus makes sense.
I havent made any changes yet, but the behavior seems to work in the opposite case?
Client auth state updates across tabs when signing out.
I believe that's the same, no? Authenticated view but missing authenticated data
Both tabs had auth data, I signed out on one, then the other also lost auth data and went back to unauthenticated view
They sync like that because Clerk auth state is based on cookies, so clerk checks will work across browser tabs, but Convex checks against an in-memory jwt will not
I was just pointing out your first and second videos both have the same behavior for the background tab, it ends up on the dashboard view with SignIn / SignOut buttons
I am using the convex provided wrapper components to display authenticated + unauthenticated content, nothing from clerk directly on client side, if that is what you mean
Yeah I get that
When you say the opposite case works, I expect that to mean that when you sign out in one tab, that tab goes to the login screen, and background tabs also go to the login screen. That didn't happen - instead, the background tab stays on the dashboard and doesn't redirect. So it doesn't work in either case.
well the redirect is happening because I have my server components refresh on focus but the dashboard has no redirect logic in it right now just as I am testing.
I can implement the redirect and it would work (like sign in already did in original video), but I was pointing out that the unauthenticated content rendered instead of the authenticated content, that is the part that only works this way
Ahhh, I don't why I didn't understand this, gotcha
Yeah it's showing unauth when it should
Yep
I got rid of the server component redirect (on sign in page using
auth()) and just added a dummy link to the dashboard to see more clearly what I was trying to explainhmm really odd that after hitting Go to dashboard after the failed signin Convex still isn't authenticated
yeah, I would think at that point it would be updated
Only way to get it to update is a hard manual refresh