@asgardeo/react 0.6.25 → 0.6.27

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

@@ -27,9 +27,13 @@ export interface BaseSignInRenderProps {
      */
     values: Record<string, string>;
     /**
-     * Form errors
+     * Field validation errors
      */
-    errors: Record<string, string>;
+    fieldErrors: Record<string, string>;
+    /**
+     * API error (if any)
+     */
+    error?: Error | null;
     /**
      * Touched fields
      */
@@ -59,7 +63,7 @@ export interface BaseSignInRenderProps {
      */
     validateForm: () => {
         isValid: boolean;
-        errors: Record<string, string>;
+        fieldErrors: Record<string, string>;
     };
     /**
      * Flow title
@@ -97,6 +101,10 @@ export interface BaseSignInProps {
      * Custom CSS class name for error messages.
      */
     errorClassName?: string;
+    /**
+     * Error object to display
+     */
+    error?: Error | null;
     /**
      * Flag to determine if the component is ready to be rendered.
      */

package/dist/components/presentation/auth/SignUp/v2/BaseSignUp.d.ts

@@ -27,9 +27,13 @@ export interface BaseSignUpRenderProps {
      */
     values: Record<string, string>;
     /**
-     * Form errors
+     * Field validation errors
      */
-    errors: Record<string, string>;
+    fieldErrors: Record<string, string>;
+    /**
+     * API error (if any)
+     */
+    error?: Error | null;
     /**
      * Touched fields
      */
@@ -59,7 +63,7 @@ export interface BaseSignUpRenderProps {
      */
     validateForm: () => {
         isValid: boolean;
-        errors: Record<string, string>;
+        fieldErrors: Record<string, string>;
     };
     /**
      * Flow title
@@ -97,6 +101,10 @@ export interface BaseSignUpProps {
      * Custom CSS class name for error messages.
      */
     errorClassName?: string;
+    /**
+     * Error object to display
+     */
+    error?: Error | null;
     /**
      * Custom CSS class name for form inputs.
      */

package/dist/index.js

@@ -6958,9 +6958,6 @@ var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType
 };
 var createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, options = {}) => {
   const key = options.key || component.id;
-  if (authType === "signin") {
-    console.log("Creating sign-in component for:", component);
-  }
   switch (component.type) {
     case EmbeddedFlowComponentType.TextInput:
     case EmbeddedFlowComponentType.PasswordInput:
@@ -6994,9 +6991,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         if (options.onSubmit) {
           const formData = {};
           Object.keys(formValues).forEach((field) => {
-            if (formValues[field]) {
-              formData[field] = formValues[field];
-            }
+            formData[field] = formValues[field];
           });
           options.onSubmit(component, formData, shouldSkipValidation);
         }
@@ -7164,17 +7159,66 @@ var resolveTranslationsInArray = (items, t, properties) => {
 var resolveTranslationsInArray_default = resolveTranslationsInArray;
 
 // src/utils/v2/flowTransformer.ts
+var createInputRefMapping = (response) => {
+  const mapping = /* @__PURE__ */ new Map();
+  if (response?.data?.inputs && Array.isArray(response.data.inputs)) {
+    response.data.inputs.forEach((input) => {
+      if (input.ref && input.identifier) {
+        mapping.set(input.ref, input.identifier);
+      }
+    });
+  }
+  return mapping;
+};
+var createActionRefMapping = (response) => {
+  const mapping = /* @__PURE__ */ new Map();
+  if (response?.data?.actions && Array.isArray(response.data.actions)) {
+    response.data.actions.forEach((action) => {
+      if (action.ref && action.nextNode) {
+        mapping.set(action.ref, action.nextNode);
+      }
+    });
+  }
+  return mapping;
+};
+var applyInputRefMapping = (components, refMapping, actionMapping) => {
+  return components.map((component) => {
+    const transformedComponent = { ...component };
+    if (transformedComponent.ref && refMapping.has(transformedComponent.ref)) {
+      transformedComponent.ref = refMapping.get(transformedComponent.ref);
+    }
+    if (transformedComponent.type === "ACTION" && transformedComponent.id && actionMapping.has(transformedComponent.id)) {
+      transformedComponent.actionRef = actionMapping.get(transformedComponent.id);
+    }
+    if (transformedComponent.components && Array.isArray(transformedComponent.components)) {
+      transformedComponent.components = applyInputRefMapping(
+        transformedComponent.components,
+        refMapping,
+        actionMapping
+      );
+    }
+    return transformedComponent;
+  });
+};
 var transformComponents = (response, t, resolveTranslations = true) => {
   if (!response?.data?.meta?.components) {
     return [];
   }
-  const components = response.data.meta.components;
+  let components = response.data.meta.components;
+  const refMapping = createInputRefMapping(response);
+  const actionMapping = createActionRefMapping(response);
+  if (refMapping.size > 0 || actionMapping.size > 0) {
+    components = applyInputRefMapping(components, refMapping, actionMapping);
+  }
   return resolveTranslations ? resolveTranslationsInArray_default(components, t) : components;
 };
 var extractErrorMessage = (error, t, defaultErrorKey = "errors.flow.generic") => {
   if (error && typeof error === "object" && error.failureReason) {
     return error.failureReason;
   }
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
   return t(defaultErrorKey);
 };
 var checkForErrorResponse = (response, t, defaultErrorKey = "errors.flow.generic") => {
@@ -7270,6 +7314,7 @@ var BaseSignInContent2 = ({
   components = [],
   onSubmit,
   onError,
+  error: externalError,
   className = "",
   inputClassName = "",
   buttonClassName = "",
@@ -7288,10 +7333,12 @@ var BaseSignInContent2 = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
   const [isSubmitting, setIsSubmitting] = useState15(false);
+  const [apiError, setApiError] = useState15(null);
   const isLoading = externalIsLoading || isSubmitting;
   const handleError = useCallback10(
     (error) => {
-      const errorMessage = extractErrorMessage(error, t);
+      const errorMessage = error?.failureReason || extractErrorMessage(error, t);
+      setApiError(error instanceof Error ? error : new Error(errorMessage));
       clearMessages();
       addMessage({
         type: "error",
@@ -7305,7 +7352,7 @@ var BaseSignInContent2 = ({
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === "TEXT_INPUT" || component.type === "PASSWORD_INPUT") {
+          if (component.type === "TEXT_INPUT" || component.type === "PASSWORD_INPUT" || component.type === "EMAIL_INPUT") {
             const identifier = component.ref;
             fields.push({
               name: identifier,
@@ -7315,6 +7362,9 @@ var BaseSignInContent2 = ({
                 if (component.required && (!value || value.trim() === "")) {
                   return t("validations.required.field.error");
                 }
+                if ((component.type === "EMAIL_INPUT" || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                  return t("field.email.invalid");
+                }
                 return null;
               }
             });
@@ -7362,6 +7412,7 @@ var BaseSignInContent2 = ({
       }
     }
     setIsSubmitting(true);
+    setApiError(null);
     clearMessages();
     console.log("Submitting component:", component, "with data:", data);
     try {
@@ -7448,14 +7499,18 @@ var BaseSignInContent2 = ({
   if (children) {
     const renderProps = {
       values: formValues,
-      errors: formErrors,
+      fieldErrors: formErrors,
+      error: apiError,
       touched: touchedFields,
       isValid: isFormValid,
       isLoading,
       components,
       handleInputChange,
       handleSubmit,
-      validateForm,
+      validateForm: () => {
+        const result = validateForm();
+        return { isValid: result.isValid, fieldErrors: result.errors };
+      },
       title: flowTitle || t("signin.heading"),
       subtitle: flowSubtitle || t("signin.subheading"),
       messages: flowMessages || []
@@ -7481,6 +7536,7 @@ var BaseSignInContent2 = ({
       showSubtitle && /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs27(Card_default.Content, { children: [
+      externalError && /* @__PURE__ */ jsx56("div", { className: styles.flowMessagesContainer, children: /* @__PURE__ */ jsx56(Alert_default, { variant: "error", className: cx20(styles.flowMessageItem, messageClasses), children: /* @__PURE__ */ jsx56(Alert_default.Description, { children: externalError.message }) }) }),
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx56("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx56(
         Alert_default,
         {
@@ -7587,7 +7643,6 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     window?.history?.replaceState({}, "", url.toString());
   };
   const handleOAuthError = (error, errorDescription) => {
-    console.warn("[SignIn] OAuth error detected:", error);
     clearFlowState();
     const errorMessage = errorDescription || `OAuth error: ${error}`;
     const err = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
@@ -7673,9 +7728,8 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     } catch (error) {
       const err = error;
       clearFlowState();
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      const displayError = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
-      setError(displayError);
+      const errorMessage = err?.failureReason || (err instanceof Error ? err.message : String(err));
+      setError(new Error(errorMessage));
       initializationAttemptedRef.current = false;
       return;
     }
@@ -7683,10 +7737,6 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
   const handleSubmit = async (payload) => {
     const effectiveFlowId = payload.flowId || currentFlowId;
     if (!effectiveFlowId) {
-      console.error("[SignIn] handleSubmit - ERROR: No flowId available", {
-        payloadFlowId: payload.flowId,
-        currentFlowId
-      });
       throw new Error("No active flow ID");
     }
     try {
@@ -7699,18 +7749,17 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       if (handleRedirection(response)) {
         return;
       }
-      const { flowId, components: components2 } = normalizeFlowResponse(response, t, {
+      const { flowId, components: components2, ...rest } = normalizeFlowResponse(response, t, {
         resolveTranslations: !children
       });
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Error) {
-        console.error("[SignIn] Flow returned Error status, clearing flow state");
         clearFlowState();
         const failureReason = response?.failureReason;
         const errorMessage = failureReason || "Authentication flow failed. Please try again.";
-        const err = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
+        const err = new Error(errorMessage);
         setError(err);
         cleanupFlowUrlParams();
-        return;
+        throw err;
       }
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Complete) {
         const redirectUrl = response?.redirectUrl || response?.redirect_uri;
@@ -7727,8 +7776,6 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
         });
         if (finalRedirectUrl && window?.location) {
           window.location.href = finalRedirectUrl;
-        } else {
-          console.warn("[SignIn] Flow completed but no redirect URL available");
         }
         return;
       }
@@ -7741,16 +7788,14 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     } catch (error) {
       const err = error;
       clearFlowState();
-      const errorMessage = err instanceof Error ? err.message : String(err);
-      const displayError = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
-      setError(displayError);
+      const errorMessage = err?.failureReason || (err instanceof Error ? err.message : String(err));
+      setError(new Error(errorMessage));
       return;
     } finally {
       setIsSubmitting(false);
     }
   };
   const handleError = (error) => {
-    console.error("Authentication error:", error);
     setError(error);
   };
   useEffect13(() => {
@@ -7780,7 +7825,6 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       }
     };
     handleSubmit(submitPayload).catch((error) => {
-      console.error("[SignIn] OAuth callback submission failed:", error);
       cleanupOAuthUrlParams(true);
     });
   }, [isFlowInitialized, currentFlowId, isInitialized, isLoading, isSubmitting, signIn]);
@@ -7802,6 +7846,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       isLoading: isLoading || !isInitialized || !isFlowInitialized,
       onSubmit: handleSubmit,
       onError: handleError,
+      error: flowError,
       className,
       size,
       variant
@@ -9025,6 +9070,7 @@ var BaseSignUpContent2 = ({
   onError,
   onFlowChange,
   onComplete,
+  error: externalError,
   className = "",
   inputClassName = "",
   buttonClassName = "",
@@ -9044,7 +9090,8 @@ var BaseSignUpContent2 = ({
   const styles = BaseSignUp_styles_default(theme, colorScheme);
   const handleError = useCallback12(
     (error) => {
-      const errorMessage = extractErrorMessage(error, t);
+      const errorMessage = error?.failureReason || extractErrorMessage(error, t);
+      setApiError(error instanceof Error ? error : new Error(errorMessage));
       clearMessages();
       addMessage({
         type: "error",
@@ -9056,7 +9103,7 @@ var BaseSignUpContent2 = ({
   const [isLoading, setIsLoading] = useState18(false);
   const [isFlowInitialized, setIsFlowInitialized] = useState18(false);
   const [currentFlow, setCurrentFlow] = useState18(null);
-  const [formData, setFormData] = useState18({});
+  const [apiError, setApiError] = useState18(null);
   const initializationAttemptedRef = useRef6(false);
   const normalizeFlowResponseLocal = useCallback12(
     (response) => {
@@ -9089,21 +9136,19 @@ var BaseSignUpContent2 = ({
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === EmbeddedFlowComponentType4.TextInput) {
+          if (component.type === EmbeddedFlowComponentType4.TextInput || component.type === EmbeddedFlowComponentType4.PasswordInput || component.type === EmbeddedFlowComponentType4.EmailInput) {
+            const fieldName = component.ref || component.id;
             fields.push({
-              name: component.id,
+              name: fieldName,
               required: component.required || false,
               initialValue: "",
               validator: (value) => {
                 if (component.required && (!value || value.trim() === "")) {
                   return t("validations.required.field.error");
                 }
-                if (component.variant === "EMAIL" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                if ((component.type === EmbeddedFlowComponentType4.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                   return t("field.email.invalid");
                 }
-                if (component.type === "PASSWORD_INPUT" && value && value.length < 8) {
-                  return t("field.password.weak");
-                }
                 return null;
               }
             });
@@ -9123,7 +9168,7 @@ var BaseSignUpContent2 = ({
     initialValues: {},
     fields: formFields,
     validateOnBlur: true,
-    validateOnChange: true,
+    validateOnChange: false,
     requiredMessage: t("validations.required.field.error")
   });
   const {
@@ -9155,6 +9200,8 @@ var BaseSignUpContent2 = ({
   );
   const handleInputChange = (name, value) => {
     setFormValue(name, value);
+  };
+  const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
   const handleSubmit = async (component, data, skipValidation) => {
@@ -9169,6 +9216,7 @@ var BaseSignUpContent2 = ({
       }
     }
     setIsLoading(true);
+    setApiError(null);
     clearMessages();
     try {
       const filteredInputs = {};
@@ -9231,7 +9279,7 @@ var BaseSignUpContent2 = ({
               code,
               state
             },
-            actionId: ""
+            action: ""
           };
           try {
             const continueResponse = await onSubmit(payload);
@@ -9291,7 +9339,7 @@ var BaseSignUpContent2 = ({
                     code,
                     state
                   },
-                  actionId: ""
+                  action: ""
                 };
                 try {
                   const continueResponse = await onSubmit(payload);
@@ -9358,6 +9406,7 @@ var BaseSignUpContent2 = ({
       {
         buttonClassName: buttonClasses,
         inputClassName: inputClasses,
+        onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
         size,
         variant
@@ -9373,7 +9422,8 @@ var BaseSignUpContent2 = ({
       variant,
       inputClasses,
       buttonClasses,
-      handleSubmit
+      handleSubmit,
+      handleInputBlur
     ]
   );
   const getUrlParams = () => {
@@ -9393,6 +9443,7 @@ var BaseSignUpContent2 = ({
       initializationAttemptedRef.current = true;
       (async () => {
         setIsLoading(true);
+        setApiError(null);
         clearMessages();
         try {
           const rawResponse = await onInitialize();
@@ -9430,14 +9481,18 @@ var BaseSignUpContent2 = ({
   if (children) {
     const renderProps = {
       values: formValues,
-      errors: formErrors,
+      fieldErrors: formErrors,
+      error: apiError,
       touched: touchedFields,
       isValid: isFormValid,
       isLoading,
       components: currentFlow?.data?.components || [],
       handleInputChange,
       handleSubmit,
-      validateForm,
+      validateForm: () => {
+        const result = validateForm();
+        return { isValid: result.isValid, fieldErrors: result.errors };
+      },
       title: flowTitle || t("signup.heading"),
       subtitle: flowSubtitle || t("signup.subheading"),
       messages: flowMessages || []
@@ -9467,6 +9522,7 @@ var BaseSignUpContent2 = ({
       showSubtitle && /* @__PURE__ */ jsx68(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs29(Card_default.Content, { children: [
+      externalError && /* @__PURE__ */ jsx68("div", { className: styles.flowMessagesContainer, children: /* @__PURE__ */ jsx68(Alert_default, { variant: "error", className: cx22(styles.flowMessageItem, messageClasses), children: /* @__PURE__ */ jsx68(Alert_default.Description, { children: externalError.message }) }) }),
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx68("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx68(
         Alert_default,
         {