feat: Custom screens support RELEASE

package.json

@@ -18,7 +18,7 @@
     "preversion:ci": "sh ./tools/scripts/latestTag.sh",
     "version:ci": "pnpm affected:ci --target version --noVerify=true --parallel 1",
     "postversion:ci": "pnpm run build:ci",
-    "print-affected:ci": "nx print-affected --base=$(sh ./tools/scripts/latestTag.sh) --select=projects",
+    "print-affected:ci": "nx show projects --affected --base=$(sh ./tools/scripts/latestTag.sh) --select=projects",
     "format": "nx format:write",
     "format:ci": "nx format:check",
     "postinstall": "pnpm update @descope/web-components-ui"

packages/libs/sdk-helpers/src/state.ts

@@ -57,11 +57,11 @@ export class State<T extends StateObject> {
 
   #token = 0;
 
-  #updateOnlyOnChange = false;
+  #forceUpdate = true;
 
-  constructor(init: T = {} as T, { updateOnlyOnChange = true } = {}) {
+  constructor(init: T = {} as T, { forceUpdate = false } = {}) {
     this.#state = init;
-    this.#updateOnlyOnChange = updateOnlyOnChange;
+    this.#forceUpdate = forceUpdate;
   }
 
   get current() {
@@ -73,7 +73,7 @@ export 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.#forceUpdate || !compareObjects(this.#state, nextState)) {
       const prevState = this.#state;
       this.#state = nextState;
       Object.freeze(this.#state);

packages/libs/sdk-mixins/src/mixins/configMixin/types.ts

@@ -39,11 +39,13 @@ export type ClientCondition = {
 
 export type ClientConditionResult = {
   screenId: string;
+  screenName: string;
   interactionId: string;
 };
 
 export type FlowConfig = {
   startScreenId?: string;
+  startScreenName?: string;
   version: number;
   targetLocales?: string[];
   conditions?: ClientCondition[];

packages/sdks/angular-sdk/projects/demo-app/src/app/app.component.spec.ts

@@ -24,7 +24,7 @@ describe('AppComponent', () => {
       providers: [
         DescopeAuthConfig,
         { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
-      ],
+      ]
     }).compileComponents();
   });
 

packages/sdks/core-js-sdk/src/createSdk.ts

@@ -24,48 +24,48 @@ const withSdkConfigValidations = withValidations([
 /** Add the ability to pass multiple hooks instead of one when creating an SDK instance */
 const withMultipleHooks =
   <T extends object>(createSdk: (config: SdkConfig) => T) =>
-    (
-      config: Omit<SdkConfig, 'hooks'> & {
-        hooks?: {
-          beforeRequest?: BeforeRequest | BeforeRequest[];
-          afterRequest?: AfterRequest | AfterRequest[];
-          transformResponse?: Hooks['transformResponse'];
-        };
-      },
-    ) => {
-      const beforeRequest: BeforeRequest = (conf) => {
-        // get the before hooks from the config while function is running
-        // because the hooks might change after sdk creation
-        const beforeRequestHooks = [].concat(config.hooks?.beforeRequest || []);
-        return beforeRequestHooks?.reduce((acc, fn) => fn(acc), conf);
-      };
-
-      const afterRequest: AfterRequest = async (req, res) => {
-        // get the after hooks from the config while function is running
-        // because the hooks might change after sdk creation
-        const afterRequestHooks = [].concat(config.hooks?.afterRequest || []);
-        // do not remove this check - on old versions of react-native it is required
-        if (afterRequestHooks.length == 0) return;
-        const results = await Promise.allSettled(
-          afterRequestHooks?.map((fn) => fn(req, res?.clone())),
-        );
-        // eslint-disable-next-line no-console
-        results.forEach(
-          (result) =>
-            result.status === 'rejected' && config.logger?.error(result.reason),
-        );
+  (
+    config: Omit<SdkConfig, 'hooks'> & {
+      hooks?: {
+        beforeRequest?: BeforeRequest | BeforeRequest[];
+        afterRequest?: AfterRequest | AfterRequest[];
+        transformResponse?: Hooks['transformResponse'];
       };
+    },
+  ) => {
+    const beforeRequest: BeforeRequest = (conf) => {
+      // get the before hooks from the config while function is running
+      // because the hooks might change after sdk creation
+      const beforeRequestHooks = [].concat(config.hooks?.beforeRequest || []);
+      return beforeRequestHooks?.reduce((acc, fn) => fn(acc), conf);
+    };
 
-      return createSdk({
-        ...config,
-        hooks: {
-          beforeRequest,
-          afterRequest,
-          transformResponse: config.hooks?.transformResponse,
-        },
-      });
+    const afterRequest: AfterRequest = async (req, res) => {
+      // get the after hooks from the config while function is running
+      // because the hooks might change after sdk creation
+      const afterRequestHooks = [].concat(config.hooks?.afterRequest || []);
+      // do not remove this check - on old versions of react-native it is required
+      if (afterRequestHooks.length == 0) return;
+      const results = await Promise.allSettled(
+        afterRequestHooks?.map((fn) => fn(req, res?.clone())),
+      );
+      // eslint-disable-next-line no-console
+      results.forEach(
+        (result) =>
+          result.status === 'rejected' && config.logger?.error(result.reason),
+      );
     };
 
+    return createSdk({
+      ...config,
+      hooks: {
+        beforeRequest,
+        afterRequest,
+        transformResponse: config.hooks?.transformResponse,
+      },
+    });
+  };
+
 /** Descope SDK client */
 export default withSdkConfigValidations(
   withMultipleHooks(

packages/sdks/nextjs-sdk/package.json

@@ -24,14 +24,14 @@
 		},
 		"./client": {
 			"import": {
-        "types": "./dist/types/client/index.d.ts",
+				"types": "./dist/types/client/index.d.ts",
 				"default": "./dist/esm/client/index.js"
 			},
 			"require": "./dist/cjs/client/index.js"
 		},
 		"./server": {
 			"import": {
-        "types": "./dist/types/server/index.d.ts",
+				"types": "./dist/types/server/index.d.ts",
 				"default": "./dist/esm/server/index.js"
 			},
 			"require": "./dist/cjs/server/index.js"
@@ -129,7 +129,7 @@
 		"rollup-plugin-dotenv": "^0.5.0",
 		"rollup-plugin-dts": "^6.1.1",
 		"rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-no-emit": "1.2.1",
+		"rollup-plugin-no-emit": "1.2.1",
 		"rollup-plugin-preserve-directives": "^0.4.0",
 		"rollup-plugin-serve": "^2.0.3",
 		"rollup-plugin-swc3": "^0.12.0",

packages/sdks/nextjs-sdk/rollup.config.mjs

@@ -26,7 +26,7 @@ const commonPlugins = (outputDir) => [
 	}),
 	typescript({
 		tsconfig: './tsconfig.json',
-		declaration: false,
+		declaration: false
 	}),
 	// swcPreserveDirectives(),
 	preserveDirectives({ supressPreserveModulesWarning: true }),
@@ -89,20 +89,20 @@ const configurations = ['server', 'client', ''].flatMap((entry) => {
 });
 
 export default [
-  ...configurations,
-  {
-    input: 'src/index.ts',
-    output: [{ dir: './dist', format: 'esm' }],
-    plugins: [
-      typescript({
-        tsconfig: './tsconfig.json',
-        compilerOptions: {
-          rootDir: './src',
-          declaration: true,
-          declarationDir: './dist/types',
-        },
-      }),
-      noEmit({ match: (file) => file.endsWith('.js') }),
-    ],
-  },
+	...configurations,
+	{
+		input: 'src/index.ts',
+		output: [{ dir: './dist', format: 'esm' }],
+		plugins: [
+			typescript({
+				tsconfig: './tsconfig.json',
+				compilerOptions: {
+					rootDir: './src',
+					declaration: true,
+					declarationDir: './dist/types'
+				}
+			}),
+			noEmit({ match: (file) => file.endsWith('.js') })
+		]
+	}
 ];

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

@@ -24,7 +24,8 @@ const AccessKeyManagement = React.forwardRef<
 
   useImperativeHandle(ref, () => innerRef);
 
-  const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = React.useContext(Context);
+  const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } =
+    React.useContext(Context);
 
   return (
 	<Suspense fallback={null}>

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

@@ -24,7 +24,8 @@ const ApplicationsPortal = React.forwardRef<
 
   useImperativeHandle(ref, () => innerRef);
 
-  const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = React.useContext(Context);
+  const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } =
+    React.useContext(Context);
 
   return (
 	<Suspense fallback={null}>

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

@@ -22,7 +22,8 @@ const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
 
     useImperativeHandle(ref, () => innerRef);
 
-    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = React.useContext(Context);
+    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } =
+      React.useContext(Context);
 
     return (
 	<Suspense fallback={null}>

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

@@ -42,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} />
       )),
     ),
   };
@@ -69,6 +69,8 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       restartOnError,
       errorTransformer,
       styleId,
+      onScreenUpdate,
+      children,
     },
     ref,
   ) => {
@@ -151,9 +153,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}
@@ -181,10 +183,13 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
               // props
               'errorTransformer.prop': errorTransformer,
               'logger.prop': logger,
+              'onScreenUpdate.prop': onScreenUpdate,
             }}
-          />
-        </Suspense>
-      </form>
+          >
+				{children}
+			</DescopeWC>
+		</Suspense>
+	</form>
     );
   },
 );

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

@@ -22,7 +22,8 @@ const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
 
     useImperativeHandle(ref, () => innerRef);
 
-    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = React.useContext(Context);
+    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } =
+      React.useContext(Context);
 
     return (
 	<Suspense fallback={null}>

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

@@ -22,7 +22,8 @@ const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
 
     useImperativeHandle(ref, () => innerRef);
 
-    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = React.useContext(Context);
+    const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } =
+      React.useContext(Context);
 
     return (
 	<Suspense fallback={null}>

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

@@ -128,6 +128,16 @@ export type DescopeProps = {
   // use to override client context in flow execution
   client?: Record<string, any>;
   styleId?: string;
+  onScreenUpdate?: (
+    screenName: string,
+    state: Record<string, any>,
+    next: (
+      interactionId: string,
+      form: Record<string, any>,
+    ) => Promise<unknown>,
+    ref: HTMLElement,
+  ) => boolean;
+  children?: React.ReactNode;
 };
 
 export type UserManagementProps = WidgetProps;

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

@@ -111,8 +111,13 @@ const emit = defineEmits<{
   (e: 'error', payload: CustomEvent<ErrorResponse>): void;
   (e: 'ready', payload: CustomEvent<Record<string, never>>): void;
 }>();
-const { projectId, baseUrl, baseStaticUrl, storeLastAuthenticatedUser, baseCdnUrl } =
-  useOptions();
+const {
+  projectId,
+  baseUrl,
+  baseStaticUrl,
+  storeLastAuthenticatedUser,
+  baseCdnUrl,
+} = useOptions();
 const sdk = useDescope();
 
 const formStr = computed(() => (props.form ? JSON.stringify(props.form) : ''));

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

@@ -34,5 +34,5 @@ defineProps({
   },
 });
 
-const { projectId, baseUrl, baseStaticUrl, baseCdnUrl} = useOptions();
+const { projectId, baseUrl, baseStaticUrl, baseCdnUrl } = useOptions();
 </script>