Merge branch 'main' into react-19

descope · Dec 22, 2024 · 98f272e · 98f272e
2 parents 91b1262 + c4182b3
commit 98f272e
Show file tree

Hide file tree

Showing 20 changed files with 334 additions and 201 deletions.
diff --git a/...ges/sdks/angular-sdk/projects/angular-sdk/src/lib/components/descope/descope.component.ts b/...ges/sdks/angular-sdk/projects/angular-sdk/src/lib/components/descope/descope.component.ts
@@ -63,7 +63,9 @@ export class DescopeComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     const sdk = this.authService.descopeSdk; // Capture the class context in a variable
-    DescopeWc.sdkConfigOverrides = {
+    const WebComponent: any = customElements?.get('descope-wc') || DescopeWc;
+
+    WebComponent.sdkConfigOverrides = {
       // Overrides the web-component's base headers to indicate usage via the React SDK
       baseHeaders,
       // Disables token persistence within the web-component to delegate token management
@@ -126,10 +128,16 @@ export class DescopeComponent implements OnInit, OnChanges {
       this.webComponent.setAttribute('auto-focus', this.autoFocus.toString());
     }
     if (this.validateOnBlur) {
-      this.webComponent.setAttribute('validate-on-blur', this.autoFocus.toString());
+      this.webComponent.setAttribute(
+        'validate-on-blur',
+        this.autoFocus.toString()
+      );
     }
     if (this.restartOnError) {
-      this.webComponent.setAttribute('restart-on-error', this.autoFocus.toString());
+      this.webComponent.setAttribute(
+        'restart-on-error',
+        this.autoFocus.toString()
+      );
     }
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());

diff --git a/packages/sdks/react-sdk/src/components/AccessKeyManagement.tsx b/packages/sdks/react-sdk/src/components/AccessKeyManagement.tsx
@@ -10,7 +10,7 @@ const AccessKeyManagementWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-access-key-management-widget ref={ref} {...props} />
+        <descope-access-key-management-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -27,8 +27,8 @@ const AccessKeyManagement = React.forwardRef<
   const { projectId, baseUrl, baseStaticUrl } = React.useContext(Context);
 
   return (
-	<Suspense fallback={null}>
-		<AccessKeyManagementWC
+    <Suspense fallback={null}>
+      <AccessKeyManagementWC
         projectId={projectId}
         widgetId={widgetId}
         baseUrl={baseUrl}
@@ -44,7 +44,7 @@ const AccessKeyManagement = React.forwardRef<
           'logger.prop': logger,
         }}
       />
-	</Suspense>
+    </Suspense>
   );
 });
 

diff --git a/packages/sdks/react-sdk/src/components/ApplicationsPortal.tsx b/packages/sdks/react-sdk/src/components/ApplicationsPortal.tsx
@@ -10,7 +10,7 @@ const ApplicationsPortalWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-applications-portal-widget ref={ref} {...props} />
+        <descope-applications-portal-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -27,8 +27,8 @@ const ApplicationsPortal = React.forwardRef<
   const { projectId, baseUrl, baseStaticUrl } = React.useContext(Context);
 
   return (
-	<Suspense fallback={null}>
-		<ApplicationsPortalWC
+    <Suspense fallback={null}>
+      <ApplicationsPortalWC
         projectId={projectId}
         widgetId={widgetId}
         baseUrl={baseUrl}
@@ -43,7 +43,7 @@ const ApplicationsPortal = React.forwardRef<
           'logger.prop': logger,
         }}
       />
-	</Suspense>
+    </Suspense>
   );
 });
 

diff --git a/packages/sdks/react-sdk/src/components/AuditManagement.tsx b/packages/sdks/react-sdk/src/components/AuditManagement.tsx
@@ -10,7 +10,7 @@ const AuditManagementWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	      <descope-audit-management-widget ref={ref} {...props} />
+        <descope-audit-management-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -25,8 +25,8 @@ const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
     const { projectId, baseUrl, baseStaticUrl } = React.useContext(Context);
 
     return (
-	<Suspense fallback={null}>
-		<AuditManagementWC
+      <Suspense fallback={null}>
+        <AuditManagementWC
           projectId={projectId}
           widgetId={widgetId}
           baseUrl={baseUrl}
@@ -42,7 +42,7 @@ const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
             'logger.prop': logger,
           }}
         />
-	</Suspense>
+      </Suspense>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/components/Descope.tsx b/packages/sdks/react-sdk/src/components/Descope.tsx
@@ -14,8 +14,11 @@ import withPropsMapping from './withPropsMapping';
 
 // web-component code uses browser API, but can be used in SSR apps, hence the lazy loading
 const DescopeWC = lazy(async () => {
-  const module = await import('@descope/web-component');
-  module.default.sdkConfigOverrides = {
+  const WebComponent: any =
+    customElements?.get('descope-wc') ||
+    (await import('@descope/web-component').then((module) => module.default));
+
+  WebComponent.sdkConfigOverrides = {
     // Overrides the web-component's base headers to indicate usage via the React SDK
     baseHeaders,
     // Disables token persistence within the web-component to delegate token management
@@ -39,7 +42,7 @@ const DescopeWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-wc ref={ref} {...props} />
+        <descope-wc ref={ref} {...props} />
       )),
     ),
   };
@@ -147,9 +150,9 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
        * it can be removed once this issue will be solved
        * https://bugs.chromium.org/p/chromium/issues/detail?id=1404106#c2
        */
-	<form>
-		<Suspense fallback={null}>
-			<DescopeWC
+      <form>
+        <Suspense fallback={null}>
+          <DescopeWC
             projectId={projectId}
             flowId={flowId}
             baseUrl={baseUrl}
@@ -178,8 +181,8 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
               'logger.prop': logger,
             }}
           />
-		</Suspense>
-	</form>
+        </Suspense>
+      </form>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/components/RoleManagement.tsx b/packages/sdks/react-sdk/src/components/RoleManagement.tsx
@@ -10,7 +10,7 @@ const RoleManagementWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-role-management-widget ref={ref} {...props} />
+        <descope-role-management-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -25,8 +25,8 @@ const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
     const { projectId, baseUrl, baseStaticUrl } = React.useContext(Context);
 
     return (
-	<Suspense fallback={null}>
-		<RoleManagementWC
+      <Suspense fallback={null}>
+        <RoleManagementWC
           projectId={projectId}
           widgetId={widgetId}
           baseUrl={baseUrl}
@@ -42,7 +42,7 @@ const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
             'logger.prop': logger,
           }}
         />
-	</Suspense>
+      </Suspense>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/components/UserManagement.tsx b/packages/sdks/react-sdk/src/components/UserManagement.tsx
@@ -10,7 +10,7 @@ const UserManagementWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-user-management-widget ref={ref} {...props} />
+        <descope-user-management-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -25,8 +25,8 @@ const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
     const { projectId, baseUrl, baseStaticUrl } = React.useContext(Context);
 
     return (
-	<Suspense fallback={null}>
-		<UserManagementWC
+      <Suspense fallback={null}>
+        <UserManagementWC
           projectId={projectId}
           widgetId={widgetId}
           baseUrl={baseUrl}
@@ -42,7 +42,7 @@ const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
             'logger.prop': logger,
           }}
         />
-	</Suspense>
+      </Suspense>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/components/UserProfile.tsx b/packages/sdks/react-sdk/src/components/UserProfile.tsx
@@ -16,7 +16,7 @@ const UserProfileWC = lazy(async () => {
   return {
     default: withPropsMapping(
       React.forwardRef<HTMLElement>((props, ref) => (
-	<descope-user-profile-widget ref={ref} {...props} />
+        <descope-user-profile-widget ref={ref} {...props} />
       )),
     ),
   };
@@ -39,8 +39,8 @@ const UserProfile = React.forwardRef<HTMLElement, UserProfileProps>(
     }, [innerRef, onLogout]);
 
     return (
-	<Suspense fallback={null}>
-		<UserProfileWC
+      <Suspense fallback={null}>
+        <UserProfileWC
           projectId={projectId}
           widgetId={widgetId}
           baseUrl={baseUrl}
@@ -56,7 +56,7 @@ const UserProfile = React.forwardRef<HTMLElement, UserProfileProps>(
             'logger.prop': logger,
           }}
         />
-	</Suspense>
+      </Suspense>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/components/withPropsMapping/index.tsx b/packages/sdks/react-sdk/src/components/withPropsMapping/index.tsx
@@ -24,17 +24,21 @@ const withPropsMapping = <P extends Record<string, any>>(
   Component: ComponentType<any>,
 ) =>
   React.forwardRef<HTMLElement, P>((props, ref) => {
-    const { prop, attr, rest } = useMemo(() => Object.entries(props).reduce(
-        (acc, [key, value]) => {
-          const { trimmedKey, category } = transformKey(key);
-          if (category === 'prop') acc.prop.push([trimmedKey, value]);
-          else if (category === 'attr')
-            acc.attr.push([kebabCase(trimmedKey), transformAttrValue(value)]);
-          else Object.assign(acc.rest, { [kebabCase(trimmedKey)]: value });
-          return acc;
-        },
-        { attr: [], prop: [], rest: {} },
-      ), [props]);
+    const { prop, attr, rest } = useMemo(
+      () =>
+        Object.entries(props).reduce(
+          (acc, [key, value]) => {
+            const { trimmedKey, category } = transformKey(key);
+            if (category === 'prop') acc.prop.push([trimmedKey, value]);
+            else if (category === 'attr')
+              acc.attr.push([kebabCase(trimmedKey), transformAttrValue(value)]);
+            else Object.assign(acc.rest, { [kebabCase(trimmedKey)]: value });
+            return acc;
+          },
+          { attr: [], prop: [], rest: {} },
+        ),
+      [props],
+    );
 
     const currRef = useRef<HTMLElement | null>(null);
 

diff --git a/packages/sdks/react-sdk/src/components/withPropsMapping/utils.ts b/packages/sdks/react-sdk/src/components/withPropsMapping/utils.ts
@@ -1,4 +1,3 @@
-
 export const transformKey = (key: string) => {
   // eslint-disable-next-line no-sparse-arrays
   const [, trimmedKey, category] = /(.*)\.(prop|attr)$/.exec(key) || [
@@ -10,6 +9,4 @@ export const transformKey = (key: string) => {
 };
 
 export const transformAttrValue = (value: any) =>
-  typeof value === 'string' || value == null
-    ? value
-    : JSON.stringify(value);
+  typeof value === 'string' || value == null ? value : JSON.stringify(value);
diff --git a/packages/sdks/vue-sdk/src/Descope.vue b/packages/sdks/vue-sdk/src/Descope.vue
@@ -36,7 +36,9 @@ import { computed } from 'vue';
 import { getGlobalSdk } from './sdk';
 import type { JWTResponse, ErrorResponse } from './types';
 
-DescopeWcClass.sdkConfigOverrides = {
+const WebComponent: any = customElements?.get('descope-wc') || DescopeWcClass;
+
+WebComponent.sdkConfigOverrides = {
   // Overrides the web-component's base headers to indicate usage via the React SDK
   baseHeaders,
   // Disables token persistence within the web-component to delegate token management

diff --git a/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts
@@ -229,7 +229,7 @@ class BaseDescopeWc extends BaseClass {
   }
 
   #syncStateIdFromUrl() {
-    const { stepId, executionId } = getRunIdsFromUrl();
+    const { stepId, executionId } = getRunIdsFromUrl(this.flowId);
     this.#flowState.update({ stepId, executionId });
   }
 
@@ -517,7 +517,7 @@ class BaseDescopeWc extends BaseClass {
       redirectAuthCodeChallenge,
       redirectAuthInitiator,
       ssoQueryParams,
-    } = handleUrlParams();
+    } = handleUrlParams(this.flowId, this.loggerWrapper);
 
     // we want to update the state when user clicks on back in the browser
     window.addEventListener('popstate', this.#eventsCbRefs.popstate);

diff --git a/packages/sdks/web-component/src/lib/helpers/helpers.ts b/packages/sdks/web-component/src/lib/helpers/helpers.ts
@@ -57,6 +57,11 @@ function resetUrlParam(paramName: string) {
   }
 }
 
+const getFlowIdFromExecId = (executionId: string) => {
+  const regex = /(.*)\|#\|.*/;
+  return regex.exec(executionId)?.[1] || '';
+};
+
 export async function fetchContent<T extends 'text' | 'json'>(
   url: string,
   returnType: T,
@@ -109,10 +114,17 @@ export function getAnimationDirection(
   return undefined;
 }
 
-export const getRunIdsFromUrl = () => {
-  const [executionId = '', stepId = ''] = (getFlowUrlParam() || '').split('_');
+export const getRunIdsFromUrl = (flowId: string) => {
+  let [executionId = '', stepId = ''] = (getFlowUrlParam() || '').split('_');
+  const executionFlowId = getFlowIdFromExecId(executionId);
+
+  // if the flow id does not match, this execution id is not for this flow
+  if (!flowId || (executionFlowId && executionFlowId !== flowId)) {
+    executionId = '';
+    stepId = '';
+  }
 
-  return { executionId, stepId };
+  return { executionId, stepId, executionFlowId };
 };
 
 export const setRunIdsOnUrl = (executionId: string, stepId: string) => {
@@ -284,8 +296,21 @@ export const getElementDescopeAttributes = (ele: HTMLElement) =>
 export const getFlowConfig = (config: Record<string, any>, flowId: string) =>
   config?.flows?.[flowId] || {};
 
-export const handleUrlParams = () => {
-  const { executionId, stepId } = getRunIdsFromUrl();
+export const handleUrlParams = (
+  flowId: string,
+  logger: { debug: (...data: any[]) => void },
+) => {
+  const { executionId, stepId, executionFlowId } = getRunIdsFromUrl(flowId);
+
+  // if the flow id does not match, we do not want to read & remove any query params
+  // because it's probably belongs to another flow
+  if (executionFlowId && flowId !== executionFlowId) {
+    logger.debug(
+      'Flow id does not match the execution flow id, skipping url params handling',
+    );
+    return { ssoQueryParams: {} };
+  }
+
   if (executionId || stepId) {
     clearRunIdsFromUrl();
   }

diff --git a/packages/sdks/web-component/src/lib/mixins/formMountMixin.ts b/packages/sdks/web-component/src/lib/mixins/formMountMixin.ts
@@ -26,7 +26,7 @@ export const formMountMixin = createSingletonMixin(
         if (this.#shouldMountInFormEle()) {
           this.#handleOuterForm();
         }
-        super['connectedCallback']?.();
+        super.connectedCallback?.();
       }
     },
 );