Merge pull request #376 from brionmario/refactor-thunder-flows

Fix some design related issues for AsgardeoV2 (Thunder)

Author: brionmario

.changeset/witty-forks-feel.md

@@ -0,0 +1,6 @@
+---
+'@asgardeo/javascript': patch
+'@asgardeo/react': patch
+---
+
+Fix some issues related to design in AsgardeoV2

package.json

@@ -76,6 +76,11 @@
       "@wso2/eslint-plugin>@typescript-eslint/parser": "6.21.0",
       "@wso2/eslint-plugin>@typescript-eslint/type-utils": "6.21.0",
       "@wso2/eslint-plugin>@typescript-eslint/utils": "6.21.0"
+    },
+    "auditConfig": {
+      "ignoreCves": [
+        "CVE-2026-26996"
+      ]
     }
   },
   "publishConfig": {

packages/javascript/src/__legacy__/client.ts

@@ -32,6 +32,7 @@ import {Storage, TemporaryStore} from '../models/store';
 import {TokenResponse, IdToken, TokenExchangeRequestConfig} from '../models/token';
 import {User} from '../models/user';
 import StorageManager from '../StorageManager';
+import deepMerge from '../utils/deepMerge';
 import extractPkceStorageKeyFromState from '../utils/extractPkceStorageKeyFromState';
 import generatePkceStorageKey from '../utils/generatePkceStorageKey';
 import getAuthorizeRequestUrlParams from '../utils/getAuthorizeRequestUrlParams';
@@ -1138,7 +1139,10 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async reInitialize(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    await this.storageManager.setConfigData(config);
+    const currentConfig: AuthClientConfig<T> = this.storageManager.getConfigData() as unknown as AuthClientConfig<T>;
+    const newConfig: AuthClientConfig<T> = deepMerge(currentConfig, config);
+
+    await this.storageManager.setConfigData(newConfig);
     await this.loadOpenIDProviderConfiguration(true);
   }
 

packages/javascript/src/index.ts

@@ -161,6 +161,8 @@ export {Storage, TemporaryStore} from './models/store';
 export {User, UserProfile} from './models/user';
 export {SessionData} from './models/session';
 export {Organization} from './models/organization';
+export {TranslationFn} from './models/v2/translation';
+export {ResolveVarsOptions} from './models/v2/vars';
 export {
   BrandingPreference,
   BrandingPreferenceConfig,
@@ -204,6 +206,8 @@ export {default as get} from './utils/get';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
 export {default as resolveFieldType} from './utils/resolveFieldType';
 export {default as resolveFieldName} from './utils/resolveFieldName';
+export {default as resolveMeta} from './utils/v2/resolveMeta';
+export {default as resolveVars} from './utils/v2/resolveVars';
 export {default as processOpenIDScopes} from './utils/processOpenIDScopes';
 export {default as withVendorCSSClassPrefix} from './utils/withVendorCSSClassPrefix';
 export {default as transformBrandingPreferenceToTheme} from './utils/transformBrandingPreferenceToTheme';

packages/javascript/src/models/v2/embedded-flow-v2.ts

@@ -50,6 +50,12 @@ export enum EmbeddedFlowComponentType {
   /** Email input field with validation for email addresses. */
   EmailInput = 'EMAIL_INPUT',
 
+  /** Icon display component for rendering named vector icons */
+  Icon = 'ICON',
+
+  /** Image display component for logos and illustrations */
+  Image = 'IMAGE',
+
   /** One-time password input field for multi-factor authentication */
   OtpInput = 'OTP_INPUT',
 
@@ -59,9 +65,15 @@ export enum EmbeddedFlowComponentType {
   /** Phone number input field with country code support */
   PhoneInput = 'PHONE_INPUT',
 
+  /** Rich text display component that renders formatted HTML content */
+  RichText = 'RICH_TEXT',
+
   /** Select/dropdown input component for single choice selection */
   Select = 'SELECT',
 
+  /** Stack layout component for arranging children in a row or column */
+  Stack = 'STACK',
+
   /** Text display component for labels, headings, and messages */
   Text = 'TEXT',
 
@@ -199,27 +211,78 @@ export enum EmbeddedFlowEventType {
  */
 export interface EmbeddedFlowComponent {
   /**
-   * Nested child components for container components like Block.
+   * Alignment of children along the cross axis (for Stack components).
+   */
+  align?: string;
+
+  /**
+   * Alternative text for Image components.
+   */
+  alt?: string;
+
+  /**
+   * Icon color, CSS color value (for Icon components).
+   */
+  color?: string;
+
+  /**
+   * Nested child components for container components like Block and Stack.
    */
   components?: EmbeddedFlowComponent[];
 
+  /**
+   * Layout direction for Stack components ('row' | 'column').
+   */
+  direction?: string;
+
+  /**
+   * Icon to render at the end of an Action button (URL string).
+   */
+  endIcon?: string;
+
   /**
    * Event type for action components that defines the interaction behavior.
    * Only relevant for Action components.
    */
   eventType?: EmbeddedFlowEventType | string;
 
+  /**
+   * Gap between children in Stack components (number, maps to spacing units).
+   */
+  gap?: number;
+
+  /**
+   * Height of the component (for Image components, can be string with units or number for pixels).
+   * The value depends on the component type (e.g., for Image components).
+   */
+  height?: string | number;
+
   /**
    * Unique identifier for the component
    */
   id: string;
 
+  /**
+   * Number of items across the main axis (for Stack grid-like layouts).
+   */
+  items?: string | number;
+
+  /**
+   * Justification of children along the main axis (for Stack components).
+   */
+  justify?: string;
+
   /**
    * Display label for the component (e.g., field label, button text).
    * Supports internationalization and may contain template strings.
    */
   label?: string;
 
+  /**
+   * Icon name for Icon components (e.g., lucide-react icon names like 'ArrowLeftRight').
+   */
+  name?: string;
+
   /**
    * Options for SELECT components.
    * Each option can be a string value or an object with value and label.
@@ -243,6 +306,21 @@ export interface EmbeddedFlowComponent {
    */
   required?: boolean;
 
+  /**
+   * Icon size in pixels (for Icon components).
+   */
+  size?: number;
+
+  /**
+   * Image source URL (for Image components).
+   */
+  src?: string;
+
+  /**
+   * Icon to render at the start of an Action button (URL string).
+   */
+  startIcon?: string;
+
   /**
    * Component type that determines rendering behavior
    */
@@ -253,6 +331,12 @@ export interface EmbeddedFlowComponent {
    * The value depends on the component type (e.g., button variants, text variants).
    */
   variant?: EmbeddedFlowActionVariant | EmbeddedFlowTextVariant | string;
+
+  /**
+   * Width of the component (for Image components, can be string with units or number for pixels).
+   * The value depends on the component type (e.g., for Image components).
+   */
+  width?: string | number;
 }
 
 /**

packages/javascript/src/models/v2/flow-meta-v2.ts

@@ -165,7 +165,7 @@ export interface FlowMetaThemeColors {
  */
 export interface FlowMetaThemeColorScheme {
   /** All colors defined for this color scheme (light or dark) */
-  colors: FlowMetaThemeColors;
+  palette: FlowMetaThemeColors;
 }
 
 /**

packages/javascript/src/models/v2/translation.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Generic translation function type.
+ *
+ * The default parameter type (`Record<string, string | number>`) matches the
+ * common i18n signature used throughout the SDK. Consumers can supply a more
+ * specific type when integrating with third-party i18n libraries.
+ *
+ * @template TParams - The type of the optional interpolation parameters object.
+ *
+ * @example
+ * // Using the default (SDK-native) signature
+ * const t: TranslationFn = (key, params) => i18n.t(key, params);
+ *
+ * // Using react-i18next's TFunction as TParams
+ * const t: TranslationFn<Record<string, unknown>> = i18nextT;
+ */
+export type TranslationFn<TParams = Record<string, string | number>> = (key: string, params?: TParams) => string;

packages/javascript/src/models/v2/vars.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FlowMetadataResponse} from './flow-meta-v2';
+import {TranslationFn} from './translation';
+
+/**
+ * Options for the resolveVars function.
+ *
+ * @template TFn - The concrete translation function type.
+ *   Defaults to the SDK-native {@link TranslationFn} signature.
+ */
+export interface ResolveVarsOptions<TFn extends TranslationFn = TranslationFn> {
+  /**
+   * Optional flow metadata for resolving `{{ meta(path) }}` expressions.
+   */
+  meta?: FlowMetadataResponse | null;
+  /**
+   * i18n translation function for resolving `{{ t(key) }}` expressions.
+   */
+  t: TFn;
+}

packages/javascript/src/utils/v2/resolveMeta.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FlowMetadataResponse} from '../../models/v2/flow-meta-v2';
+
+/**
+ * Resolves a dot-path expression against a FlowMetadataResponse object.
+ *
+ * Supports both camelCase paths (e.g. `logoUrl`) and snake_case API responses
+ * (e.g. `logo_url`). When a camelCase segment is not found directly, the
+ * function falls back to its snake_case equivalent.
+ *
+ * @example
+ * resolveMeta('application.name', meta) // → 'My App'
+ * resolveMeta('ou.name', meta)           // → 'My Org'
+ *
+ * @param path - Dot-separated path into the meta object (e.g. 'application.name')
+ * @param meta - The FlowMetadataResponse to look up
+ * @returns The resolved string value, or empty string if not found
+ */
+export default function resolveMeta(path: string, meta: FlowMetadataResponse): string {
+  const value: unknown = path.split('.').reduce<unknown>((current: unknown, part: string) => {
+    if (current == null || typeof current !== 'object') {
+      return undefined;
+    }
+
+    const obj: Record<string, unknown> = current as Record<string, unknown>;
+    const snakePart: string = part.replace(/[A-Z]/g, (c: string) => `_${c.toLowerCase()}`);
+
+    return part in obj ? obj[part] : obj[snakePart];
+  }, meta);
+
+  return value != null ? String(value) : '';
+}