Fix logged-out UI flashing on account pages - #15233
Open
SilkePilon wants to merge 1 commit into
Open
Conversation
Web auth is cookie based, so the client can't tell synchronously whether you're signed in. `UserService.user` starts as `undefined` and only gets populated once `GET /api/user` comes back, which meant `undefined` stood for both "still fetching" and "logged out". Consumers read it as "logged out" on the first frame. The profile page showed "It looks like you're not logged in" until the fetch resolved, and the header flashed the Log in / Sign up buttons. The rules and reviews pages had it worse: they redirected you to home before the fetch had a chance to finish, so refreshing either page while signed in bounced you out. `UserService` now exposes a `loaded` store that flips once the initial fetch settles, and the pages wait for it before rendering logged-out UI or redirecting. Conditions are ordered so `$user` is read before `$userLoaded`. Svelte only subscribes to a store when the expression reading it actually runs, so short circuiting on `$userLoaded` first would leave `$user` unsubscribed, the fetch never started, and the page stuck loading. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The problem
Load or refresh the profile page while signed in and you get "It looks like you're not logged in" for a moment before the real page appears. Same idea in the header, where the Log in / Sign up buttons flash before your avatar shows up.
Why it happens
Web auth is cookie based, so the client has no way of knowing synchronously whether you're signed in.
UserService.userstarts out asundefinedand only fills in onceGET /api/usercomes back. That meansundefinedcovers two very different states: "still fetching" and "logged out". Everything reading the store treats it as the second one on the first frame.What I found along the way
The rules page and the reviews page have a nastier version of this. Their redirect effect fires while the fetch is still in flight, so refreshing either page while signed in kicks you back to home. The organization invite page shows "Please log in to continue" for the same reason.
The fix
UserServicenow exposes aloadedstore that flips to true once the initial fetch settles, either way. Pages wait for it before rendering logged-out UI or redirecting.One thing worth calling out: the conditions read
$userbefore$userLoadedon purpose. Svelte only subscribes to a store when the expression reading it actually runs, so putting$userLoadedfirst would short circuit, leave$userunsubscribed, and the fetch would never start.Testing
svelte-checkpasses clean on 1791 files, eslint is clean on the touched files, and the existing web unit tests still pass. I haven't been able to confirm it in a live browser since that needs a real signed-in session cookie.Files touched:
apps/web/src/lib/user/userService.tsapps/web/src/routes/(app)/profile/+page.svelteapps/web/src/lib/components/HeaderAuthSection.svelteapps/web/src/routes/(app)/organizations/invite/[slug]/[code]/+page.svelteapps/web/src/routes/(app)/[ownerSlug]/rules/+page.svelteapps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte🤖 Generated with Claude Code