Deduplicate registration nodes

[hperl]

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] I have joined the Ory Community Slack.
• [X] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Nodes from the traits are duplicated if multiple login strategies exist. Screenshot:

Describe your ideal solution

User-facing

Registration will happen in two user-visible steps:

1. User is prompted for the traits (email, name, whatever is configured). Traits are submitted and validated.
2. User is prompted to give a credential. For example:
   • Password: Password input and submit button
   • Passkey: “Create Passkey” button
   • Code: “Send one-time code” button

Software design

We achieve the above through a new “traitsonly” strategy which just renders the default nodes and a button to submit them. On submission, the strategy will write the traits to the flow (internalcontext), and then set the UI nodes to what the other strategies return (except for the default nodes, which were already covered).

A PreRegistrationHook will be used to remove the nodes of the other strategies (like the password field) store them into the internal context of the flow to retrieve once the traits have been submitted.

Selecting the credential is then covered by rendering the nodes of the individual strategies. Some schemas probably need to be adapted to cover the case where the traits have been pre-submitted.

The pre-submitted traits can either be queried in the concrete strategy by reading from the internal context, or injected back into the updateRegistration request form in updateRegistrationFlow (which will simulate a one-step registration to the concrete strategy). Not sure 🤷.

Workarounds or alternatives

• Leave it as is.
• Have a JS tab bar on top for which you select the credential strategy you want. For example, with password and passkey enabled, you have a tab bar with “password” and “passkey” up top, and selecting each tab will yield the form for this strategy. This can be done purely in the hosted UI with JS, falling back to how it looks right now.

Version

master

Additional Context

No response