Recovery flow broken

[hyperknot]

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 the Recovery flow, once you enter the code, it breaks the app.

The reason is that it receives a 422 about a redirect which is not handled.

Bug 2:
After this, if the user clicks the Submit again, the app goes in an infinite redirect/reload bug. It's quite hard to stop it, easiest way is to close the browser tab altogether.

Reproducing the bug

Run official Next.js example.
Try to complete the Recovery flow, enter Code.

Version

master

I'm using Ory Network + ory tunnel as in the official example.

[hyperknot]

I managed to catch the error by rewriting it to async try-catch.

const submitFlow = async (values: UpdateRecoveryFlowBody) => {
    try {
      const { data } = await ory.updateRecoveryFlow({
        flow: String(flow?.id),
        updateRecoveryFlowBody: values,
      })
      setFlow(data)
    } catch (e) {
      if (e.isAxiosError) {
        try {
          await handleError(e)
        } catch (e) {
          if (e.response?.status === 400) {
            setFlow(e.response?.data)
            return
          }
          console.error('unhandled handleError', e)   // <------ this line
        }
      } else {
        console.error('non-axios error', e)
      }
      window.location.href = '/'
    }
  }

[meotimdihia]

I got this problem too.

[misamu]

This has been fixed with the latest merged code.

[Benehiko]

This should be fixed and is now tested https://github.com/ory/elements/blob/main/examples/nextjs-spa/e2e/recovery.spec.ts