diff --git a/.changeset/soft-garlics-wonder.md b/.changeset/soft-garlics-wonder.md new file mode 100644 index 00000000000..1e0a62e04de --- /dev/null +++ b/.changeset/soft-garlics-wonder.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Adds missing error message when an account is locked in hash routing mode. diff --git a/packages/clerk-js/src/ui/elements/contexts/index.tsx b/packages/clerk-js/src/ui/elements/contexts/index.tsx index c91fb670ff1..7204a7a14d2 100644 --- a/packages/clerk-js/src/ui/elements/contexts/index.tsx +++ b/packages/clerk-js/src/ui/elements/contexts/index.tsx @@ -3,8 +3,9 @@ import type { ClerkAPIError, ClerkRuntimeError } from '@clerk/types'; import { FloatingTree, useFloatingParentNodeId } from '@floating-ui/react'; import React from 'react'; +import { useRouter } from '@/ui/router'; + import { useLocalizations } from '../../customizables'; -import { useSafeState } from '../../hooks'; type Status = 'idle' | 'loading' | 'error'; type Metadata = string | undefined; @@ -18,12 +19,21 @@ const [CardStateCtx, _useCardState] = createContextAndHook('C export const CardStateProvider = (props: React.PropsWithChildren) => { const { translateError } = useLocalizations(); + const router = useRouter(); - const [state, setState] = useSafeState({ + const [state, setState] = React.useState(() => ({ status: 'idle', metadata: undefined, error: translateError(window?.Clerk?.__internal_last_error || undefined), - }); + })); + + React.useEffect(() => { + const error = window?.Clerk?.__internal_last_error; + + if (error) { + setState(s => ({ ...s, error: translateError(error) })); + } + }, [translateError, setState, router.currentPath]); const value = React.useMemo(() => ({ value: { state, setState } }), [state, setState]); return {props.children};