fix: expose restartOnError on all sdks (#838)

related: descope/etc#7797

packages/sdks/angular-sdk/README.md

@@ -148,6 +148,14 @@ export class AppComponent {
      - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
      autoFocus="skipFirstScreen"
 
+    validateOnBlur can be true or false. Default is false.
+     - true: Trigger input validation upon blur, in addition to the validation on submit
+     - false: do not trigger input validation upon blur
+
+    restartOnError can be true or false. Default is false.
+     - true: In case of flow version mismatch, will restart the flow if the components version was not changed
+     - false: Will not auto restart the flow in case of a flow version mismatch
+
      errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
      NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
      Example:

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/descope/descope.component.ts

@@ -32,6 +32,8 @@ export class DescopeComponent implements OnInit, OnChanges {
   @Input() telemetryKey: string;
   @Input() redirectUrl: string;
   @Input() autoFocus: true | false | 'skipFirstScreen';
+  @Input() validateOnBlur: boolean;
+  @Input() restartOnError: boolean;
 
   @Input() debug: boolean;
   @Input() errorTransformer: (error: { text: string; type: string }) => string;
@@ -123,6 +125,12 @@ export class DescopeComponent implements OnInit, OnChanges {
     if (this.autoFocus) {
       this.webComponent.setAttribute('auto-focus', this.autoFocus.toString());
     }
+    if (this.validateOnBlur) {
+      this.webComponent.setAttribute('validate-on-blur', this.autoFocus.toString());
+    }
+    if (this.restartOnError) {
+      this.webComponent.setAttribute('restart-on-error', this.autoFocus.toString());
+    }
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.html

@@ -8,6 +8,8 @@
   [telemetryKey]="telemetryKey"
   [redirectUrl]="redirectUrl"
   [autoFocus]="autoFocus"
+  [validateOnBlur]="validateOnBlur"
+  [restartOnError]="restartOnError"
   [debug]="debug"
   [errorTransformer]="errorTransformer"
   [client]="client"

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.ts

@@ -18,7 +18,9 @@ export class SignInFlowComponent {
   @Input() telemetryKey: string;
   @Input() redirectUrl: string;
   @Input() autoFocus: true | false | 'skipFirstScreen';
-
+  @Input() validateOnBlur: boolean;
+  @Input() restartOnError: boolean;
+
   @Input() debug: boolean;
   @Input() errorTransformer: (error: { text: string; type: string }) => string;
   @Input() client: Record<string, any>;

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.html

@@ -8,6 +8,8 @@
   [telemetryKey]="telemetryKey"
   [redirectUrl]="redirectUrl"
   [autoFocus]="autoFocus"
+  [validateOnBlur]="validateOnBlur"
+  [restartOnError]="restartOnError"
   [debug]="debug"
   [errorTransformer]="errorTransformer"
   [client]="client"

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.ts

@@ -18,7 +18,9 @@ export class SignUpFlowComponent {
   @Input() telemetryKey: string;
   @Input() redirectUrl: string;
   @Input() autoFocus: true | false | 'skipFirstScreen';
-
+  @Input() validateOnBlur: boolean;
+  @Input() restartOnError: boolean;
+
   @Input() debug: boolean;
   @Input() errorTransformer: (error: { text: string; type: string }) => string;
   @Input() client: Record<string, any>;

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.html

@@ -8,6 +8,8 @@
   [telemetryKey]="telemetryKey"
   [redirectUrl]="redirectUrl"
   [autoFocus]="autoFocus"
+  [validateOnBlur]="validateOnBlur"
+  [restartOnError]="restartOnError"
   [debug]="debug"
   [errorTransformer]="errorTransformer"
   [client]="client"

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.ts

@@ -18,7 +18,9 @@ export class SignUpOrInFlowComponent {
   @Input() telemetryKey: string;
   @Input() redirectUrl: string;
   @Input() autoFocus: true | false | 'skipFirstScreen';
-
+  @Input() validateOnBlur: boolean;
+  @Input() restartOnError: boolean;
+
   @Input() debug: boolean;
   @Input() errorTransformer: (error: { text: string; type: string }) => string;
   @Input() client: Record<string, any>;

packages/sdks/react-sdk/README.md

@@ -99,7 +99,9 @@ const App = () => {
             // - "skipFirstScreen": automatically focus on the first input of each screen, except first screen
             // autoFocus="skipFirstScreen"
 
-            // validateOnBlur: set it to true will show input validation errors on blur, in addition to on submit
+            // validateOnBlur: set it to true will show input validation errors on blur, in addition to on submit            
+
+            // restartOnError: if set to true, in case of flow version mismatch, will restart the flow if the components version was not changed. Default is false
 
             // errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user.
             // NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.

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

@@ -53,6 +53,7 @@ const DescopeWC = lazy(async () => {
       styleId,
       autoFocus,
       validateOnBlur,
+      restartOnError,
       storeLastAuthenticatedUser,
     }) => (
 	<descope-wc
@@ -71,6 +72,7 @@ const DescopeWC = lazy(async () => {
         redirect-url={redirectUrl}
         auto-focus={autoFocus}
         validate-on-blur={validateOnBlur}
+        restart-on-error={restartOnError}
         store-last-authenticated-user={storeLastAuthenticatedUser}
       />
     ),
@@ -95,6 +97,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       redirectUrl,
       autoFocus,
       validateOnBlur,
+      restartOnError,
       errorTransformer,
       styleId,
     },
@@ -217,6 +220,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
             autoFocus={autoFocus}
             styleId={styleId}
             validateOnBlur={validateOnBlur}
+            restartOnError={restartOnError}
             storeLastAuthenticatedUser={storeLastAuthenticatedUser}
             keepLastAuthenticatedUserAfterLogout={
               keepLastAuthenticatedUserAfterLogout

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

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

packages/sdks/vue-sdk/README.md

@@ -50,6 +50,7 @@ app.mount('#app');
   <!-- redirectUrl="redirectUrl" Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user) -->
   <!-- autoFocus="skipFirstScreen" autoFocus can be true, false or "skipFirstScreen". Default is true. - true: automatically focus on the first input of each screen - false: do not automatically focus on screen's inputs - "skipFirstScreen": automatically focus on the first input of each screen, except first screen -->
   <!-- validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false.  -->
+  <!-- restartOnError if set to true, in case of flow version mismatch, will restart the flow if the components version was not changed. Default is false.  -->
   <!-- errorTransformer="errorTransformer" errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. -->
   <!-- form="{ email: 'test@domain.com' }" form is an object the initial form context that is used in screens inputs in the flow execution. Used to inject predifined input values on flow start such as custom inputs, custom attrbiutes and other inputs. Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.". NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
   <!-- client="{ version: '1.2.3' }" client is an object the initial client context in the flow execution. Keys passed can be accessed in flows actions and conditions prefixed with "client.". NOTE: client is not required. If not provided, context key will be empty. -->

packages/sdks/vue-sdk/src/Descope.vue

@@ -15,6 +15,7 @@
       :auto-focus="autoFocus"
       :style-id="styleId"
       :validate-on-blur="validateOnBlur"
+      :restart-on-error="restartOnError"
       :store-last-authenticated-user="storeLastAuthenticatedUser"
       :errorTransformer.prop="errorTransformer"
       :form.attr="formStr"
@@ -85,6 +86,9 @@ const props = defineProps({
   validateOnBlur: {
     type: Boolean,
   },
+  restartOnError: {
+    type: Boolean,
+  },
   errorTransformer: {
     type: Function,
   },

packages/sdks/web-component/README.md

@@ -78,6 +78,11 @@ 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"**    |
+
 | 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"**   |