Add optional reference identifier to EmbeddedFlowComponent and update related components to use it

Author: brionmario

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

@@ -133,6 +133,11 @@ export interface EmbeddedFlowComponent {
    * Unique identifier for the component
    */
   id: string;
+  
+  /**
+   * Reference identifier for the component (e.g., field name, action ref)
+   */
+  ref?: string;
 
   /**
    * Component type that determines rendering behavior

packages/react/src/components/factories/FieldFactory.tsx

@@ -37,7 +37,8 @@ export interface FieldConfig {
   /**
    * The field type.
    */
-  type: FieldType;
+  type: FieldType
+  ;
   /**
    * Display name for the field.
    */

packages/react/src/components/presentation/SignIn/v2/BaseSignIn.tsx

@@ -316,7 +316,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       const processComponents = (comps: EmbeddedFlowComponent[]) => {
         comps.forEach(component => {
           if (component.type === 'TEXT_INPUT' || component.type === 'PASSWORD_INPUT') {
-            const identifier: string = component.id;
+            const identifier: string = component.ref;
             fields.push({
               name: identifier,
               required: component.required || false,
@@ -390,6 +390,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
     setIsSubmitting(true);
     clearMessages();
+    console.log('Submitting component:', component, 'with data:', data);
 
     try {
       // Filter out empty or undefined input values
@@ -404,9 +405,10 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
       let payload: EmbeddedSignInFlowRequest = {};
 
-      // For V2, we always send inputs, not actionId
+      // For V2, we always send inputs and action
       payload = {
         ...payload,
+        ...(component.id && {action: component.id}),
         inputs: filteredInputs,
       };
 

packages/react/src/components/presentation/SignIn/v2/SignInOptionFactory.tsx

@@ -95,9 +95,10 @@ const createSignInComponentFromFlow = (
 ): ReactElement | null => {
   const key: string | number = options.key || component.id;
 
+  console.log('Creating sign-in component for:', component);
   switch (component.type) {
     case EmbeddedFlowComponentType.TextInput: {
-      const identifier: string = component.id;
+      const identifier: string = component.ref;
       const value: string = formValues[identifier] || '';
       const isTouched: boolean = touchedFields[identifier] || false;
       const error: string = isTouched ? formErrors[identifier] : undefined;
@@ -120,7 +121,7 @@ const createSignInComponentFromFlow = (
     }
 
     case EmbeddedFlowComponentType.PasswordInput: {
-      const identifier: string = component.id;
+      const identifier: string = component.ref;
       const value: string = formValues[identifier] || '';
       const isTouched: boolean = touchedFields[identifier] || false;
       const error: string = isTouched ? formErrors[identifier] : undefined;

packages/react/src/components/presentation/SignUp/v2/BaseSignUp.tsx

@@ -442,6 +442,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       const payload: EmbeddedFlowExecuteRequestPayload = {
         ...(currentFlow.flowId && {flowId: currentFlow.flowId}),
         flowType: (currentFlow as any).flowType || 'REGISTRATION',
+        ...(component.id && {action: component.id}),
         inputs: filteredInputs,
       } as any;
 

packages/react/src/components/presentation/SignUp/v2/SignUpOptionFactory.tsx

@@ -92,7 +92,7 @@ const createSignUpComponentFromFlow = (
 
   switch (component.type) {
     case EmbeddedFlowComponentType.TextInput: {
-      const identifier: string = component.id;
+      const identifier: string = component.ref;
       const value: string = formValues[identifier] || '';
       const isTouched: boolean = touchedFields[identifier] || false;
       const error: string = isTouched ? formErrors[identifier] : undefined;
@@ -115,7 +115,7 @@ const createSignUpComponentFromFlow = (
     }
 
     case EmbeddedFlowComponentType.PasswordInput: {
-      const identifier: string = component.id;
+      const identifier: string = component.ref;
       const value: string = formValues[identifier] || '';
       const isTouched: boolean = touchedFields[identifier] || false;
       const error: string = isTouched ? formErrors[identifier] : undefined;