@asgardeo/react 0.6.26 → 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

@@ -7216,6 +7216,9 @@ 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") => {
@@ -7311,6 +7314,7 @@ var BaseSignInContent2 = ({
   components = [],
   onSubmit,
   onError,
+  error: externalError,
   className = "",
   inputClassName = "",
   buttonClassName = "",
@@ -7329,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",
@@ -7346,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,
@@ -7356,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;
               }
             });
@@ -7403,6 +7412,7 @@ var BaseSignInContent2 = ({
       }
     }
     setIsSubmitting(true);
+    setApiError(null);
     clearMessages();
     console.log("Submitting component:", component, "with data:", data);
     try {
@@ -7489,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 || []
@@ -7522,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,
         {
@@ -7628,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");
@@ -7714,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;
     }
@@ -7724,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 {
@@ -7740,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;
@@ -7768,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;
       }
@@ -7782,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(() => {
@@ -7821,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]);
@@ -7843,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
@@ -9066,6 +9070,7 @@ var BaseSignUpContent2 = ({
   onError,
   onFlowChange,
   onComplete,
+  error: externalError,
   className = "",
   inputClassName = "",
   buttonClassName = "",
@@ -9085,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",
@@ -9097,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) => {
@@ -9130,7 +9136,7 @@ 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: fieldName,
@@ -9140,12 +9146,9 @@ var BaseSignUpContent2 = ({
                 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;
               }
             });
@@ -9165,7 +9168,7 @@ var BaseSignUpContent2 = ({
     initialValues: {},
     fields: formFields,
     validateOnBlur: true,
-    validateOnChange: true,
+    validateOnChange: false,
     requiredMessage: t("validations.required.field.error")
   });
   const {
@@ -9197,6 +9200,8 @@ var BaseSignUpContent2 = ({
   );
   const handleInputChange = (name, value) => {
     setFormValue(name, value);
+  };
+  const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
   const handleSubmit = async (component, data, skipValidation) => {
@@ -9211,6 +9216,7 @@ var BaseSignUpContent2 = ({
       }
     }
     setIsLoading(true);
+    setApiError(null);
     clearMessages();
     try {
       const filteredInputs = {};
@@ -9224,7 +9230,7 @@ var BaseSignUpContent2 = ({
       const payload = {
         ...currentFlow.flowId && { flowId: currentFlow.flowId },
         flowType: currentFlow.flowType || "REGISTRATION",
-        ...component.id && { actionId: component.id },
+        ...component.id && { action: component.id },
         inputs: filteredInputs
       };
       const rawResponse = await onSubmit(payload);
@@ -9273,7 +9279,7 @@ var BaseSignUpContent2 = ({
               code,
               state
             },
-            actionId: ""
+            action: ""
           };
           try {
             const continueResponse = await onSubmit(payload);
@@ -9333,7 +9339,7 @@ var BaseSignUpContent2 = ({
                     code,
                     state
                   },
-                  actionId: ""
+                  action: ""
                 };
                 try {
                   const continueResponse = await onSubmit(payload);
@@ -9400,6 +9406,7 @@ var BaseSignUpContent2 = ({
       {
         buttonClassName: buttonClasses,
         inputClassName: inputClasses,
+        onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
         size,
         variant
@@ -9415,7 +9422,8 @@ var BaseSignUpContent2 = ({
       variant,
       inputClasses,
       buttonClasses,
-      handleSubmit
+      handleSubmit,
+      handleInputBlur
     ]
   );
   const getUrlParams = () => {
@@ -9435,6 +9443,7 @@ var BaseSignUpContent2 = ({
       initializationAttemptedRef.current = true;
       (async () => {
         setIsLoading(true);
+        setApiError(null);
         clearMessages();
         try {
           const rawResponse = await onInitialize();
@@ -9472,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 || []
@@ -9509,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,
         {