Settings flow UI nodes filtering

[Felipe2311]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

We’re building a custom email-only update component using the component from @ory/elements-react.
To do this, we filter the settings flow’s UI nodes so that only the email-related nodes are displayed. This allows users to update their email address without seeing any of the other settings fields (password, profile info, etc.).

This setup works correctly on the initial settings flow. However, when submitting the form with an invalid email, we receive a 400 response and new UI nodes — but this new set of nodes includes all settings flow nodes, not just the filtered ones.
Since the request is made internally by the component, we currently don’t have a way to apply our filtering logic after the response updates the flow.

Describe your ideal solution

Our goal is to have a settings flow that only includes the email update UI nodes, even after validation errors or flow updates triggered by the form submission.
Essentially, we want to:

• Keep the filtered state consistent across flow updates, or find a way to request only specific UI nodes from the initial settings.
• Maintain full Ory validation and error handling behavior.

Workarounds or alternatives

A workaround would be to have access to the onSubmit function from the Settings component so we can manually filter out UI nodes and keep just the ones we need.

Version

1.0.0

Additional Context

We would like to have a component as the one in the image attached in this request. The component would be a single email update component, not showing the other fields. And we would use the same approach for other settings updates, like password or username.

[jonas-jonas]

Thanks for the report. We'll take a look.

To do this, we filter the settings flow’s UI nodes so that only the email-related nodes are displayed.

Could you add the code you use to do this?

[Felipe2311]

A pretty straightforward filtering for the initial settings request.

export const getSettingsFlow = async (params: { [key: string]: string | string[] | undefined }): Promise<SettingsFlow | null> => {
  const searchParams = params
  const onRestartFlow = () => initFlow(searchParams, FlowType.Settings) as unknown as SettingsFlow

  if (!searchParams.flow) {
    return null
  }

  try {
    const flow = await ory.getSettingsFlow({ id: searchParams.flow?.toString() ?? '', cookie: await getCookieHeader() })

    const profileNodes = flow.ui.nodes.filter((node: UiNode) => {
      type UINodeAttributesWithType = {
        type: string
      }
      const attributes = node.attributes as UiNodeAttributes & UINodeAttributesWithType
      return node.group === 'default' || (node.group === 'profile' && (attributes.type === 'email' || attributes.type === 'submit'))
    })

    return { ...flow, ui: { ...flow.ui, nodes: profileNodes } }
  } catch (error) {
    handleFlowError({
      onRestartFlow,
      onValidationError: () => {
        captureSentryException(error as Error)
        console.error('Failed to get settings flow:', error)
      },
      onRedirect: () => {
        console.log('onRedirect')
      },
    })
    return onRestartFlow()
  }
}