From 1dacdf80a832d8aeb0a845722284bf726131426d Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 23 Dec 2025 11:19:17 +0530 Subject: [PATCH 1/3] Fix SignUp issues --- .../presentation/auth/AuthOptionFactory.tsx | 9 +- .../auth/SignUp/v2/BaseSignUp.tsx | 8 +- .../react/src/utils/v2/flowTransformer.ts | 102 +++++++++++++++++- 3 files changed, 108 insertions(+), 11 deletions(-) diff --git a/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx b/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx index 5eee3c7e..e62bdc13 100644 --- a/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx +++ b/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx @@ -130,10 +130,6 @@ const createAuthComponentFromFlow = ( ): ReactElement | null => { const key: string | number = options.key || component.id; - if (authType === 'signin') { - console.log('Creating sign-in component for:', component); - } - switch (component.type) { case EmbeddedFlowComponentType.TextInput: case EmbeddedFlowComponentType.PasswordInput: @@ -173,9 +169,8 @@ const createAuthComponentFromFlow = ( if (options.onSubmit) { const formData: Record = {}; Object.keys(formValues).forEach(field => { - if (formValues[field]) { - formData[field] = formValues[field]; - } + // Include all values, even empty strings, to ensure proper submission + formData[field] = formValues[field]; }); options.onSubmit(component, formData, shouldSkipValidation); } diff --git a/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx b/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx index 5695dd58..423b7b3c 100644 --- a/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx +++ b/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx @@ -334,8 +334,12 @@ const BaseSignUpContent: FC = ({ const processComponents = (comps: any[]) => { comps.forEach(component => { if (component.type === EmbeddedFlowComponentType.TextInput) { + // Use component.ref (mapped identifier) as the field name instead of component.id + // This ensures form field names match what the input components use + const fieldName = component.ref || component.id; + fields.push({ - name: component.id, + name: fieldName, required: component.required || false, initialValue: '', validator: (value: string) => { @@ -457,7 +461,7 @@ const BaseSignUpContent: FC = ({ const payload: EmbeddedFlowExecuteRequestPayload = { ...(currentFlow.flowId && {flowId: currentFlow.flowId}), flowType: (currentFlow as any).flowType || 'REGISTRATION', - ...(component.id && {action: component.id}), + ...(component.id && {actionId: component.id}), inputs: filteredInputs, } as any; diff --git a/packages/react/src/utils/v2/flowTransformer.ts b/packages/react/src/utils/v2/flowTransformer.ts index 5a3964f8..a8d44fb0 100644 --- a/packages/react/src/utils/v2/flowTransformer.ts +++ b/packages/react/src/utils/v2/flowTransformer.ts @@ -79,10 +79,97 @@ export interface FlowTransformOptions { resolveTranslations?: boolean; } +/** + * Create a mapping from ref to identifier based on data.inputs array. + * This handles cases where meta.components use 'ref' to reference inputs, + * and data.inputs contain the actual 'identifier' field. + * + * @param response - The flow response object + * @returns Map of ref to identifier + */ +const createInputRefMapping = (response: any): Map => { + const mapping = new Map(); + + if (response?.data?.inputs && Array.isArray(response.data.inputs)) { + response.data.inputs.forEach((input: any) => { + if (input.ref && input.identifier) { + mapping.set(input.ref, input.identifier); + } + }); + } + + return mapping; +}; + +/** + * Create a mapping from action ref to nextNode based on data.actions array. + * This handles cases where meta.components reference actions by ref, + * and data.actions contain the actual nextNode field for routing. + * + * @param response - The flow response object + * @returns Map of action ref to nextNode + */ +const createActionRefMapping = (response: any): Map => { + const mapping = new Map(); + + if (response?.data?.actions && Array.isArray(response.data.actions)) { + response.data.actions.forEach((action: any) => { + if (action.ref && action.nextNode) { + mapping.set(action.ref, action.nextNode); + } + }); + } + + return mapping; +}; + +/** + * Apply input ref mapping to components recursively. + * This ensures that component.ref values are mapped to the correct identifier + * from data.inputs, enabling proper form submission. + * + * @param components - Array of components to transform + * @param refMapping - Map of ref to identifier + * @param actionMapping - Map of action ref to nextNode + * @returns Transformed components with correct identifiers and action references + */ +const applyInputRefMapping = ( + components: EmbeddedFlowComponent[], + refMapping: Map, + actionMapping: Map, +): EmbeddedFlowComponent[] => { + return components.map(component => { + const transformedComponent = {...component} as EmbeddedFlowComponent & {actionRef?: string}; + + // If this component has a ref that maps to an identifier, update it + if (transformedComponent.ref && refMapping.has(transformedComponent.ref)) { + transformedComponent.ref = refMapping.get(transformedComponent.ref); + } + + // If this is an action component, map its id to the nextNode + // Store the nextNode reference as actionRef property for later use + if (transformedComponent.type === 'ACTION' && transformedComponent.id && actionMapping.has(transformedComponent.id)) { + transformedComponent.actionRef = actionMapping.get(transformedComponent.id); + } + + // Recursively apply to nested components + if (transformedComponent.components && Array.isArray(transformedComponent.components)) { + transformedComponent.components = applyInputRefMapping( + transformedComponent.components, + refMapping, + actionMapping, + ); + } + + return transformedComponent; + }); +}; + /** * Transform and resolve translations in components from flow response. * This function extracts components from the response meta structure and optionally resolves - * any translation strings within them. + * any translation strings within them. It also handles mapping of input refs to identifiers + * and action refs to nextNode values. * * @param response - The flow response object containing components in meta structure * @param t - Translation function from useTranslation hook @@ -98,7 +185,18 @@ export const transformComponents = ( return []; } - const components: EmbeddedFlowComponent[] = response.data.meta.components; + let components: EmbeddedFlowComponent[] = response.data.meta.components; + + // Create mapping from ref to identifier based on data.inputs + const refMapping = createInputRefMapping(response); + + // Create mapping from action ref to nextNode based on data.actions + const actionMapping = createActionRefMapping(response); + + // Apply ref and action mapping if there are any mappings + if (refMapping.size > 0 || actionMapping.size > 0) { + components = applyInputRefMapping(components, refMapping, actionMapping); + } return resolveTranslations ? resolveTranslationsInArray(components, t) : components; }; From 300abb958dd294e6c8ecf702fb8bfcfabcceac2e Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 23 Dec 2025 11:19:39 +0530 Subject: [PATCH 2/3] =?UTF-8?q?Add=20changeset=20=F0=9F=A6=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/old-banks-hope.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/old-banks-hope.md diff --git a/.changeset/old-banks-hope.md b/.changeset/old-banks-hope.md new file mode 100644 index 00000000..b8cb4de2 --- /dev/null +++ b/.changeset/old-banks-hope.md @@ -0,0 +1,5 @@ +--- +'@asgardeo/react': patch +--- + +Fix Sign up From 0852c2e5f51cba501306d4df75a15939ff08985a Mon Sep 17 00:00:00 2001 From: Brion Date: Tue, 23 Dec 2025 11:19:45 +0530 Subject: [PATCH 3/3] Fix SignUp issues --- packages/react/src/utils/v2/flowTransformer.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react/src/utils/v2/flowTransformer.ts b/packages/react/src/utils/v2/flowTransformer.ts index a8d44fb0..c860fbe2 100644 --- a/packages/react/src/utils/v2/flowTransformer.ts +++ b/packages/react/src/utils/v2/flowTransformer.ts @@ -148,7 +148,11 @@ const applyInputRefMapping = ( // If this is an action component, map its id to the nextNode // Store the nextNode reference as actionRef property for later use - if (transformedComponent.type === 'ACTION' && transformedComponent.id && actionMapping.has(transformedComponent.id)) { + if ( + transformedComponent.type === 'ACTION' && + transformedComponent.id && + actionMapping.has(transformedComponent.id) + ) { transformedComponent.actionRef = actionMapping.get(transformedComponent.id); }