feat: SSR useAuth to remove hydration flicker [FaaFyfxR9WAQrL7FcAgEHJvztd8cVMxvjHRS55rw1nwH] - #522
Closed
waterWang wants to merge 1 commit into
Closed
feat: SSR useAuth to remove hydration flicker [FaaFyfxR9WAQrL7FcAgEHJvztd8cVMxvjHRS55rw1nwH]#522waterWang wants to merge 1 commit into
waterWang wants to merge 1 commit into
Conversation
Problem: useAuth initial state was unknown until localStorage was read post-mount, causing SSR-rendered pages to briefly show 'Connect wallet to view' before the correct state appeared. Changes: - Add lib/get-auth-status.server.ts — server-only function that reads the auth-token cookie via Next.js cookies() API - Add setAuthCookie() / clearAuthCookie() to lib/api.ts — syncs the auth token to a non-HttpOnly cookie alongside localStorage - Update WalletProvider to accept initialHasToken prop, seeding the initial render with the server-detected token state - Update RootLayout to read the cookie and pass initialHasToken First paint now shows the correct connection state immediately. Closes BountyOnChain#400
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
2 participants
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.
Summary
Implements Issue #400 — server-side rendering
useAuthto remove the hydration flicker where SSR-rendered pages briefly show "Connect wallet to view" before the correct auth state is restored from localStorage.Problem
useAuthinitial state was unknown untillocalStoragewas read post-mount. SSR-rendered pages showed the wrong state on first paint, then flickered to the correct state after hydration.Changes
lib/get-auth-status.server.ts(new) — server-only function that reads theauth-tokencookie via Next.jscookies()API. Can only be imported from Server Components.lib/api.ts— addedsetAuthCookie()andclearAuthCookie()that sync the auth token to a non-HttpOnly cookie alongsidelocalStorage. The cookie is set/cleared whenever the token is stored or removed.components/WalletContext.tsx— addedinitialHasTokenprop toWalletProvider. The newhasTokenfield is exposed throughuseWallet()and is seeded from the server cookie so the first paint shows the correct state.app/layout.tsx— reads the cookie viagetAuthStatusFromCookie()and passesinitialHasTokentoWalletProvider.Acceptance Criteria
Closes #400