Describe the bug
AuthKitProvider calls useNavigate() unconditionally at the top of the component
body. During SSR with TanStack Start, the Wrap component in the router config
renders before the RouterProvider context is fully established. This causes a
repeated console warning:
Warning: useRouter must be used inside a <RouterProvider> component!
The warning fires on every render cycle during SSR/hydration and produces
significant console noise. It does not cause a runtime error because navigate is
only actually invoked inside the handleSignOut callback, but the hook itself
runs during render regardless.
The relevant code in dist/client/AuthKitProvider.js:
export function AuthKitProvider({ children, onSessionExpired, initialAuth }) {
const navigate = useNavigate(); // <-- called unconditionally at render time
// ...
const handleSignOut = useCallback(async ({ returnTo = '/' } = {}) => {
const result = await getSignOutUrl({ data: { returnTo } });
if (result.url) {
window.location.href = result.url;
} else {
navigate({ to: returnTo }); // <-- only actual usage
}
}, [navigate]);To Reproduce
- Set up a TanStack Start app using the Convex + TanStack Start + WorkOS
template.
- Place AuthKitProvider inside the router's Wrap option (as the template does).
- Run the dev server and open the app.
- Observe repeated useRouter must be used inside a warnings in
the console.
Expected behavior
No warnings. useNavigate should only be called when navigation is actually
needed (inside handleSignOut), not unconditionally at render time.
Desktop:
- OS: macOS
- Browser: Chrome
- authkit-tanstack-react-start version: 0.5.0
- TanStack Start version: 1.166.4
- TanStack Router version: 1.166.4
Additional context
The warning is cosmetic — the app functions correctly. The navigate function is
never called during SSR since it's inside a user-triggered signOut callback. But
the warning is confusing and pollutes the console, especially for new users
following the official template.
Describe the bug
AuthKitProvider calls useNavigate() unconditionally at the top of the component
body. During SSR with TanStack Start, the Wrap component in the router config
renders before the RouterProvider context is fully established. This causes a
repeated console warning:
Warning: useRouter must be used inside a <RouterProvider> component!The warning fires on every render cycle during SSR/hydration and produces
significant console noise. It does not cause a runtime error because navigate is
only actually invoked inside the handleSignOut callback, but the hook itself
runs during render regardless.
The relevant code in dist/client/AuthKitProvider.js:
To Reproduce
template.
the console.
Expected behavior
No warnings. useNavigate should only be called when navigation is actually
needed (inside handleSignOut), not unconditionally at render time.
Desktop:
Additional context
The warning is cosmetic — the app functions correctly. The navigate function is
never called during SSR since it's inside a user-triggered signOut callback. But
the warning is confusing and pollutes the console, especially for new users
following the official template.