UserAuthCard doesn't format the form body traits correctly

[JacobMillward]

Preflight checklist

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

Describe the bug

When submitting the a registration form using UserAuthCard, the body object returned to the callback on the onSubmit prop formats the object incorrectly. What is expected is:

{
    traits: {
        email: '[email protected]'
    },
    //... other
}

What is given is:

{
    "traits.email": '[email protected]',
    //... other
}

This means that unless care is taken, form values are not passed up to kratos correctly.

Reproducing the bug

• Use Ory Elements to create a login form connected to Ory Kratos.
• Observe the object give back in the onSubmit callback

Relevant log output

No response

Relevant configuration

No response

Version

0.0.1-beta.3

On which operating system are you observing this issue?

Other

In which environment are you deploying?

Kubernetes with Helm

Additional Context

No response

[Benehiko]

Hey @JacobMillward

Have you gotten errors form Ory Kratos when submitting the registration payload provided by Ory Elements? I believe Ory Kratos flat maps the object when giving the ui form fields.

For example:

{
  traits: {
    email: string
  }
}

will become <input type="email" name="traits.email" /> inside the UI since Kratos' flow payload returns the UI node names flat mapped as shown here https://github.com/ory/elements/blob/main/src/stories/Ory/register-flow.json#L70-L78.

[JacobMillward]

Have you gotten errors form Ory Kratos when submitting the registration payload provided by Ory Elements?

Yup I did. Kratos kept giving back the error that the email could not be empty. My workaround was to unflatten it e.g.

await kratos.updateRegistrationFlow({
    flow: String(flow?.id),
    updateRegistrationFlowBody: {
        ...formBody,
        traits: {
            email: (formBody as any)["traits.email"],
        },
    },
});

[Benehiko]

Hmm interesting :thinking: Could you share your identity schema?

[JacobMillward]

Sure. It's the example from the kratos helm configuration page

{
  "$id": "https://schemas.ory.sh/presets/kratos/identity.email.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Person",
  "type": "object",
  "properties":
    {
      "traits":
        {
          "type": "object",
          "properties":
            {
              "email":
                {
                  "type": "string",
                  "format": "email",
                  "title": "Email",
                  "ory.sh/kratos":
                    {
                      "credentials": { "password": { "identifier": true } },
                      "recovery": { "via": "email" },
                      "verification": { "via": "email" },
                    },
                },
            },
          "required": ["email"],
          "additionalProperties": false,
        },
    },
}