Redirection to email verification UX

[KGGaran]

Hi,

I have implemented an ory/kratos login and registration setup using ory elements. The registration requires verification of email with a code, using the standard flow.

In order to prevent unverified accounts from accessing other subdomains I am checking for session.identity?.verifiable_addresses and redirecting to the verification page if the address hasn't been verified. That all works fine.

I have however one UX concern. Whenever the user is redirected like that to the verification flow (/verification) he is required to enter his email once more before accessing the code input section of the flow. Would it be possible to read the email from the session cookie and either skip to the code part immediately or at least fill the input field with that email immediately?

Thanks for any help!

(skip this section or fill the input automatically if session exists)

[GitNimay]

Yes, you can read the email from the current Kratos session, but the session cookie itself will not directly give you the email. The cookie is opaque. You need to call Kratos’ session endpoint, usually toSession or /sessions/whoami, from your app and then read the identity data from the returned session.

For example, the email is usually available from either the identity traits or the verifiable addresses:

const session = await ory.toSession();

const email =
  session.data.identity?.verifiable_addresses?.find(
    (address) => address.via === "email" && !address.verified,
  )?.value ??
  session.data.identity?.traits?.email;

Then you can prefill the verification form in your own UI.

The part that is less clear is skipping directly to the code input when using Ory Elements. Kratos’ verification flow has states. The first step is usually the choose_method step, where the user submits the email address and Kratos sends the verification code. Only after that does the flow move to the code entry step.

So the practical options are:

Prefill the email field

If Ory Elements allows you to pass initial/default values into the verification form, use the email from the session and render the normal verification screen with that value already filled in.

Automatically submit the email

If you own the surrounding page, you can detect that there is an active session with an unverified email and programmatically submit the verification flow with that email. That should trigger Kratos to send the code and move the user to the code entry step.

Conceptually:

const session = await ory.toSession();

const email = session.data.identity?.verifiable_addresses?.find(
  (address) => address.via === "email" && !address.verified,
)?.value;

if (email && flowIsAtChooseMethodStep) {
  await ory.updateVerificationFlow({
    flow: flow.id,
    updateVerificationFlowBody: {
      method: "code",
      email,
    },
  });
}

After that, reload or update the flow from Kratos and render the next step.

Do not read the cookie directly

The session cookie should be treated as an opaque credential. It is not meant to be decoded client side. Use the Kratos session API instead.

One thing to watch out for: auto submitting the email will send a verification code. Make sure you only do it once per flow, otherwise users may get multiple emails when they refresh or revisit the page.

So the answer is: yes, prefill is possible if you fetch the current session first. Skipping the email step is not something the cookie itself enables, but you can implement the same effect by submitting the current session’s unverified email into the verification flow and then rendering the code step.