fix(client): remove useNavigate from AuthKitProvider to avoid SSR warning#59
fix(client): remove useNavigate from AuthKitProvider to avoid SSR warning#59nicknisi wants to merge 1 commit into
Conversation
nicknisi
left a comment
There was a problem hiding this comment.
Reviewer note (info): @tanstack/react-router remains in peerDependencies even though the client bundle no longer imports it. This is correct -- server files in src/server/ still use redirect from @tanstack/react-router. No action needed.
Greptile SummaryRemoves the unconditional
Confidence Score: 5/5Safe to merge — the change is minimal, correctly targeted, and backed by a dedicated regression test. The removal of No files require special attention. Important Files Changed
|
…ning AuthKitProvider is rendered as a Wrap component before RouterProvider context exists. Calling useNavigate() unconditionally during render triggered "useRouter must be used inside a <RouterProvider>" warnings. The navigate function was only used as a fallback in handleSignOut when no sign-out URL was returned. Replace it with window.location.href, which is appropriate for post-sign-out redirects (full page reload is desirable after session termination). Fixes #57
Summary
AuthKitProvidercalleduseNavigate()unconditionally at the top of the component body. During SSR with TanStack Start, theWrapcomponent renders beforeRouterProvidercontext is established, causing repeateduseRouter must be used inside a <RouterProvider>console warnings.This PR removes
useNavigateentirely fromAuthKitProvider. ThehandleSignOutfallback navigation now useswindow.location.hrefassignment instead of TanStack Router'snavigate(), which is safe since sign-out is always a user-triggered client-side action.Changes
src/client/AuthKitProvider.tsx: RemoveduseNavigateimport and hook call. Replacednavigate({ to: returnTo })withwindow.location.href = returnToin thehandleSignOutfallback path.src/client/AuthKitProvider.spec.tsx: Removed global@tanstack/react-routermock. Added regression test that rendersAuthKitProviderwithoutRouterProvidercontext (would throw ifuseNavigate()were still called unconditionally). Updated sign-out tests to verifywindow.location.hrefassignment.Closes #57
What was tested
Automated (176 tests pass):
AuthKitProvider.spec.tsxtests pass, including the new regression test"renders without router context (no useNavigate SSR warning)"pnpm buildsucceeds with no type errorsuseNavigatereferences remain in source or builtdist/client/output@tanstack/react-routerimports indist/client/outputManual (Playwright E2E):
localhost:3000useRouter must be used inside a <RouterProvider>warning observedManual reproduction steps
To reproduce the bug on
main:mainand runpnpm install && pnpm buildcd example && pnpm devhttp://localhost:3000in a browser with DevTools console openuseRouter must be used inside a <RouterProvider>warnings in the console during SSR/hydrationTo verify the fix on this branch:
fix/issue-57and runpnpm install && pnpm buildcd example && pnpm devhttp://localhost:3000in a browser with DevTools console openuseRouterwarnings in the consoleVerification
Follow-ups
@tanstack/react-routerremains inpeerDependencieseven though the client bundle no longer imports it. This is correct since server files (src/server/) still useredirectfrom that package. No action needed.