React and Preact example does not handle error code 422

[Benehiko]

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.
• This issue affects my Ory Cloud project.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Describe the bug

On flows that could result in an error with status code 422 we would want to redirect the user to that page or at least use some of the url data such as the flow id to retrieve the necessary data to complete the flow.

Example:

1. Login flow is initialized
2. User wants to login through webauthn
3. API returns back an error with code 422 and a redirect_url
4. React / Preact needs to redirect the user to the url / or catch the new flow id and get the new flow data in the background.
5. User is presented a followup form with the correct data
6. Submit login

Another place where this exists is Registration and Settings page with passwordless and oidc.

Reproducing the bug

Try link an oidc provider in the account settings page.

Additional Context

• elements/examples/react-spa/src/Login.tsx

  Line 32 in 9713065

  case 404:

• elements/examples/react-spa/src/Login.tsx

  Line 71 in 9713065

  case 422:

We have some functions covering this already:

• https://github.com/ory/kratos-selfservice-ui-react-nextjs/blob/593f1d3d1c2999b2c00d30ea1a05041e56abdd1a/pkg/errors.tsx#L7

[Benehiko]

This can now be closed :)

Thank you @misamu!