fix(clerk-js): Show error message when account is locked (#6336)

Author: bratsos

.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.

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<CardStateCtxValue>('C
 
 export const CardStateProvider = (props: React.PropsWithChildren<any>) => {
   const { translateError } = useLocalizations();
+  const router = useRouter();
 
-  const [state, setState] = useSafeState<State>({
+  const [state, setState] = React.useState<State>(() => ({
     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 <CardStateCtx.Provider value={value}>{props.children}</CardStateCtx.Provider>;