ory
Mark field as invalid in built-in UI when custom validation from webhook failed
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.
- [ ] I am signed up to the Ory Security Patch Newsletter.
Ory Network Project
https://strange-dhawan-7s0r5y1fu3.projects.oryapis.com
Describe your problem
We have set up a flow-interrupting webhook which returns 403 status code when our custom check for one of the registration fields fails. We return the payload as in this example: https://www.ory.sh/docs/guides/integrate-with-ory-cloud-through-webhooks#flow-interrupting-webhooks, but with “error” type.
As a result the error message is shown below the validated field (field is provided in our response as instance_ptr), but the field itself is shown as still valid (it is green instead of red).
Describe your ideal solution
Provide additional field in webhook error payload (like valid: false) and use it to set valid state of the input.
Also field can be always considered invalid if a message with the "error" type is returned for it.
Workarounds or alternatives
Have not found any.
Version
Ory Network
Additional Context
https://ory-community.slack.com/archives/C02MR4DEEGH/p1698307141585029
Current behaviour:
This is because the CSS is only checking for the HTML to emit an error based on its internal validation rules or pattern matching rules.
https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
We would need to override this when there is a message on the field of type error and re-render the field.
The CSS for this is here: https://github.com/ory/elements/blob/main/src/theme/input-field.css.ts#L12-L42
PRs are welcome! :)
