@thunderid/react 0.1.0 → 0.3.0

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignIn.js","names":["BaseSignInContent: FC<BaseSignInProps>","useThunderID","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","styles: any","useStyles","isLoading: boolean","handleError: any","errorMessage: string","extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[]","fields: FormField[]","identifier: string","filteredInputs: Record<string, any>","payload: EmbeddedSignInFlowRequest","containerClasses: any","inputClasses: any","buttonClasses: any","messageClasses: any","renderComponents: any","renderProps: BaseSignInRenderProps","result: any","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseSignIn: FC<BaseSignInProps>","content: ReactElement","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../../../src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {\n  withVendorCSSClassPrefix,\n  EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest,\n  EmbeddedFlowComponentV2 as EmbeddedFlowComponent,\n  FlowMetadataResponse,\n  Preferences,\n} from '@thunderid/browser';\nimport {FC, useState, useCallback, useContext, ReactElement, ReactNode} from 'react';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport FlowProvider from '../../../../../contexts/Flow/FlowProvider';\nimport useFlow from '../../../../../contexts/Flow/useFlow';\nimport ComponentPreferencesContext from '../../../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../../contexts/ThunderID/useThunderID';\nimport {FormField, useForm} from '../../../../../hooks/useForm';\nimport useTranslation from '../../../../../hooks/useTranslation';\nimport {extractErrorMessage} from '../../../../../utils/v2/flowTransformer';\nimport AlertPrimitive from '../../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../../primitives/Card/Card';\nimport Spinner from '../../../../primitives/Spinner/Spinner';\nimport Typography from '../../../../primitives/Typography/Typography';\nimport {renderSignInComponents} from '../../AuthOptionFactory';\nimport useStyles from '../BaseSignIn.styles';\n\n/**\n * Render props for custom UI rendering\n */\nexport interface BaseSignInRenderProps {\n  /**\n   * Flow components\n   */\n  components: EmbeddedFlowComponent[];\n\n  /**\n   * API error (if any)\n   */\n  error?: Error | null;\n\n  /**\n   * Field validation errors\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Function to handle input changes\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission\n   */\n  handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n\n  /**\n   * Flag indicating if the step timer has reached zero\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Whether the form is valid\n   */\n  isValid: boolean;\n\n  /**\n   * Flow messages\n   */\n  messages: {message: string; type: string}[];\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Flow subtitle\n   */\n  subtitle: string;\n\n  /**\n   * Flow title\n   */\n  title: string;\n\n  /**\n   * Touched fields\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Function to validate the form\n   */\n  validateForm: () => {fieldErrors: Record<string, string>; isValid: boolean};\n\n  /**\n   * Form values\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseSignIn component.\n */\nexport interface BaseSignInProps {\n  /**\n   * Additional data from the flow response.\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Custom CSS class name for the submit button.\n   */\n  buttonClassName?: string;\n\n  /**\n   * Render props function for custom UI\n   */\n  children?: (props: BaseSignInRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name for the form container.\n   */\n  className?: string;\n\n  /**\n   * Array of flow components to render.\n   */\n  components?: EmbeddedFlowComponent[];\n\n  /**\n   * Error object to display\n   */\n  error?: Error | null;\n\n  /**\n   * Custom CSS class name for error messages.\n   */\n  errorClassName?: string;\n\n  /**\n   * Custom CSS class name for form inputs.\n   */\n  inputClassName?: string;\n\n  /**\n   * Flag to determine if the component is ready to be rendered.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Timer flag disabling actions\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Custom CSS class name for info messages.\n   */\n  messageClassName?: string;\n\n  /**\n   * Callback function called when authentication fails.\n   * @param error - The error that occurred during authentication.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Function to handle form submission.\n   * @param payload - The form data to submit.\n   * @param component - The component that triggered the submission.\n   */\n  onSubmit?: (payload: EmbeddedSignInFlowRequest, component: EmbeddedFlowComponent) => Promise<void>;\n\n  /**\n   * Callback function called when authentication is successful.\n   * @param authData - The authentication data returned upon successful completion.\n   */\n  onSuccess?: (authData: Record<string, any>) => void;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Internal component that consumes FlowContext and renders the sign-in UI.\n */\nconst BaseSignInContent: FC<BaseSignInProps> = ({\n  components = [],\n  onSubmit,\n  onError,\n  error: externalError,\n  className = '',\n  inputClassName = '',\n  buttonClassName = '',\n  messageClassName = '',\n  size = 'medium',\n  variant = 'outlined',\n  isLoading: externalIsLoading,\n  children,\n  additionalData = {},\n  isTimeoutDisabled = false,\n}: BaseSignInProps): ReactElement => {\n  const {meta} = useThunderID();\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const {t} = useTranslation();\n  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [apiError, setApiError] = useState<Error | null>(null);\n\n  const isLoading: boolean = externalIsLoading || isSubmitting;\n\n  /**\n   * Handle error responses and extract meaningful error messages\n   * Uses the transformer's extractErrorMessage function for consistency\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t);\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear existing messages and add the error message\n      clearMessages();\n      addMessage({\n        message: errorMessage,\n        type: 'error',\n      });\n    },\n    [t, addMessage, clearMessages],\n  );\n\n  /**\n   * Extract form fields from flow components\n   */\n  const extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[] = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): FormField[] => {\n      const fields: FormField[] = [];\n\n      const processComponents = (comps: EmbeddedFlowComponent[]): any => {\n        comps.forEach((component: any) => {\n          if (\n            component.type === 'TEXT_INPUT' ||\n            component.type === 'PASSWORD_INPUT' ||\n            component.type === 'EMAIL_INPUT' ||\n            component.type === 'PHONE_INPUT' ||\n            component.type === 'OTP_INPUT'\n          ) {\n            const identifier: string = component.ref;\n            fields.push({\n              initialValue: '',\n              name: identifier,\n              required: component.required || false,\n              validator: (value: string) => {\n                if (component.required && (!value || value.trim() === '')) {\n                  return t('validations.required.field.error');\n                }\n                // Add email validation if it's an email field\n                if (\n                  (component.type === 'EMAIL_INPUT' || component.variant === 'EMAIL') &&\n                  value &&\n                  !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)\n                ) {\n                  return t('field.email.invalid');\n                }\n\n                return null;\n              },\n            });\n          }\n          if (component.components) {\n            processComponents(component.components);\n          }\n        });\n      };\n\n      processComponents(flowComponents);\n      return fields;\n    },\n    [t],\n  );\n\n  const formFields: FormField[] = components ? extractFormFields(components) : [];\n\n  const form: ReturnType<typeof useForm> = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: false,\n  });\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    validateForm,\n    touchAllFields,\n  } = form;\n\n  /**\n   * Handle input value changes.\n   * Only updates the value without marking as touched.\n   * Touched state is set on blur to avoid premature validation.\n   */\n  const handleInputChange = (name: string, value: string): void => {\n    setFormValue(name, value);\n  };\n\n  /**\n   * Handle input blur event.\n   * Marks the field as touched, which triggers validation.\n   */\n  const handleInputBlur = (name: string): void => {\n    setFormTouched(name, true);\n  };\n\n  /**\n   * Handle component submission (for buttons and actions).\n   */\n  const handleSubmit = async (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, any>,\n    skipValidation?: boolean,\n  ): Promise<void> => {\n    // Only validate for form submit actions, skip for social/trigger actions\n    if (!skipValidation) {\n      // Mark all fields as touched before validation\n      touchAllFields();\n\n      const validation: ReturnType<typeof validateForm> = validateForm();\n\n      if (!validation.isValid) {\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    setApiError(null);\n    clearMessages();\n\n    try {\n      // Filter out empty or undefined input values\n      const filteredInputs: Record<string, any> = {};\n      if (data) {\n        Object.keys(data).forEach((key: any) => {\n          if (data[key] !== undefined && data[key] !== null && data[key] !== '') {\n            filteredInputs[key] = data[key];\n          }\n        });\n      }\n\n      let payload: EmbeddedSignInFlowRequest = {};\n\n      // For V2, we always send inputs and action\n      payload = {\n        ...payload,\n        ...(component.id && {action: component.id}),\n        inputs: filteredInputs,\n      };\n\n      await onSubmit?.(payload, component);\n    } catch (err) {\n      handleError(err);\n      onError?.(err as Error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // Generate CSS classes\n  const containerClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin'),\n      withVendorCSSClassPrefix(`signin--${size}`),\n      withVendorCSSClassPrefix(`signin--${variant}`),\n    ],\n    className,\n  );\n\n  const inputClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__input'),\n      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),\n    ],\n    inputClassName,\n  );\n\n  const buttonClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__button'),\n      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),\n    ],\n    buttonClassName,\n  );\n\n  const messageClasses: any = cx([withVendorCSSClassPrefix('signin__messages')], messageClassName);\n\n  /**\n   * Render components based on flow data using the factory\n   */\n  const renderComponents: any = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): ReactElement[] =>\n      renderSignInComponents(\n        flowComponents,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData,\n          buttonClassName: buttonClasses,\n          inputClassName: inputClasses,\n          isTimeoutDisabled,\n          meta,\n          onInputBlur: handleInputBlur,\n          onSubmit: handleSubmit,\n          size,\n          t,\n          variant,\n        },\n      ),\n    [\n      additionalData,\n      customRenderers,\n      formValues,\n      touchedFields,\n      formErrors,\n      isFormValid,\n      meta,\n      t,\n      theme,\n      isLoading,\n      size,\n      variant,\n      inputClasses,\n      buttonClasses,\n      handleInputBlur,\n      handleSubmit,\n      isTimeoutDisabled,\n    ],\n  );\n\n  // If render props are provided, use them\n  if (children) {\n    const renderProps: BaseSignInRenderProps = {\n      components,\n      error: apiError,\n      fieldErrors: formErrors,\n      handleInputChange,\n      handleSubmit,\n      isLoading,\n      isTimeoutDisabled,\n      isValid: isFormValid,\n      messages: flowMessages || [],\n      meta,\n      subtitle: flowSubtitle ?? '',\n      title: flowTitle || t('signin.heading'),\n      touched: touchedFields,\n      validateForm: () => {\n        const result: any = validateForm();\n        return {fieldErrors: result.errors, isValid: result.isValid};\n      },\n      values: formValues,\n    };\n\n    return (\n      <div className={containerClasses} data-testid=\"thunderid-signin\">\n        {children(renderProps)}\n      </div>\n    );\n  }\n\n  // Default UI rendering\n  if (isLoading) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n        <CardPrimitive.Content>\n          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>\n            <Spinner />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  if (!components || components.length === 0) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"warning\">\n            <Typography variant=\"body1\">{t('errors.signin.components.not.available')}</Typography>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  return (\n    <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n      <CardPrimitive.Content>\n        {externalError && (\n          <div className={styles.flowMessagesContainer}>\n            <AlertPrimitive variant=\"error\" className={cx(styles.flowMessageItem, messageClasses)}>\n              <AlertPrimitive.Description>{externalError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        {flowMessages && flowMessages.length > 0 && (\n          <div className={styles.flowMessagesContainer}>\n            {flowMessages.map((message: any, index: any) => (\n              <AlertPrimitive\n                key={index}\n                variant={message.type === 'error' ? 'error' : 'info'}\n                className={cx(styles.flowMessageItem, messageClasses)}\n              >\n                <AlertPrimitive.Description>{message.message}</AlertPrimitive.Description>\n              </AlertPrimitive>\n            ))}\n          </div>\n        )}\n        <div className={styles.contentContainer}>{renderComponents(components)}</div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\n/**\n * Base SignIn component that provides generic authentication flow.\n * This component handles component-driven UI rendering and can transform input\n * structure to component-driven format automatically.\n *\n * @example\n * // Default UI\n * ```tsx\n * import { BaseSignIn } from '@thunderid/react';\n *\n * const MySignIn = () => {\n *   return (\n *     <BaseSignIn\n *       components={components}\n *       onSubmit={async (payload) => {\n *         return await handleAuth(payload);\n *       }}\n *       onSuccess={(authData) => {\n *         console.log('Success:', authData);\n *       }}\n *       className=\"max-w-md mx-auto\"\n *     />\n *   );\n * };\n * ```\n *\n * @example\n * // Custom UI with render props\n * ```tsx\n * <BaseSignIn components={components} onSubmit={handleSubmit}>\n *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (\n *     <div className=\"custom-form\">\n *       <input\n *         name=\"username\"\n *         value={values.username || ''}\n *         onChange={(e) => handleInputChange('username', e.target.value)}\n *       />\n *       {errors.username && <span>{errors.username}</span>}\n *       <button\n *         onClick={() => handleSubmit(components[0], values)}\n *         disabled={isLoading}\n *       >\n *         Sign In\n *       </button>\n *     </div>\n *   )}\n * </BaseSignIn>\n * ```\n */\nconst BaseSignIn: FC<BaseSignInProps> = ({preferences, ...rest}: BaseSignInProps): ReactElement => {\n  const content: ReactElement = (\n    <FlowProvider>\n      <BaseSignInContent {...rest} />\n    </FlowProvider>\n  );\n\n  if (!preferences) return content;\n\n  return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseSignIn;\n"],"mappings":"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"}

package/dist/components/presentation/auth/SignIn/v2/SignIn.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2025-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

package/dist/components/presentation/auth/SignIn/v2/SignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignIn/v2/SignIn.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAEL,uBAAuB,IAAI,qBAAqB,EAGhD,2BAA2B,EAG3B,oBAAoB,EACpB,WAAW,EAEZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAA6C,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/E,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAQzD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAErC;;OAEG;IACH,UAAU,EAAE,qBAAqB,EAAE,CAAC;IAEpC;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAElC;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAEpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsqB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignIn/v2/SignIn.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAEL,uBAAuB,IAAI,qBAAqB,EAGhD,2BAA2B,EAG3B,oBAAoB,EACpB,WAAW,EAEZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAA6C,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/E,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAQzD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAErC;;OAEG;IACH,UAAU,EAAE,qBAAqB,EAAE,CAAC;IAEpC;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAElC;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAEpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+qB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/presentation/auth/SignIn/v2/SignIn.js

@@ -0,0 +1,556 @@
+import useThunderID_default from "../../../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../../../hooks/useTranslation.js";
+import { extractErrorMessage, normalizeFlowResponse } from "../../../../../utils/v2/flowTransformer.js";
+import BaseSignIn_default from "./BaseSignIn.js";
+import { useOAuthCallback } from "../../../../../hooks/v2/useOAuthCallback.js";
+import { initiateOAuthRedirect } from "../../../../../utils/oauth.js";
+import { handlePasskeyAuthentication, handlePasskeyRegistration } from "../../../../../utils/v2/passkey.js";
+import { EmbeddedFlowType, EmbeddedSignInFlowStatusV2, EmbeddedSignInFlowTypeV2, ThunderIDRuntimeError, logger } from "@thunderid/browser";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/auth/SignIn/v2/SignIn.tsx
+/**
+* A component-driven SignIn component that provides authentication flow with pre-built styling.
+* This component handles the flow API calls for authentication and delegates UI logic to BaseSignIn.
+* It automatically transforms simple input-based responses into component-driven UI format.
+*
+* @example
+* // Default UI
+* ```tsx
+* import { SignIn } from '@thunderid/react/component-driven';
+*
+* const App = () => {
+*   return (
+*     <SignIn
+*       onSuccess={(authData) => {
+*         console.log('Authentication successful:', authData);
+*       }}
+*       onError={(error) => {
+*         console.error('Authentication failed:', error);
+*       }}
+*       size="medium"
+*       variant="outlined"
+*     />
+*   );
+* };
+* ```
+*
+* @example
+* // Custom UI with render props
+* ```tsx
+* import { SignIn } from '@thunderid/react/component-driven';
+*
+* const App = () => {
+*   return (
+*     <SignIn
+*       onSuccess={(authData) => console.log('Success:', authData)}
+*       onError={(error) => console.error('Error:', error)}
+*     >
+*       {({signIn, isLoading, components, error, isInitialized}) => (
+*         <div className="custom-signin">
+*           <h1>Custom Sign In</h1>
+*           {!isInitialized ? (
+*             <p>Initializing...</p>
+*           ) : error ? (
+*             <div className="error">{error.message}</div>
+*           ) : (
+*             <form onSubmit={(e) => {
+*               e.preventDefault();
+*               signIn({inputs: {username: 'user', password: 'pass'}});
+*             }}>
+*               <button type="submit" disabled={isLoading}>
+*                 {isLoading ? 'Signing in...' : 'Sign In'}
+*               </button>
+*             </form>
+*           )}
+*         </div>
+*       )}
+*     </SignIn>
+*   );
+* };
+* ```
+*/
+const SignIn = ({ className, preferences, size = "medium", onSuccess, onError, variant, children }) => {
+	const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading, meta, getStorageManager, scopes } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [components, setComponents] = useState([]);
+	const [additionalData, setAdditionalData] = useState({});
+	const [currentExecutionId, setCurrentExecutionId] = useState(null);
+	const challengeTokenRef = useRef(null);
+	const [isStorageReady, setIsStorageReady] = useState(false);
+	const [isFlowInitialized, setIsFlowInitialized] = useState(false);
+	const [flowError, setFlowError] = useState(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isTimeoutDisabled, setIsTimeoutDisabled] = useState(false);
+	const [passkeyState, setPasskeyState] = useState({
+		actionId: null,
+		challenge: null,
+		creationOptions: null,
+		error: null,
+		executionId: null,
+		isActive: false
+	});
+	const initializationAttemptedRef = useRef(false);
+	const oauthCodeProcessedRef = useRef(false);
+	const passkeyProcessedRef = useRef(false);
+	/**
+	* Sets executionId between sessionStorage and state.
+	* This ensures both are always in sync.
+	*/
+	const setExecutionId = (executionId) => {
+		setCurrentExecutionId(executionId);
+		if (executionId) sessionStorage.setItem("thunderid_execution_id", executionId);
+		else sessionStorage.removeItem("thunderid_execution_id");
+	};
+	/**
+	* Restore any challenge token persisted before an OAuth redirect.
+	* Waits for SDK initialization before reading from storage.
+	*/
+	useEffect(() => {
+		if (!isInitialized) return;
+		(async () => {
+			try {
+				const tempData = await (await getStorageManager())?.getTemporaryData();
+				if (tempData?.challengeToken) challengeTokenRef.current = tempData.challengeToken;
+			} finally {
+				setIsStorageReady(true);
+			}
+		})();
+	}, [isInitialized]);
+	/**
+	* Updates challengeTokenRef immediately (stale-closure safe) and persists via
+	* the provider's StorageManager so the token survives OAuth redirects.
+	*/
+	const setChallengeToken = async (challengeToken) => {
+		challengeTokenRef.current = challengeToken;
+		try {
+			const storageManager = await getStorageManager();
+			if (storageManager) if (challengeToken) await storageManager.setTemporaryDataParameter("challengeToken", challengeToken);
+			else await storageManager.removeTemporaryDataParameter("challengeToken");
+		} catch {
+			logger.warn("Failed to persist challenge token in storage.");
+		}
+	};
+	/**
+	* Clear all flow-related storage and state.
+	*/
+	const clearFlowState = async () => {
+		setExecutionId(null);
+		await setChallengeToken(null);
+		setIsFlowInitialized(false);
+		try {
+			await (await getStorageManager())?.removeHybridDataParameter?.("authId");
+		} catch {
+			logger.warn("Failed to clear authId from hybrid storage.");
+		}
+		setIsTimeoutDisabled(false);
+		oauthCodeProcessedRef.current = false;
+	};
+	/**
+	* Parse URL parameters used in flows.
+	*/
+	const getUrlParams = () => {
+		const urlParams = new URL(window?.location?.href ?? "").searchParams;
+		return {
+			applicationId: urlParams.get("applicationId"),
+			authId: urlParams.get("authId"),
+			code: urlParams.get("code"),
+			error: urlParams.get("error"),
+			errorDescription: urlParams.get("error_description"),
+			executionId: urlParams.get("executionId"),
+			nonce: urlParams.get("nonce"),
+			state: urlParams.get("state")
+		};
+	};
+	/**
+	* Handle authId from URL and store it in sessionStorage.
+	*/
+	const handleAuthId = async (authId) => {
+		if (authId) try {
+			await (await getStorageManager())?.setHybridDataParameter?.("authId", authId);
+		} catch {
+			logger.warn("Failed to store authId in hybrid storage.");
+		}
+	};
+	/**
+	* Clean up OAuth-related URL parameters from the browser URL.
+	*/
+	const cleanupOAuthUrlParams = (includeNonce = false) => {
+		if (!window?.location?.href) return;
+		const url = new URL(window.location.href);
+		url.searchParams.delete("error");
+		url.searchParams.delete("error_description");
+		url.searchParams.delete("code");
+		url.searchParams.delete("state");
+		if (includeNonce) url.searchParams.delete("nonce");
+		window?.history?.replaceState({}, "", url.toString());
+	};
+	/**
+	* Clean up flow-related URL parameters (executionId, authId) from the browser URL.
+	* Used after executionId is set in state to prevent using invalidated executionId from URL.
+	*/
+	const cleanupFlowUrlParams = () => {
+		if (!window?.location?.href) return;
+		const url = new URL(window.location.href);
+		url.searchParams.delete("executionId");
+		url.searchParams.delete("authId");
+		url.searchParams.delete("applicationId");
+		window?.history?.replaceState({}, "", url.toString());
+	};
+	/**
+	* Set error state and call onError callback.
+	* Ensures isFlowInitialized is true so errors can be displayed in the UI.
+	*/
+	const setError = (error) => {
+		setFlowError(error);
+		setIsFlowInitialized(true);
+		onError?.(error);
+	};
+	/**
+	* Handle OAuth error from URL parameters.
+	* Clears flow state, creates error, and cleans up URL.
+	*/
+	const handleOAuthError = (error, errorDescription) => {
+		clearFlowState();
+		setError(new ThunderIDRuntimeError(errorDescription || `OAuth error: ${error}`, "SIGN_IN_ERROR", "react"));
+		cleanupOAuthUrlParams(true);
+	};
+	/**
+	* Handle REDIRECTION response by storing flow state and redirecting to OAuth provider.
+	*/
+	const handleRedirection = async (response) => {
+		if (response.type === EmbeddedSignInFlowTypeV2.Redirection) {
+			const redirectURL = response.data?.redirectURL || response?.redirectURL;
+			if (redirectURL && window?.location) {
+				if (response.executionId) setExecutionId(response.executionId);
+				await setChallengeToken(response.challengeToken ?? null);
+				handleAuthId(getUrlParams().authId);
+				initiateOAuthRedirect(redirectURL);
+				return true;
+			}
+		}
+		return false;
+	};
+	/**
+	* Initialize the authentication flow.
+	* Priority: executionId > applicationId (from context) > applicationId (from URL)
+	*/
+	const initializeFlow = async () => {
+		const urlParams = getUrlParams();
+		oauthCodeProcessedRef.current = false;
+		handleAuthId(urlParams.authId);
+		const effectiveApplicationId = applicationId || urlParams.applicationId;
+		if (!urlParams.executionId && !effectiveApplicationId) {
+			const error = new ThunderIDRuntimeError("Either executionId or applicationId is required for authentication", "SIGN_IN_ERROR", "react");
+			setError(error);
+			throw error;
+		}
+		try {
+			setFlowError(null);
+			let response;
+			if (urlParams.executionId) response = await signIn({
+				executionId: urlParams.executionId,
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {}
+			});
+			else response = await signIn({
+				applicationId: effectiveApplicationId,
+				flowType: EmbeddedFlowType.Authentication,
+				...scopes && { scopes }
+			});
+			if (await handleRedirection(response)) return;
+			const { executionId: normalizedExecutionId, components: normalizedComponents, additionalData: normalizedAdditionalData } = normalizeFlowResponse(response, t, { resolveTranslations: false }, meta);
+			await setChallengeToken(response.challengeToken ?? null);
+			if (normalizedExecutionId && normalizedComponents) {
+				setExecutionId(normalizedExecutionId);
+				setComponents(normalizedComponents);
+				setAdditionalData(normalizedAdditionalData ?? {});
+				setIsFlowInitialized(true);
+				setIsTimeoutDisabled(false);
+				cleanupFlowUrlParams();
+			}
+		} catch (error) {
+			const err = error;
+			await clearFlowState();
+			setError(err instanceof ThunderIDRuntimeError ? err : new Error(extractErrorMessage(err, t)));
+			initializationAttemptedRef.current = false;
+		}
+	};
+	/**
+	* Initialize the flow and handle cleanup of stale flow state.
+	*/
+	useEffect(() => {
+		const urlParams = getUrlParams();
+		if (urlParams.error) {
+			handleOAuthError(urlParams.error, urlParams.errorDescription);
+			return;
+		}
+		handleAuthId(urlParams.authId);
+	}, []);
+	useEffect(() => {
+		const currentUrlParams = getUrlParams();
+		if (isInitialized && !isLoading && isStorageReady && !isFlowInitialized && !initializationAttemptedRef.current && !currentExecutionId && !currentUrlParams.code && !currentUrlParams.state && !isSubmitting && !oauthCodeProcessedRef.current) {
+			initializationAttemptedRef.current = true;
+			initializeFlow();
+		}
+	}, [
+		isInitialized,
+		isLoading,
+		isStorageReady,
+		isFlowInitialized,
+		currentExecutionId
+	]);
+	/**
+	* Handle step timeout if configured in additionalData.
+	*/
+	useEffect(() => {
+		const timeoutMs = Number(additionalData?.["stepTimeout"]) || 0;
+		if (timeoutMs <= 0 || !isFlowInitialized) {
+			setIsTimeoutDisabled(false);
+			return;
+		}
+		const remaining = Math.max(0, Math.floor((timeoutMs - Date.now()) / 1e3));
+		const handleTimeout = () => {
+			const errorMessage = t("errors.signin.timeout") || "Time allowed to complete the step has expired.";
+			setError(new Error(errorMessage));
+			setIsTimeoutDisabled(true);
+		};
+		if (remaining <= 0) {
+			handleTimeout();
+			return;
+		}
+		const timerId = setTimeout(() => {
+			handleTimeout();
+		}, remaining * 1e3);
+		return () => clearTimeout(timerId);
+	}, [
+		additionalData?.["stepTimeout"],
+		isFlowInitialized,
+		t
+	]);
+	/**
+	* Handle form submission from BaseSignIn or render props.
+	*/
+	const handleSubmit = async (payload) => {
+		const effectiveExecutionId = payload.executionId || currentExecutionId;
+		if (!effectiveExecutionId) throw new Error("No active flow ID");
+		const processedInputs = { ...payload.inputs };
+		if (additionalData?.["consentPrompt"]) try {
+			const consentPromptRawData = additionalData["consentPrompt"];
+			const purposes = typeof consentPromptRawData === "string" ? JSON.parse(consentPromptRawData) : consentPromptRawData.purposes || consentPromptRawData;
+			let isDeny = false;
+			if (payload.action) {
+				const findAction = (comps) => {
+					if (!comps || comps.length === 0) return null;
+					const found = comps.find((c) => c.id === payload.action);
+					if (found) return found;
+					return comps.reduce((acc, c) => {
+						if (acc) return acc;
+						if (c.components) return findAction(c.components);
+						return null;
+					}, null);
+				};
+				const submitAction = findAction(components);
+				if (submitAction && submitAction.variant?.toLowerCase() !== "primary") isDeny = true;
+			}
+			const decisions = { purposes: purposes.map((p) => ({
+				approved: !isDeny,
+				elements: [...(p.essential || []).map((e) => ({
+					approved: !isDeny,
+					name: e.name
+				})), ...(p.optional || []).map((e) => {
+					const key = `__consent_opt__${p.purposeId}__${e.name}`;
+					return {
+						approved: isDeny ? false : processedInputs[key] !== "false",
+						name: e.name
+					};
+				})],
+				purposeName: p.purposeName
+			})) };
+			processedInputs["consent_decisions"] = JSON.stringify(decisions);
+			Object.keys(processedInputs).forEach((key) => {
+				if (key.startsWith("__consent_opt__")) delete processedInputs[key];
+			});
+		} catch (e) {}
+		try {
+			setIsSubmitting(true);
+			setFlowError(null);
+			const response = await signIn({
+				executionId: effectiveExecutionId,
+				...payload,
+				inputs: processedInputs,
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {}
+			});
+			if (await handleRedirection(response)) return;
+			if (response.data?.additionalData?.["passkeyChallenge"] || response.data?.additionalData?.["passkeyCreationOptions"]) {
+				const { passkeyChallenge, passkeyCreationOptions } = response.data.additionalData;
+				const effectiveExecutionIdForPasskey = response.executionId || effectiveExecutionId;
+				passkeyProcessedRef.current = false;
+				await setChallengeToken(response.challengeToken ?? null);
+				setPasskeyState({
+					actionId: "submit",
+					challenge: passkeyChallenge,
+					creationOptions: passkeyCreationOptions,
+					error: null,
+					executionId: effectiveExecutionIdForPasskey,
+					isActive: true
+				});
+				setIsSubmitting(false);
+				return;
+			}
+			const { executionId: normalizedExecutionId, components: normalizedComponents, additionalData: normalizedAdditionalData } = normalizeFlowResponse(response, t, { resolveTranslations: false }, meta);
+			if (response.flowStatus === EmbeddedSignInFlowStatusV2.Error) {
+				await clearFlowState();
+				const err = new Error(extractErrorMessage(response, t));
+				setError(err);
+				cleanupFlowUrlParams();
+				throw err;
+			}
+			if (response.flowStatus === EmbeddedSignInFlowStatusV2.Complete) {
+				const finalRedirectUrl = response?.redirectUrl || response?.redirect_uri || afterSignInUrl;
+				setIsSubmitting(false);
+				setExecutionId(null);
+				await setChallengeToken(null);
+				setIsFlowInitialized(false);
+				sessionStorage.removeItem("thunderid_execution_id");
+				try {
+					await (await getStorageManager())?.removeHybridDataParameter?.("authId");
+				} catch {
+					logger.warn("Failed to clear authId from hybrid storage after completion.");
+				}
+				cleanupOAuthUrlParams(true);
+				if (onSuccess) onSuccess({
+					redirectUrl: finalRedirectUrl,
+					...response.data || {}
+				});
+				if (finalRedirectUrl && window?.location) window.location.href = finalRedirectUrl;
+				return;
+			}
+			await setChallengeToken(response.challengeToken ?? null);
+			if (normalizedExecutionId && normalizedComponents) {
+				setExecutionId(normalizedExecutionId);
+				setComponents(normalizedComponents);
+				setAdditionalData(normalizedAdditionalData ?? {});
+				setIsTimeoutDisabled(false);
+				setIsFlowInitialized(true);
+				cleanupFlowUrlParams();
+				if (response?.error) setFlowError(new Error(extractErrorMessage(response, t)));
+			}
+		} catch (error) {
+			const err = error;
+			await clearFlowState();
+			setError(err instanceof ThunderIDRuntimeError ? err : new Error(extractErrorMessage(err, t)));
+			return;
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	/**
+	* Handle authentication errors.
+	*/
+	const handleError = (error) => {
+		setError(error);
+	};
+	useOAuthCallback({
+		currentExecutionId,
+		isInitialized: isInitialized && !isLoading && isStorageReady,
+		isSubmitting,
+		onError: (err) => {
+			clearFlowState();
+			setError(err instanceof Error ? err : new Error(String(err)));
+		},
+		onSubmit: async (payload) => handleSubmit({
+			executionId: payload.executionId,
+			inputs: payload.inputs
+		}),
+		processedRef: oauthCodeProcessedRef,
+		setExecutionId
+	});
+	/**
+	* Handle passkey authentication/registration when passkey state becomes active.
+	* This effect auto-triggers the browser passkey popup and submits the result.
+	*/
+	useEffect(() => {
+		if (!passkeyState.isActive || !passkeyState.challenge && !passkeyState.creationOptions || !passkeyState.executionId) return;
+		if (passkeyProcessedRef.current) return;
+		passkeyProcessedRef.current = true;
+		const performPasskeyProcess = async () => {
+			let inputs;
+			if (passkeyState.challenge) {
+				const passkeyResponse = await handlePasskeyAuthentication(passkeyState.challenge);
+				const passkeyResponseObj = JSON.parse(passkeyResponse);
+				inputs = {
+					authenticatorData: passkeyResponseObj.response.authenticatorData,
+					clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+					credentialId: passkeyResponseObj.id,
+					signature: passkeyResponseObj.response.signature,
+					userHandle: passkeyResponseObj.response.userHandle
+				};
+			} else if (passkeyState.creationOptions) {
+				const passkeyResponse = await handlePasskeyRegistration(passkeyState.creationOptions);
+				const passkeyResponseObj = JSON.parse(passkeyResponse);
+				inputs = {
+					attestationObject: passkeyResponseObj.response.attestationObject,
+					clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+					credentialId: passkeyResponseObj.id
+				};
+			} else throw new Error("No passkey challenge or creation options available");
+			await handleSubmit({
+				executionId: passkeyState.executionId ?? void 0,
+				inputs
+			});
+		};
+		performPasskeyProcess().then(() => {
+			setPasskeyState({
+				actionId: null,
+				challenge: null,
+				creationOptions: null,
+				error: null,
+				executionId: null,
+				isActive: false
+			});
+		}).catch((error) => {
+			setPasskeyState((prev) => ({
+				...prev,
+				error,
+				isActive: false
+			}));
+			setFlowError(error);
+			onError?.(error);
+		});
+	}, [
+		passkeyState.isActive,
+		passkeyState.challenge,
+		passkeyState.creationOptions,
+		passkeyState.executionId
+	]);
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children({
+		additionalData,
+		components,
+		error: flowError,
+		initialize: initializeFlow,
+		isInitialized: isFlowInitialized,
+		isLoading: isLoading || isSubmitting || !isInitialized,
+		isTimeoutDisabled,
+		meta,
+		onSubmit: handleSubmit
+	}) });
+	return /* @__PURE__ */ jsx(BaseSignIn_default, {
+		additionalData,
+		components,
+		isLoading: isLoading || !isInitialized || !isFlowInitialized,
+		isTimeoutDisabled,
+		onSubmit: handleSubmit,
+		onError: handleError,
+		error: flowError,
+		className,
+		size,
+		variant,
+		preferences
+	});
+};
+var SignIn_default = SignIn;
+
+//#endregion
+export { SignIn_default as default };
+//# sourceMappingURL=SignIn.js.map