Add validation on change

Signed-off-by: Sajid Mannikeri <sajid.mannikeri@ad.infosys.com>

Author: Sajid Mannikeri

packages/react/src/components/presentation/auth/Recovery/BaseRecovery.tsx

@@ -95,6 +95,13 @@ export interface BaseRecoveryProps {
    * Component-level preferences to override global i18n and theme settings.
    */
   preferences?: Preferences;
+  /**
+   * When a field has been blurred at least once, re-run validation on every subsequent
+   * keystroke so a rendered error clears the moment the value becomes valid. Doesn't
+   * affect fields that have never been blurred — the user isn't shown errors while
+   * initially typing. Default `false` preserves prior behavior.
+   */
+  revalidateOnChangeAfterBlur?: boolean;
   showLogo?: boolean;
   showSubtitle?: boolean;
   showTitle?: boolean;
@@ -125,6 +132,7 @@ const BaseRecoveryContent: FC<BaseRecoveryProps> = ({
   children,
   showTitle = true,
   showSubtitle = true,
+  revalidateOnChangeAfterBlur = false,
 }: BaseRecoveryProps): ReactElement => {
   const {theme, colorScheme} = useTheme();
   const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);
@@ -236,6 +244,7 @@ const BaseRecoveryContent: FC<BaseRecoveryProps> = ({
     fields: formFields,
     initialValues: {},
     requiredMessage: t('validations.required.field.error'),
+    revalidateOnChangeAfterBlur,
     validateOnBlur: true,
     validateOnChange: false,
   });

packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {cx} from '@emotion/css';
+import { cx } from '@emotion/css';
 import {
   withVendorCSSClassPrefix,
   EmbeddedSignInFlowRequest,
@@ -26,7 +26,7 @@ import {
   Preferences,
   buildValidatorFromRules,
 } from '@thunderid/browser';
-import {FC, useEffect, useMemo, useState, useCallback, useContext, ReactElement, ReactNode} from 'react';
+import { FC, useEffect, useMemo, useState, useCallback, useContext, ReactElement, ReactNode } from 'react';
 import useStyles from './BaseSignIn.styles';
 import ComponentRendererContext, {
   ComponentRendererMap,
@@ -36,16 +36,16 @@ import useFlow from '../../../../contexts/Flow/useFlow';
 import ComponentPreferencesContext from '../../../../contexts/I18n/ComponentPreferencesContext';
 import useTheme from '../../../../contexts/Theme/useTheme';
 import useThunderID from '../../../../contexts/ThunderID/useThunderID';
-import {FormField, useForm} from '../../../../hooks/useForm';
+import { FormField, useForm } from '../../../../hooks/useForm';
 import useTranslation from '../../../../hooks/useTranslation';
 import composeAffixedInputs from '../../../../utils/composeAffixedInputs';
-import {extractErrorMessage} from '../../../../utils/flowTransformer';
+import { extractErrorMessage } from '../../../../utils/flowTransformer';
 import AlertPrimitive from '../../../primitives/Alert/Alert';
 // eslint-disable-next-line import/no-named-as-default
-import CardPrimitive, {CardProps} from '../../../primitives/Card/Card';
+import CardPrimitive, { CardProps } from '../../../primitives/Card/Card';
 import Spinner from '../../../primitives/Spinner/Spinner';
 import Typography from '../../../primitives/Typography/Typography';
-import {renderSignInComponents} from '../AuthOptionFactory';
+import { renderSignInComponents } from '../AuthOptionFactory';
 
 /**
  * Render props for custom UI rendering
@@ -94,7 +94,7 @@ export interface BaseSignInRenderProps {
   /**
    * Flow messages
    */
-  messages: {message: string; type: string}[];
+  messages: { message: string; type: string }[];
 
   /**
    * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
@@ -119,7 +119,7 @@ export interface BaseSignInRenderProps {
   /**
    * Function to validate the form
    */
-  validateForm: () => {fieldErrors: Record<string, string>; isValid: boolean};
+  validateForm: () => { fieldErrors: Record<string, string>; isValid: boolean };
 
   /**
    * Form values
@@ -226,6 +226,14 @@ export interface BaseSignInProps {
    */
   serverFieldErrors?: FieldError[] | null;
 
+  /**
+   * When a field has been blurred at least once, re-run validation on every subsequent
+   * keystroke so a rendered error clears the moment the value becomes valid. Doesn't
+   * affect fields that have never been blurred — the user isn't shown errors while
+   * initially typing. Default `false` preserves prior behavior.
+   */
+  revalidateOnChangeAfterBlur?: boolean;
+
   /**
    * Size variant for the component.
    */
@@ -257,19 +265,34 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   additionalData = {},
   isTimeoutDisabled = false,
   serverFieldErrors = null,
+  revalidateOnChangeAfterBlur = false,
 }: BaseSignInProps): ReactElement => {
-  const {meta, vendor} = useThunderID();
-  const {theme} = useTheme();
+  const { meta, vendor } = useThunderID();
+  const { theme } = useTheme();
   const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);
-  const {t} = useTranslation();
-  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();
+  const { t } = useTranslation();
+  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow();
   const styles: any = useStyles(theme, theme.vars.colors.text.primary);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [apiError, setApiError] = useState<Error | null>(null);
 
   const isLoading: boolean = externalIsLoading || isSubmitting;
 
+  /**
+   * Component type for which forms validation will be applicable
+   */
+  const acceptableType = [
+    'TEXT_INPUT',
+    'PASSWORD_INPUT',
+    'EMAIL_INPUT',
+    'PHONE_INPUT',
+    'OTP_INPUT',
+    'SELECT',
+    'DATE_INPUT',
+    'CUSTOM',
+  ];
+
   /**
    * Handle error responses and extract meaningful error messages
    * Uses the transformer's extractErrorMessage function for consistency
@@ -300,15 +323,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
       const processComponents = (comps: EmbeddedFlowComponent[]): any => {
         comps.forEach((component: any) => {
-          if (
-            component.type === 'TEXT_INPUT' ||
-            component.type === 'PASSWORD_INPUT' ||
-            component.type === 'EMAIL_INPUT' ||
-            component.type === 'PHONE_INPUT' ||
-            component.type === 'OTP_INPUT' ||
-            component.type === 'SELECT' ||
-            component.type === 'DATE_INPUT'
-          ) {
+          if (acceptableType.includes(component.type)) {
             const identifier: string = component.ref;
             const ruleValidator = buildValidatorFromRules(component.validation);
             fields.push({
@@ -360,6 +375,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     fields: formFields,
     initialValues: {},
     requiredMessage: t('validations.required.field.error'),
+    revalidateOnChangeAfterBlur,
     validateOnBlur: true,
     validateOnChange: false,
   });
@@ -460,7 +476,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       // For V2, we always send inputs and action
       payload = {
         ...payload,
-        ...(component.id && {action: component.id}),
+        ...(component.id && { action: component.id }),
         inputs: filteredInputs,
       };
 
@@ -573,7 +589,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       touched: touchedFields,
       validateForm: () => {
         const result: any = validateForm();
-        return {fieldErrors: result.errors, isValid: result.isValid};
+        return { fieldErrors: result.errors, isValid: result.isValid };
       },
       values: formValues,
     };
@@ -595,7 +611,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         variant={variant}
       >
         <CardPrimitive.Content>
-          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
+          <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
             <Spinner />
           </div>
         </CardPrimitive.Content>
@@ -703,7 +719,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
  * </BaseSignIn>
  * ```
  */
-const BaseSignIn: FC<BaseSignInProps> = ({preferences, ...rest}: BaseSignInProps): ReactElement => {
+const BaseSignIn: FC<BaseSignInProps> = ({ preferences, ...rest }: BaseSignInProps): ReactElement => {
   const content: ReactElement = (
     <FlowProvider>
       <BaseSignInContent {...rest} />

packages/react/src/components/presentation/auth/SignIn/SignIn.tsx

@@ -134,6 +134,14 @@ export interface SignInProps {
    */
   preferences?: Preferences;
 
+  /**
+   * When a field has been blurred at least once, re-run validation on every subsequent
+   * keystroke so a rendered error clears the moment the value becomes valid. Doesn't
+   * affect fields that have never been blurred — the user isn't shown errors while
+   * initially typing. Default `false` preserves prior behavior.
+   */
+  revalidateOnChangeAfterBlur?: boolean;
+
   /**
    * Size variant for the component.
    */
@@ -226,6 +234,7 @@ const SignIn: FC<SignInProps> = ({
   onError,
   variant,
   children,
+  revalidateOnChangeAfterBlur,
 }: SignInProps): ReactElement => {
   const {applicationId, afterSignInUrl, signIn, isInitialized, isLoading, meta, getStorageManager, scopes, vendor} =
     useThunderID();
@@ -435,19 +444,25 @@ const SignIn: FC<SignInProps> = ({
   };
 
   /**
-   * Handle terminal flow responses (Error and Complete) shared by initializeFlow and handleSubmit.
-   * Throws on an Error status so the caller's catch block can propagate it to BaseSignIn.
-   * Returns true when a Complete status was handled (caller should return), false otherwise.
+   * Handle ERROR and COMPLETE responses. Returns true if fully handled.
+   * ERROR + executionId: recoverable — session preserved for retry.
+   * ERROR + no executionId: terminal — clear state and surface the error.
    */
   const handleTerminalResponse = async (response: EmbeddedSignInFlowResponse): Promise<boolean> => {
-    // Handle Error flow status - flow has failed and is invalidated
     if (response.flowStatus === EmbeddedSignInFlowStatus.Error) {
+      if (response.executionId) {
+        // Recoverable: session still alive. Show inline error without firing onError.
+        setExecutionId(response.executionId);
+        await setChallengeToken(response.challengeToken ?? null);
+        setIsFlowInitialized(true);
+        setFlowError(new Error(extractErrorMessage(response, t)));
+        return true;
+      }
+      // Terminal: backend invalidated the session — clear all state.
       await clearFlowState();
-      const err: any = new Error(extractErrorMessage(response, t));
-      setError(err);
+      setError(new Error(extractErrorMessage(response, t)));
       cleanupFlowUrlParams();
-      // Throw the error so it's caught by the catch block and propagated to BaseSignIn
-      throw err;
+      return true;
     }
 
     if (response.flowStatus === EmbeddedSignInFlowStatus.Complete) {
@@ -588,6 +603,8 @@ const SignIn: FC<SignInProps> = ({
       // session lets the backend return COMPLETE immediately with no UI components. Without
       // this the UI would fall through with no components and spin forever.
       if (await handleTerminalResponse(response)) {
+        // Reset the init gate so a terminal error doesn't leave the user stuck without retry.
+        initializationAttemptedRef.current = false;
         return;
       }
 
@@ -814,6 +831,11 @@ const SignIn: FC<SignInProps> = ({
         return;
       }
 
+      // Handle terminal flow statuses before normalization.
+      if (await handleTerminalResponse(response)) {
+        return;
+      }
+
       const {
         executionId: normalizedExecutionId,
         components: normalizedComponents,
@@ -827,11 +849,6 @@ const SignIn: FC<SignInProps> = ({
         meta,
       );
 
-      // Handle terminal flow statuses (Error throws, Complete redirects and returns true).
-      if (await handleTerminalResponse(response)) {
-        return;
-      }
-
       // Always update challenge token on any INCOMPLETE response — token rotates every step.
       await setChallengeToken(response.challengeToken ?? null);
 
@@ -1004,6 +1021,7 @@ const SignIn: FC<SignInProps> = ({
       size={size}
       variant={variant}
       preferences={preferences}
+      revalidateOnChangeAfterBlur={revalidateOnChangeAfterBlur}
       serverFieldErrors={serverFieldErrors}
     />
   );

packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx

@@ -228,6 +228,14 @@ export interface BaseSignUpProps {
    */
   preferences?: Preferences;
 
+  /**
+   * When a field has been blurred at least once, re-run validation on every subsequent
+   * keystroke so a rendered error clears the moment the value becomes valid. Doesn't
+   * affect fields that have never been blurred — the user isn't shown errors while
+   * initially typing. Default `false` preserves prior behavior.
+   */
+  revalidateOnChangeAfterBlur?: boolean;
+
   /**
    *  Whether to redirect after sign-up.
    */
@@ -282,6 +290,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   children,
   showTitle = true,
   showSubtitle = true,
+  revalidateOnChangeAfterBlur = false,
 }: BaseSignUpProps): ReactElement => {
   const {theme, colorScheme} = useTheme();
   const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);
@@ -471,6 +480,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     fields: formFields,
     initialValues: {},
     requiredMessage: t('validations.required.field.error'),
+    revalidateOnChangeAfterBlur,
     validateOnBlur: true,
     validateOnChange: false,
   });