diff --git a/.changeset/mighty-hands-crash.md b/.changeset/mighty-hands-crash.md new file mode 100644 index 00000000000..0fda332d7d6 --- /dev/null +++ b/.changeset/mighty-hands-crash.md @@ -0,0 +1,5 @@ +--- +'@clerk/tanstack-react-start': patch +--- + +Fix navigation edge case where the new auth state would sometimes be applied before the navigation finished. diff --git a/packages/tanstack-react-start/src/client/useAwaitableNavigate.ts b/packages/tanstack-react-start/src/client/useAwaitableNavigate.ts index 22ed640da43..6a77b993dc3 100644 --- a/packages/tanstack-react-start/src/client/useAwaitableNavigate.ts +++ b/packages/tanstack-react-start/src/client/useAwaitableNavigate.ts @@ -1,8 +1,8 @@ import type { NavigateOptions } from '@tanstack/react-router'; import { useLocation, useNavigate } from '@tanstack/react-router'; -import React, { useTransition } from 'react'; +import React from 'react'; -type Resolve = (value?: unknown) => void; +type Resolve = () => void; export const useAwaitableNavigate = () => { const navigate = useNavigate(); @@ -12,18 +12,21 @@ export const useAwaitableNavigate = () => { resolveFunctionsRef.current.forEach(resolve => resolve()); resolveFunctionsRef.current.splice(0, resolveFunctionsRef.current.length); }; - const [_, startTransition] = useTransition(); React.useEffect(() => { resolveAll(); }, [location]); return (options: NavigateOptions) => { - return new Promise(res => { - startTransition(() => { - resolveFunctionsRef.current.push(res); - res(navigate(options)); - }); + return new Promise(res => { + resolveFunctionsRef.current.push(res); + navigate(options) + .then(() => { + res(); + }) + .catch(() => { + res(); + }); }); }; };