feat: Remove server level error on keyboard interaction

packages/sdks/react-sdk/src/components/Descope.tsx

@@ -66,6 +66,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       redirectUrl,
       autoFocus,
       validateOnBlur,
+      autoClearError,
       restartOnError,
       errorTransformer,
       styleId,
@@ -163,6 +164,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
             autoFocus={autoFocus}
             styleId={styleId}
             validateOnBlur={validateOnBlur}
+            auto-clear-error={autoClearError}
             restartOnError={restartOnError}
             keepLastAuthenticatedUserAfterLogout={
               keepLastAuthenticatedUserAfterLogout

packages/sdks/react-sdk/src/types.ts

@@ -117,6 +117,7 @@ export type DescopeProps = {
   locale?: string;
   autoFocus?: AutoFocusOptions;
   validateOnBlur?: boolean;
+  autoClearError?: boolean;
   restartOnError?: boolean;
   debug?: boolean;
   telemetryKey?: string;

packages/sdks/web-component/README.md

@@ -78,15 +78,13 @@ NOTE: This package is a part of a monorepo. so if you make changes in a dependen
 | debug                                     | **"true"** - Enable debugger</br>**"false"** - Disable debugger                                                                                                                                                                            | **"false"**   |
 | preview                                   | **"true"** - Run flow in a preview mode</br>**"false"** - Do run flow in a preview mode                                                                                                                                                    | **"false"**   |
 | auto-focus                                | **"true"** - Automatically focus on the first input of each screen</br>**"false"** - Do not automatically focus on screen's inputs</br>**"skipFirstScreen"** - Automatically focus on the first input of each screen, except first screen  | **"true"**    |
-
-| validate-on-blur                                | **"true"** - Triggers the input validation upon blur in addition to the validation on submit</br>**"false"** - Do not triggers validation upon blur</br>  | **"false"**    |
-
-| restart-on-error                                | **"true"** - In case of flow version mismatch, will restart the flow if the components version was not changed</br>**"false"** - Do not restart the flow automatically</br>  | **"false"**    |
-
+| validate-on-blur                          | **"true"** - Triggers the input validation upon blur in addition to the validation on submit</br>**"false"** - Do not triggers validation upon blur</br>                                                                                   | **"false"**   |
+| auto-clear-error                          | **"true"** - Clears form's error message on interaction</br>**"false"** - Does not clear form error message</br>                                                                                                                           | **"false"**   |
+| restart-on-error                          | **"true"** - In case of flow version mismatch, will restart the flow if the components version was not changed</br>**"false"** - Do not restart the flow automatically</br>                                                                | **"false"**   |
 | storage-prefix                            | **String** - A prefix to add to the key of the local storage when persisting tokens                                                                                                                                                        | **""**        |
 | store-last-authenticated-user             | **"true"** - Stores last-authenticated user details in local storage when flow is completed</br>**"false"** - Do not store last-auth user details. Disabling this flag may cause last-authenticated user features to not function properly | **"true"**    |
 | keep-last-authenticated-user-after-logout | **"true"** - Do not clear the last authenticated user details from the browser storage after logout</br>**"false"** - Clear the last authenticated user details from the browser storage after logout                                      | **"false"**   |
-| style-id                                  | **"String"** - Set a specific style to load rather then the default style                                                                                                                                                             | **""**        |
+| style-id                                  | **"String"** - Set a specific style to load rather then the default style                                                                                                                                                                  | **""**        |
 
 ## Optional Properties
 

packages/sdks/web-component/src/app/index.html

@@ -45,6 +45,7 @@
         locale="<locale>"
         debug="true"
         validate-on-blur="false"
+        auto-clear-error="false"
         keep-last-authenticated-user-after-logout="true"
       ></descope-wc>
       <div class="loading">Loading ...</div>

packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts

@@ -66,6 +66,7 @@ class BaseDescopeWc extends BaseClass {
       'store-last-authenticated-user',
       'keep-last-authenticated-user-after-logout',
       'validate-on-blur',
+      'auto-clear-error',
       'style-id',
     ];
   }
@@ -181,6 +182,10 @@ class BaseDescopeWc extends BaseClass {
     return this.getAttribute('validate-on-blur') === 'true';
   }
 
+  get autoClearError() {
+    return this.getAttribute('auto-clear-error') === 'true';
+  }
+
   get storeLastAuthenticatedUser() {
     const res = this.getAttribute('store-last-authenticated-user') ?? 'true';
     return res === 'true';
@@ -226,6 +231,7 @@ class BaseDescopeWc extends BaseClass {
       'form',
       'client',
       'validate-on-blur',
+      'auto-clear-error',
       'style-id',
     ];
 

packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts

@@ -858,6 +858,7 @@ class DescopeWc extends BaseDescopeWc {
       samlIdpResponseRelayState: samlIdpResponse?.relayState,
       nativeResponseType: nativeResponse?.type,
       nativePayload: nativeResponse?.payload,
+      forceUpdate: this.autoClearError && errorText,
     });
   };
 
@@ -1033,6 +1034,10 @@ class DescopeWc extends BaseDescopeWc {
 
         // we need to wait for all components to render before we can set its value
         updateScreenFromScreenState(this.rootElement, screenState);
+
+        if (this.autoClearError && screenState.errorText) {
+          this.#handleErrorMessageClearing();
+        }
       });
 
       this.#hydrate(next);
@@ -1286,6 +1291,23 @@ class DescopeWc extends BaseDescopeWc {
   #dispatch(eventName: string, detail: any) {
     this.dispatchEvent(new CustomEvent(eventName, { detail }));
   }
+
+  #handleErrorMessageClearing() {
+    const errorMsgs = this.shadowRoot.querySelectorAll(
+      '[data-type="error-message"]',
+    );
+
+    if (errorMsgs.length) {
+      const onErrorMsgClear = () => {
+        Array.from(errorMsgs).forEach((errorMsg) => {
+          // eslint-disable-next-line no-param-reassign
+          errorMsg.innerHTML = '';
+          this.removeEventListener('keydown', onErrorMsgClear);
+        });
+      };
+      this.addEventListener('keydown', onErrorMsgClear);
+    }
+  }
 }
 
 export default DescopeWc;

packages/sdks/web-component/src/lib/helpers/state.ts

@@ -69,7 +69,11 @@ class State<T extends StateObject> {
       typeof newState === 'function' ? newState(this.#state) : newState;
 
     const nextState = { ...this.#state, ...internalNewState };
-    if (!this.#updateOnlyOnChange || !compareObjects(this.#state, nextState)) {
+    if (
+      !this.#updateOnlyOnChange ||
+      !compareObjects(this.#state, nextState) ||
+      nextState.forceUpdate
+    ) {
       const prevState = this.#state;
       this.#state = nextState;
       Object.freeze(this.#state);

packages/sdks/web-component/src/lib/types.ts

@@ -87,6 +87,7 @@ export type FlowState = {
   samlIdpResponseRelayState: string;
   nativeResponseType: string;
   nativePayload: Record<string, any>;
+  forceUpdate?: string;
 } & SSOQueryParams;
 
 export type StepState = {