Verification code loop

[Big-Brother-Man]

Hi all, I hope each and everyone of you are doing well.

TL;DR
Not able to complete verification, when I try to complete verification, a new code gets sent back to the user (but the flow id remains the same unless it is expired).

For clarification I got 2 pages.

1. send email using createBrowserVerificationFlow and updateVerificationFlow without code. It captures the flow id from updateVerificationFlow response and passes it to the next page as a query parameter.
2. This page is unaware of the first page. Except the flow id passed to it. It initialise the flow id by using getVerificationFlow witch adds csrf etc.. This page has an input to taka code sent to the user, once submitted it uses the code submitted to complete updateVerificationFlow with token submitted from the user.

Here is the second page submit that we pass to ORY on our node backend

verify = {
  token: '189172',
  cookie: 'csrf_token_8c180b7305b464ed471e5da510437c9609b17eca03855b9e684f0d2f6023ce7e=3y1R0+rLA816mJstBxVB/vJEP/6diZmegqHUa4qEJ38=; __cflb=0pg1RNhmCEz1qZ9zaRAquFJnju9FbdwJVbpQqdFH',
  flow: 'e4921bb2-336c-43dd-b613-e0339902ddbb',
  updateVerificationFlowBody: {
    method: 'code',
    email: '[email protected]',
    csrf_token: '9vH30I2eP+1PW36NjlmyBYEFA5A+dsd7o1/ju/QwKdwp3KYDZ1U8IDXD5aCJTPP7c0E8bqP/XuUh/jfQfrQOow=='
  }
}

const verifyUser = await frontend.updateVerificationFlow(verify);

Using wireshark here is the post that goes to ORY

::1 ::1 HTTP/JSON 707 POST /self-service/verification?flow=e4921bb2-336c-43dd-b613-e0339902ddbb&token=189172 HTTP/1.1 , JavaScript Object Notation (application/json)

{"method":"code","email":"[email protected]","csrf_token":"9vH30I2eP+1PW36NjlmyBYEFA5A+dsd7o1/ju/QwKdwp3KYDZ1U8IDXD5aCJTPP7c0E8bqP/XuUh/jfQfrQOow=="}

Once the post is done ory responds with

user verified {
  id: 'e4921bb2-336c-43dd-b613-e0339902ddbb',
  type: 'browser',
  expires_at: '2023-02-15T21:09:20.523444Z',
  issued_at: '2023-02-15T20:39:20.523444Z',
  request_url: 'http://localhost:4000/self-service/verification/browser',
  active: 'code',
  ui: {
    action: 'http://localhost:4000/self-service/verification?flow=e4921bb2-336c-43dd-b613-e0339902ddbb',
    method: 'POST',
    nodes: [ [Object], [Object], [Object], [Object], [Object] ],
    messages: [ [Object] ]
  },
  state: 'sent_email'
}

Which means I am back to receiving a new code if the verification flow has not expired. What am I doing wrong?

Any help would be deeply appreciated.

Note: I have also tried it purely front end it gives the same result. I am most likely missing something basic.

SvelteKit page

<script>
import {
    user
} from "../../../store";
import {
    onMount
} from "svelte";
import {
    frontend
} from "../../../utilities/Authentication/oryClient";
import {
    getCsrfToken
} from "../../../utilities/Authentication/oryGetCsrfToken";
import { FrontendApiUpdateVerificationFlowRequest } from "@ory/client";


export let data;
export let form;

if (data.user) {
    user.update(x => x = data.user);
}

   async function  onSubmit(e) {
    const formData = new FormData(e.target);

    const data = {};
    for (let field of formData) {
      const [key, value] = field;
      data[key] = value;
    }
    console.log("data",data)


       const verify = {
           token: data.code,
           flow: data.flowId,
           updateVerificationFlowBody: {
               method: "code",
               email: "[email protected]",
               csrf_token: data.csrf,
           },
       }

       const verifyUser = await frontend.updateVerificationFlow(verify,{
           withCredentials: true,
       } );

    console.log(verifyUser)
   }

let csrf = null;
let flowId = data.flow;

onMount(async () => {

    const {
        data: verify
    } = await frontend.getVerificationFlow({
            id: flowId
        }, {
            withCredentials: true
        })
        .catch(error => {
            //Todo: log this error and throw it to the client error handler
            console.log(error, "hello?")
        });
    console.log("verify", data)
    csrf = getCsrfToken(verify.ui) ?? "";
});
console.log("my data,", data, form)
</script>

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-primary py-12">
    <div class="relative bg-white px-6 pt-10 pb-9 shadow-xl mx-auto w-full max-w-lg rounded-2xl">
        <div class="mx-auto flex w-full max-w-md flex-col space-y-10">
            <div class="flex flex-col items-center justify-center text-center space-y-2">
                <div class="font-semibold text-3xl">
                    <p>Email Verification</p>
                </div>
                <div class="flex flex-row text-sm font-medium text-gray-400">
                    <p>We have sent a code to your email {data.user?.traits.email}</p>
                </div>
            </div>

                <form  method="POST" on:submit|preventDefault={onSubmit}>
                    <input hidden="true" name="flowId" value="{flowId}">    
                    <input hidden="true" name="csrf" value="{csrf}">
                    <div class="flex flex-col space-y-10">
                        <div class="flex flex-row items-center justify-between mx-auto w-full max-w-xs">
                            <div class="w-full h-12 ">
                                <input class="w-full h-full flex flex-col items-center justify-center text-center border-b border-primary text-lg focus:bg-primary-content" type="text" minlength="6" maxlength="6" name="code">
                            </div>
                        </div>
                    </div>

                    <div class="mt-2 flex flex-col justify-center">
                        {#if form?.errors?.code}
                        <label for="code" class="label">
                            <div class="mt-2">
                                {#each form?.errors?.code as error}
                                <div class="label-text-alt text-error mt-1">{error}</div>
                                {/each}
                            </div>
                        </label>
                        {/if}

                        {#if form?.errors?.topLevelErrors}
                        <label for="topLevelErrors" class="label">

                            <div class="mt-2">
                                {#each form?.errors?.topLevelErrors as error}
                                <div class="label-text-alt text-error mt-1">{error}</div>
                                {/each}
                            </div>

                        </label>
                        {/if}

                        <!--show either flow or csrf error to the user not both -->
                        {#if form?.errors?.flowId}
                        <label for="flowId" class="label">
                            <div class="mt-2">
                                {#each form?.errors?.flowId as error}
                                <div class="label-text-alt text-error mt-1">{error}</div>
                                {/each}
                            </div>
                        </label>
                        {/if}

                        {#if form?.errors?.csrf && !form?.errors?.flowId}
                        <label for="csrf" class="label">
                            <div class="mt-2">
                                {#each form?.errors?.csrf as error}
                                <div class="label-text-alt text-error mt-1">{error}</div>
                                {/each}
                            </div>
                        </label>
                        {/if}

                    </div>
                    <div class="flex flex-col space-y-5">
                        <div>
                            <button class="flex flex-row items-center justify-center text-center w-full border rounded-xl outline-none py-5 bg-blue-700 border-none text-white text-sm shadow-sm">
                                Verify Account
                            </button>
                        </div>

                        <div class="flex flex-row items-center justify-center text-center text-sm font-medium space-x-1 text-gray-500">
                            <p>Didn't recieve code?</p> <a class="flex flex-row items-center text-blue-600" href="http://" target="_blank" rel="noopener noreferrer">Resend</a>
                        </div>
                    </div>
                </form>
        </div>
    </div>
</div>

[Big-Brother-Man]

Hey All I was able to solve this issue,

It seems the documents for the api is not updated for verification flow.

This below passes verification and doesn't not resend email (assuming the code is correct and flow is not expired).

   const verify = {
           flow: data.flowId,
           updateVerificationFlowBody: {
               method: "code",
               email: "[email protected]",
               csrf_token: data.csrf,
               code: data.code
           },
       }

       const verifyUser = await frontend.updateVerificationFlow(verify,{
           withCredentials: true,
       } );

Came to the answer after going over recovery flow which matches the above when completing. Token has been removed since we are using code flow.

Can we update the documents for the future users? More than happy to do it if someone can point me to it.

Go is not a language I am familiar with but happy to help!

[kmherrmann]

Thanks @Big-Brother-Man for these details, this is very helpful - and sorry for the tedious debugging experience.

@jonas-jonas @tomekpapiernik Can you please take a look and update the docs accordingly? Thanks!