thirdPartyAppId from URL & cssVars fix

descope · Nov 25, 2024 · 5daa568 · 5daa568
1 parent f957365
commit 5daa568
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 8 deletions.
diff --git a/packages/sdks/core-js-sdk/src/sdk/types.ts b/packages/sdks/core-js-sdk/src/sdk/types.ts
@@ -326,6 +326,7 @@ export type Options = {
   samlIdpStateId?: string;
   samlIdpUsername?: string;
   ssoAppId?: string;
+  thirdPartyAppId?: string;
   oidcLoginHint?: string;
   abTestingKey?: number;
   startOptionsVersion?: number;

diff --git a/packages/sdks/web-component/src/lib/constants/index.ts b/packages/sdks/web-component/src/lib/constants/index.ts
@@ -22,6 +22,7 @@ export const SAML_IDP_STATE_ID_PARAM_NAME = 'saml_idp_state_id';
 export const SAML_IDP_USERNAME_PARAM_NAME = 'saml_idp_username';
 export const DESCOPE_IDP_INITIATED_PARAM_NAME = 'descope_idp_initiated';
 export const SSO_APP_ID_PARAM_NAME = 'sso_app_id';
+export const THIRD_PARTY_APP_ID_PARAM_NAME = 'third_party_app_id';
 export const OIDC_LOGIN_HINT_PARAM_NAME = 'oidc_login_hint';
 export const OIDC_PROMPT_PARAM_NAME = 'oidc_prompt';
 export const OIDC_ERROR_REDIRECT_URI_PARAM_NAME = 'oidc_error_redirect_uri';

diff --git a/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts
@@ -506,6 +506,7 @@ class BaseDescopeWc extends BaseClass {
       redirectAuthBackupCallbackUri,
       redirectAuthCodeChallenge,
       redirectAuthInitiator,
+      thirdPartyAppId,
       ssoQueryParams,
     } = handleUrlParams();
 
@@ -537,6 +538,7 @@ class BaseDescopeWc extends BaseClass {
       redirectAuthBackupCallbackUri,
       redirectAuthCodeChallenge,
       redirectAuthInitiator,
+      thirdPartyAppId,
       ...ssoQueryParams,
     });
 

diff --git a/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts
@@ -42,6 +42,7 @@ import { getABTestingKey } from '../helpers/abTestingKey';
 import { IsChanged } from '../helpers/state';
 import {
   disableWebauthnButtons,
+  setCssVars,
   setNOTPVariable,
   setPhoneAutoDetectDefaultCode,
 } from '../helpers/templates';
@@ -298,6 +299,7 @@ class DescopeWc extends BaseDescopeWc {
       samlIdpResponseRelayState,
       nativeResponseType,
       nativePayload,
+      thirdPartyAppId,
       ...ssoQueryParams
     } = currentState;
 
@@ -368,6 +370,7 @@ class DescopeWc extends BaseDescopeWc {
           {
             tenant,
             redirectAuth,
+            thirdPartyAppId,
             ...ssoQueryParams,
             client: this.client,
             ...(redirectUrl && { redirectUrl }),
@@ -994,10 +997,8 @@ class DescopeWc extends BaseDescopeWc {
 
     updateTemplateFromScreenState(
       clone,
-      this.rootElement,
       screenState,
       screenState.componentsConfig,
-      screenState.cssVars,
       this.formConfig,
       this.errorTransformer,
       this.loggerWrapper,
@@ -1016,6 +1017,9 @@ class DescopeWc extends BaseDescopeWc {
 
       setNOTPVariable(rootElement, screenState?.notp?.image);
 
+      // set dynamic css variables that should be set at runtime
+      setCssVars(rootElement, screenState.cssVars, this.loggerWrapper);
+
       this.rootElement.replaceChildren(clone);
 
       // If before html url was empty, we deduce its the first time a screen is shown

diff --git a/packages/sdks/web-component/src/lib/helpers/helpers.ts b/packages/sdks/web-component/src/lib/helpers/helpers.ts
@@ -19,6 +19,7 @@ import {
   OVERRIDE_CONTENT_URL,
   OIDC_PROMPT_PARAM_NAME,
   OIDC_ERROR_REDIRECT_URI_PARAM_NAME,
+  THIRD_PARTY_APP_ID_PARAM_NAME,
 } from '../constants';
 import { AutoFocusOptions, Direction, Locale, SSOQueryParams } from '../types';
 
@@ -207,10 +208,18 @@ export function getSSOAppIdParamFromUrl() {
   return getUrlParam(SSO_APP_ID_PARAM_NAME);
 }
 
+export function getThirdPartyAppIdParamFromUrl() {
+  return getUrlParam(THIRD_PARTY_APP_ID_PARAM_NAME);
+}
+
 export function clearSSOAppIdParamFromUrl() {
   resetUrlParam(SSO_APP_ID_PARAM_NAME);
 }
 
+export function clearThirdPartyAppIdParamFromUrl() {
+  resetUrlParam(THIRD_PARTY_APP_ID_PARAM_NAME);
+}
+
 export function getOIDCLoginHintParamFromUrl() {
   return getUrlParam(OIDC_LOGIN_HINT_PARAM_NAME);
 }
@@ -312,6 +321,11 @@ export const handleUrlParams = () => {
     clearSSOAppIdParamFromUrl();
   }
 
+  const thirdPartyAppId = getThirdPartyAppIdParamFromUrl();
+  if (thirdPartyAppId) {
+    clearThirdPartyAppIdParamFromUrl();
+  }
+
   const oidcLoginHint = getOIDCLoginHintParamFromUrl();
   if (oidcLoginHint) {
     clearOIDCLoginHintParamFromUrl();
@@ -339,6 +353,7 @@ export const handleUrlParams = () => {
     redirectAuthCallbackUrl,
     redirectAuthBackupCallbackUri,
     redirectAuthInitiator,
+    thirdPartyAppId,
     ssoQueryParams: {
       oidcIdpStateId,
       samlIdpStateId,

diff --git a/packages/sdks/web-component/src/lib/helpers/templates.ts b/packages/sdks/web-component/src/lib/helpers/templates.ts
@@ -141,8 +141,7 @@ const setFormConfigValues = (
   });
 };
 
-const setCssVars = (
-  nextPageTemplate: DocumentFragment,
+export const setCssVars = (
   rootEle: HTMLElement,
   cssVars: CssVars,
   logger: {
@@ -155,7 +154,7 @@ const setCssVars = (
   }
 
   Object.keys(cssVars).forEach((componentName) => {
-    if (!nextPageTemplate.querySelector(componentName)) {
+    if (!rootEle.querySelector(componentName)) {
       logger.info(
         `Skipping css vars for component "${componentName}}"`,
         `Got css vars for component ${componentName} but Could not find it on next page`,
@@ -252,10 +251,8 @@ const setImageVariable = (
  */
 export const updateTemplateFromScreenState = (
   baseEle: DocumentFragment,
-  rootEle: HTMLElement,
   screenState?: ScreenState,
   componentsConfig?: ComponentsConfig,
-  cssVars?: CssVars,
   flowInputs?: Record<string, string>,
   errorTransformer?: (error: { text: string; type: string }) => string,
   logger?: { error: (message: string, description: string) => void },
@@ -275,7 +272,6 @@ export const updateTemplateFromScreenState = (
   replaceHrefByDataType(baseEle, 'notp-link', screenState?.notp?.redirectUrl);
   replaceElementTemplates(baseEle, screenState);
   setElementConfig(baseEle, componentsConfig, logger);
-  setCssVars(baseEle, rootEle, cssVars, logger);
   replaceTemplateDynamicAttrValues(baseEle, screenState);
   setFormConfigValues(baseEle, flowInputs);
 };

diff --git a/packages/sdks/web-component/src/lib/types.ts b/packages/sdks/web-component/src/lib/types.ts
@@ -83,6 +83,7 @@ export type FlowState = {
   samlIdpResponseSamlResponse: string;
   samlIdpResponseRelayState: string;
   nativeResponseType: string;
+  thirdPartyAppId: string;
   nativePayload: Record<string, any>;
 } & SSOQueryParams;
 

diff --git a/packages/sdks/web-js-sdk/src/sdk/flow.ts b/packages/sdks/web-js-sdk/src/sdk/flow.ts
@@ -11,6 +11,7 @@ type Options = Pick<
   | 'samlIdpStateId'
   | 'samlIdpUsername'
   | 'ssoAppId'
+  | 'thirdPartyAppId'
   | 'oidcLoginHint'
   | 'preview'
   | 'abTestingKey'