Ory elements registration form sets all fields as required

[navstyachka]

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 the bug

When rendering the UI of a registration form, the optional fields are treated as required. In our case this is phone number — it is not a required field to register, however, users are not able to register without filling in the field.

The ui.nodes response :

{
    "attributes": {
        "autocomplete": "tel",
        "disabled": false,
        "name": "traits.phone",
        "node_type": "input",
        "type": "tel"
    },
    "group": "default",
    "messages": [],
    "meta": {
        "label": {
            "context": {
                "title": "Phone Number"
            },
            "id": 1070002,
            "text": "Phone Number",
            "type": "info"
        }
    },
    "type": "input"
}

And our identity schema only requires email as a required trait:

"required": [
    "email"
],

The resulting UI treats traits.phone filed as required:

Reproducing the bug

We run our self-hosted Next.js app with all authentication pages.

The code for the registration page is the following:

<Registration
          flow={flow}
          config={config}
/>

The config is like this:

export const config: OryClientConfiguration = {
  intl: {
    locale: 'en', 
    customTranslations: {
      en: {
        'identities.messages.1040001': 'Continue ⮕',
      },
    },
  },
  project: {
    default_locale: 'en',
    default_redirect_url: process.env.REDIRECT_URL ?? '/',
    error_ui_url: '/error',
    locale_behavior: 'force_default',
    name: 'App',
    registration_enabled: true,
    verification_enabled: true,
    recovery_enabled: true,
    registration_ui_url: '/auth/registration',
    verification_ui_url: '/auth/verification,
    recovery_ui_url: '/auth/recovery,
    login_ui_url: '/auth/login,
    settings_ui_url: '/auth/settings,
  },
}

Relevant log output

Relevant configuration

Version

^1.1.0

On which operating system are you observing this issue?

None

In which environment are you deploying?

None

Additional Context

No response

[NikitaIT]

Hook useOryFormSubmit need to have:

+      transformSubmitDataUpdateRegistrationFlowBody(submitData, flowContainer)

        await onSubmitRegistration(flowContainer, config, {
          onRedirect,
          setFlowContainer: handleSuccess,
          body: submitData,
        })

function transformSubmitDataUpdateRegistrationFlowBody(
  data: UpdateRegistrationFlowBody,
  _flowContainer: FlowContextValue,
) {
  // TODO: check against flowContainer.flow.ui.nodes or schema
  // Also can be checked against defaults, but better way is to keep schema somewhere
  // TODO: add same for settings, but how can we differentiate the intent of the user to set "" as value?
  // Probably we need to check against defaults, if defaults had value then keep "" as value
  // How to differentiate null and undefined, in json schema "required" means defined, and null can be in anyOf

  // TODO: we need to run it multiple times to delete empty objects after cleanup

  const traits = data.traits as Record<string, unknown>
  if (traits) {
    Object.keys(traits).forEach((key) => {
      const value = traits[key]
      if (value === "") {
        delete traits[key]
      } else if (Array.isArray(value) && value.length === 0) {
        delete traits[key]
      } else if (typeof value === "object" && value !== null) {
        const topValue = value as Record<string, unknown>
        const keys = Object.keys(topValue)
        if (keys.length === 0) {
          delete traits[key]
        } else {
          keys.forEach((subKey) => {
            const subValue = topValue[subKey]
            if (subValue === "") {
              delete topValue[subKey]
            }
          })
        }
      }
    })
  }
}

Example from docs for after_registration schema.jsonnet needs to be:

function(ctx)
  if 'traits' in ctx.identity && 'email' in ctx.identity.traits && std.isString(ctx.identity.traits.email) && std.startsWith(ctx.identity.traits.email, 'test-') then
    error 'cancel'
  else
    ctx

Initial form values needs to be keeped.