fixup! fix(clerk-js): show error message when account is locked

Author: bratsos

packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx

@@ -83,7 +83,6 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
       })
       .catch(err => {
         if (isUserLockedError(err)) {
-          card.setError(err.errors[0]);
           // @ts-expect-error -- private method for the time being
           return clerk.__internal_navigateWithError('..', err.errors[0]);
         }

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -4,7 +4,6 @@ import { FloatingTree, useFloatingParentNodeId } from '@floating-ui/react';
 import React from 'react';
 
 import { useLocalizations } from '../../customizables';
-import { useSafeState } from '../../hooks';
 
 type Status = 'idle' | 'loading' | 'error';
 type Metadata = string | undefined;
@@ -19,11 +18,17 @@ const [CardStateCtx, _useCardState] = createContextAndHook<CardStateCtxValue>('C
 export const CardStateProvider = (props: React.PropsWithChildren<any>) => {
   const { translateError } = useLocalizations();
 
-  const [state, setState] = useSafeState<State>({
+  const [state, setState] = React.useState<State>(() => ({
     status: 'idle',
     metadata: undefined,
     error: translateError(window?.Clerk?.__internal_last_error || undefined),
-  });
+  }));
+
+  const lastError = window?.Clerk?.__internal_last_error;
+  if (lastError) {
+    console.log('CardStateProvider: setting error', lastError);
+    setState(s => ({ ...s, error: translateError(lastError) }));
+  }
 
   const value = React.useMemo(() => ({ value: { state, setState } }), [state, setState]);
   return <CardStateCtx.Provider value={value}>{props.children}</CardStateCtx.Provider>;