Accept a verification or recovery code pasted with whitespace around it

src/auth/flow-view.test.ts

@@ -100,9 +100,8 @@ test("collects oidc nodes as SSO providers (text logo = initial), keeping csrf a
   assert.deepEqual(view.buttons, [{ label: "Sign in", name: "method", value: "password" }]);
 });
 
-test("the code field guards a pasted space: one-time-code autofill + numeric inputmode + digits-only pattern", () => {
-  // Verification/recovery enter a numeric OTP. Kratos doesn't trim, so a stray pasted space makes it
-  // reject the code as "invalid"; a digits-only pattern blocks that in the browser before submit.
+test("the code field takes a pasted code: one-time-code autofill + numeric inputmode + digits, whitespace around them allowed", () => {
+  // The host trims the code before Kratos sees it (routes.ts), so only a stray non-digit is refused.
   const view = buildFlowView(
     flow([
       node({ name: "csrf_token", type: "hidden", value: "tok" }),
@@ -113,18 +112,26 @@ test("the code field guards a pasted space: one-time-code autofill + numeric inp
   );
   assert.deepEqual(view.fields.find((f) => f.name === "code"), {
     autocomplete: "one-time-code", // Kratos sends none for the OTP node — enable OS/email autofill
-    hint: "Digits only — no spaces.", // the pattern refusal alone reads as a bare "match the requested format"
+    hint: "Digits only.", // the pattern refusal alone reads as a bare "match the requested format"
     icon: "i-shield",
     id: "field-code",
     inputmode: "numeric",
     label: "Verification code",
     name: "code",
-    pattern: "[0-9]*",
+    pattern: "\\s*[0-9]*\\s*",
     required: true,
     type: "text",
   });
 });
 
+test("the code flows post to the host, which trims the code; every other flow posts to Kratos", () => {
+  for (const type of ["recovery", "verification"] as const) assert.equal(buildFlowView(flow([]), type).action, `/${type}?flow=f1`);
+  for (const type of ["login", "registration", "settings"] as const) {
+    assert.equal(buildFlowView(flow([]), type).action, "http://127.0.0.1:4433/self-service/login?flow=f1");
+  }
+  assert.equal(buildFlowView({ ...flow([]), id: "a&b" }, "recovery").action, "/recovery?flow=a%26b");
+});
+
 test("chrome varies per flow type: registration alt, recovery back link", () => {
   const reg = buildFlowView(flow([]), "registration");
   assert.equal(reg.title, "Create account");

src/auth/flow-view.ts

@@ -1,8 +1,8 @@
 // Kratos flow → themed view model. Pure: turns a fetched self-service Flow
 // (src/auth/kratos-public.ts) into the data views/auth.ejs renders — hidden inputs (incl. the
 // CSRF token), themed fields, submit buttons, tone-mapped messages, and one SSO button per
-// configured `oidc` provider. The form posts straight back to `flow.ui.action`, so Kratos
-// owns its CSRF; we only render and map errors. No providers configured ⇒ no SSO buttons.
+// configured `oidc` provider. The form posts to `flow.ui.action`, except a CODE_FLOWS form, which
+// posts to the host first; Kratos owns the CSRF of both. No providers configured ⇒ no SSO buttons.
 
 import { ENGLISH } from "../i18n/english.ts";
 import type { Translate } from "../i18n/translate.ts";
@@ -17,7 +17,7 @@ export interface FlowField {
   inputmode?: string; // virtual-keyboard hint (e.g. "numeric" for the OTP code)
   label: string;
   name: string;
-  pattern?: string; // client-side validity regex; blocks a pasted space before it reaches Kratos
+  pattern?: string; // client-side validity regex
   required?: boolean;
   type: string;
   value?: string;
@@ -69,6 +69,9 @@ export const AUTH_FLOWS: Record<string, FlowType> = {
   "/verification": "verification",
 };
 
+// The flows that take an emailed one-time code, whose form posts to the host to have it trimmed.
+export const CODE_FLOWS: ReadonlySet<FlowType> = new Set(["recovery", "verification"]);
+
 // Where each flow's card links; its words come from the catalog under `auth.<flow>.*`.
 const LINKS: Record<FlowType, { alt?: string; back?: boolean }> = {
   login: { alt: "/registration" },
@@ -123,9 +126,9 @@ const ssoLogo = (value: string): string => (value.charAt(0) || "?").toUpperCase(
 
 function toField(node: UiNode, name: string, type: string, t: Translate): FlowField {
   const value = str(node.attributes["value"]);
-  // The recovery/verification one-time code: numeric, and Kratos doesn't trim it, so a stray pasted
-  // space makes it reject the code as "invalid". A digits-only pattern + numeric keypad block that in
-  // the browser; one-time-code enables OS/email autofill (Kratos sends no autocomplete for the node).
+  // The recovery/verification one-time code: numeric, so a numeric keypad and a digits pattern, which
+  // allows the whitespace a paste brings since the host trims it (routes.ts → codeFlowSubmit).
+  // one-time-code enables OS/email autofill (Kratos sends no autocomplete for the node).
   const isCode = name === "code";
   const autocomplete = str(node.attributes["autocomplete"]) ?? (isCode ? "one-time-code" : undefined);
   const icon = iconFor(name, type);
@@ -140,7 +143,7 @@ function toField(node: UiNode, name: string, type: string, t: Translate): FlowFi
     ...(autocomplete ? { autocomplete } : {}),
     ...(errorMsg ? { error: { text: kratosText(t, errorMsg.text, idKey(errorMsg.id)) } } : {}),
     ...(icon ? { icon } : {}),
-    ...(isCode ? { hint: t("auth.field.code.hint"), inputmode: "numeric", pattern: "[0-9]*" } : {}),
+    ...(isCode ? { hint: t("auth.field.code.hint"), inputmode: "numeric", pattern: "\\s*[0-9]*\\s*" } : {}),
     ...(node.attributes["required"] === true ? { required: true } : {}),
     ...(value ? { value } : {}),
   };
@@ -174,7 +177,7 @@ export function buildFlowView(flow: Flow, type: FlowType, t: Translate = ENGLISH
   }
 
   return {
-    action: flow.ui.action,
+    action: CODE_FLOWS.has(type) ? `/${type}?flow=${encodeURIComponent(flow.id)}` : flow.ui.action,
     buttons,
     fields,
     hidden,

src/auth/kratos-public.test.ts

@@ -1,6 +1,6 @@
 // Kratos public-API client: typed fetch wrappers over Ory Kratos' public endpoints.
 // Guards the request contracts (URLs, JSON-accept, cookie relay) and the result mapping
-// (200/401/4xx, validation-flow vs success, tokenized JWT). Live wiring is verified by the
+// (200/401/4xx, a submit's redirect, tokenized JWT). Live wiring is verified by the
 // flow pages; these catch contract drift with a mock fetch.
 import { test } from "node:test";
 import assert from "node:assert/strict";
@@ -57,35 +57,27 @@ test("getFlow throws a KratosError carrying the status when the flow is gone (41
   );
 });
 
-test("submitFlow POSTs urlencoded to the action and reports success + relays Set-Cookie", async () => {
-  const { calls, fetchImpl } = recorder(() => res(200, { session: { active: true } }, ["plainpages_session=s; Path=/"]));
+test("submitFlow POSTs the form to the flow on Kratos' own base URL, as a browser would, and relays the redirect + Set-Cookie", async () => {
+  const { calls, fetchImpl } = recorder(() => new Response(null, {
+    headers: new Headers([["location", "http://app/settings?flow=s1"], ["set-cookie", "plainpages_session=s; Path=/"]]),
+    status: 303,
+  }));
   const out = await createKratosPublic({ baseUrl: BASE, fetchImpl })
-    .submitFlow(`${BASE}/self-service/login?flow=f`, { body: "identifier=a&password=b", cookie: "csrf_token=abc" });
-  assert.equal(out.ok, true);
-  assert.equal(out.status, 200);
-  assert.deepEqual(out.setCookie, ["plainpages_session=s; Path=/"]);
+    .submitFlow("recovery", "f 1", { body: "code=123456&method=code", cookie: "csrf_token=abc" });
+  assert.deepEqual(out, { location: "http://app/settings?flow=s1", setCookie: ["plainpages_session=s; Path=/"], status: 303 });
+  assert.equal(calls[0]!.url, `${BASE}/self-service/recovery?flow=f+1`);
   assert.equal(calls[0]!.method, "POST");
+  // Not JSON: Kratos then answers with the same 303s a browser posting to it directly would get.
+  assert.equal(calls[0]!.headers.get("accept"), "text/html");
   assert.equal(calls[0]!.headers.get("content-type"), "application/x-www-form-urlencoded");
-  assert.equal(calls[0]!.body, "identifier=a&password=b");
+  assert.equal(calls[0]!.headers.get("cookie"), "csrf_token=abc");
+  assert.equal(calls[0]!.body, "code=123456&method=code");
 });
 
-test("submitFlow returns the re-rendered flow (no throw) on a 400 validation error", async () => {
-  const flow = { id: "f", ui: { action: "x", messages: [{ id: 4000006, text: "invalid credentials", type: "error" }], method: "POST", nodes: [] } };
-  const { fetchImpl } = recorder(() => res(400, flow));
-  const out = await createKratosPublic({ baseUrl: BASE, fetchImpl }).submitFlow(`${BASE}/x`, { body: "x=1" });
-  assert.equal(out.ok, false);
-  assert.equal(out.status, 400);
-  assert.deepEqual(out.body, flow);
-});
-
-test("submitFlow surfaces the redirect target — Location header or a 422 redirect_browser_to body", async () => {
-  const k = (handler: () => Response) => createKratosPublic({ baseUrl: BASE, fetchImpl: recorder(handler).fetchImpl });
-  const viaHeader = await k(() => new Response(null, { headers: new Headers({ location: "http://app/" }), status: 303 }))
-    .submitFlow(`${BASE}/x`, { body: "x=1" });
-  assert.equal(viaHeader.location, "http://app/");
-  const viaBody = await k(() => res(422, { redirect_browser_to: "http://app/login?flow=next" }))
-    .submitFlow(`${BASE}/x`, { body: "x=1" });
-  assert.equal(viaBody.location, "http://app/login?flow=next");
+test("submitFlow reports a 4xx without a redirect as a null location, and throws on a Kratos 5xx", async () => {
+  const k = (status: number) => createKratosPublic({ baseUrl: BASE, fetchImpl: recorder(() => res(status, { error: "x" })).fetchImpl });
+  assert.deepEqual(await k(400).submitFlow("verification", "f", { body: "x=1" }), { location: null, setCookie: [], status: 400 });
+  await assert.rejects(k(502).submitFlow("verification", "f", { body: "x=1" }), (e: unknown) => e instanceof KratosError && e.status === 502);
 });
 
 test("whoami returns the session on 200 (cookie forwarded) and null on 401", async () => {

src/auth/kratos-public.ts

@@ -51,9 +51,7 @@ export interface LogoutFlow {
 }
 
 export interface FlowSubmission {
-  body: unknown; // parsed JSON: the re-rendered flow on 400, the success payload on 200
-  location: string | null; // redirect target (Location header, or a 422 redirect_browser_to)
-  ok: boolean; // status === 200
+  location: string | null; // where Kratos sends the browser next
   setCookie: string[];
   status: number;
 }
@@ -74,23 +72,10 @@ export interface KratosPublic {
   createLogoutFlow(opts?: { cookie?: string }): Promise<LogoutFlow | null>; // null ⇒ no active session (401)
   getFlow(type: FlowType, id: string, opts?: { cookie?: string }): Promise<Flow>;
   initBrowserFlow(type: FlowType, opts?: { cookie?: string; returnTo?: string }): Promise<FlowInit>;
-  submitFlow(action: string, opts: { body: string; contentType?: string; cookie?: string }): Promise<FlowSubmission>;
+  submitFlow(type: FlowType, flowId: string, opts: { body: string; cookie?: string }): Promise<FlowSubmission>;
   whoami(opts?: { cookie?: string; tokenizeAs?: string }): Promise<Session | null>;
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-function parseBody(text: string): unknown {
-  if (!text) return null;
-  try {
-    return JSON.parse(text);
-  } catch {
-    return text;
-  }
-}
-
 export function createKratosPublic(config: { baseUrl: string; fetchImpl?: typeof fetch }): KratosPublic {
   const base = config.baseUrl.replace(/\/+$/, "");
   const http = config.fetchImpl ?? fetch;
@@ -129,16 +114,17 @@ export function createKratosPublic(config: { baseUrl: string; fetchImpl?: typeof
       return (await res.json()) as Flow;
     },
 
-    async submitFlow(action, opts) {
-      const h = headers(opts.cookie);
-      h["content-type"] = opts.contentType ?? "application/x-www-form-urlencoded";
-      // Manual redirect so we can read a 303 Location instead of following it server-side.
-      const res = await http(action, { body: opts.body, headers: h, method: "POST", redirect: "manual" });
-      const body = parseBody(await res.text());
-      const location =
-        res.headers.get("location") ??
-        (isRecord(body) && typeof body["redirect_browser_to"] === "string" ? body["redirect_browser_to"] : null);
-      return { body, location, ok: res.status === 200, setCookie: res.headers.getSetCookie(), status: res.status };
+    async submitFlow(type, flowId, opts) {
+      const url = new URL(`${base}/self-service/${type}`);
+      url.searchParams.set("flow", flowId);
+      // Asked for HTML, Kratos answers with the redirects a browser posting to it directly gets, so
+      // every success/error/expiry branch stays Kratos'. Its nosurf demands a Referer, which this
+      // POST lacks, only on an https request: valid while KRATOS_PUBLIC_URL is in-cluster http.
+      const h = { ...headers(opts.cookie), accept: "text/html", "content-type": "application/x-www-form-urlencoded" };
+      const res = await http(url, { body: opts.body, headers: h, method: "POST", redirect: "manual" });
+      if (res.status >= 500) throw new KratosError(`Kratos submit ${type} flow failed (${res.status})`, res.status, await res.text());
+      await res.body?.cancel();
+      return { location: res.headers.get("location"), setCookie: res.headers.getSetCookie(), status: res.status };
     },
 
     async whoami(opts = {}) {

src/auth/routes.ts

@@ -1,5 +1,5 @@
 // The built-in auth/OAuth2 endpoints as named handlers on the host's internal route table
-// (src/http/builtin-routes.ts): the themed Kratos self-service pages, the Hydra OAuth2
+// (src/http/builtin-routes.ts): the themed Kratos self-service pages and their code submits, the Hydra OAuth2
 // login/consent/logout challenges, login completion, the first-party logout, and Kratos'
 // flow-error sink. buildAuthRoutes registers only what the wired clients support — a missing
 // client means the path simply doesn't exist (404). `view` results render the core views.
@@ -8,11 +8,11 @@ import type { BuiltinRoute, RequestCsrf } from "../http/builtin-routes.ts";
 import type { RequestContext } from "../http/context.ts";
 import { CSRF_FIELD } from "./csrf.ts";
 import { chosenLocale } from "../i18n/locale.ts";
-import { AUTH_FLOWS, buildFlowView } from "./flow-view.ts";
+import { AUTH_FLOWS, buildFlowView, CODE_FLOWS } from "./flow-view.ts";
 import { HydraError, type HydraAdmin } from "./hydra-admin.ts";
 import type { KetoClient } from "./keto-client.ts";
 import type { KratosAdmin } from "./kratos-admin.ts";
-import { type Flow, type FlowType, KratosError, type KratosPublic } from "./kratos-public.ts";
+import { type Flow, type FlowSubmission, type FlowType, KratosError, type KratosPublic } from "./kratos-public.ts";
 import { clearSessionCookie, completeLogin, sessionCookie } from "./login.ts";
 import type { MenuConfig } from "../ui/menu-config.ts";
 import { acceptConsent, rejectConsent, resolveConsentChallenge } from "./oauth-consent.ts";
@@ -114,6 +114,29 @@ function flowPage(kratos: KratosPublic, flowType: FlowType, secureCookies: boole
   };
 }
 
+// A code flow's POST (flow-view.ts → CODE_FLOWS): trim the pasted one-time code, which Kratos would
+// refuse with its surrounding whitespace, and relay the rest to Kratos and its redirect back. Kratos'
+// own csrf_token field guards the POST, so the host checks no token of its own.
+function codeFlowSubmit(kratos: KratosPublic, flowType: FlowType): BuiltinRoute["handler"] {
+  return async (ctx: RequestContext): Promise<RouteResult> => {
+    const pathname = ctx.url.pathname;
+    const flowId = ctx.url.searchParams.get("flow");
+    if (!flowId) return { redirect: pathname };
+    const form = await readFormBody(ctx.req);
+    const code = form.get("code");
+    if (code !== null) form.set("code", code.trim());
+    const cookie = ctx.req.headers.cookie;
+    let submitted: FlowSubmission;
+    try {
+      submitted = await kratos.submitFlow(flowType, flowId, { body: form.toString(), ...(cookie ? { cookie } : {}) });
+    } catch (err) {
+      return flowFailure(err, ctx, flowType);
+    }
+    if (submitted.setCookie.length) ctx.res.appendHeader("set-cookie", submitted.setCookie);
+    return { redirect: submitted.location ?? `${pathname}?flow=${encodeURIComponent(flowId)}` };
+  };
+}
+
 // OAuth2 login challenge: Hydra hands the browser here when another app logs in *through* us.
 // Resolve it via the Kratos session and accept; an unauthenticated user bounces to our themed
 // login and returns here once signed in. Provider-only.
@@ -250,6 +273,7 @@ export function buildAuthRoutes({ hydra, keto, kratos, kratosAdmin, menu, secure
   if (kratos) {
     for (const [path, flowType] of Object.entries(AUTH_FLOWS)) {
       routes.push({ handler: flowPage(kratos, flowType, secureCookies), method: "GET", path, public: true });
+      if (CODE_FLOWS.has(flowType)) routes.push({ handler: codeFlowSubmit(kratos, flowType), method: "POST", path, public: true });
     }
     routes.push({ handler: logout(kratos, secureCookies), method: "POST", path: "/logout", public: true });
   }

src/http/app-auth.test.ts

@@ -6,7 +6,7 @@ import { CSRF_COOKIE, issueCsrfToken } from "../auth/csrf.ts";
 import { HydraError, type HydraAdmin } from "../auth/hydra-admin.ts";
 import { staticJwks } from "../auth/jwks.ts";
 import type { Identity } from "../auth/kratos-admin.ts";
-import { KratosError, type Flow, type FlowType, type KratosPublic, type Session, type UiNode } from "../auth/kratos-public.ts";
+import { KratosError, type Flow, type FlowSubmission, type FlowType, type KratosPublic, type Session, type UiNode } from "../auth/kratos-public.ts";
 import { SESSION_COOKIE } from "../auth/login.ts";
 import { createI18n } from "../i18n/runtime.ts";
 import { loadI18n } from "../i18n/load.ts";
@@ -389,3 +389,50 @@ test("OAuth2 challenge endpoints degrade identically: stale Hydra 4xx → 400, o
   }
 });
 
+
+// The code flows post to the host, which trims the code (a pasted one often carries whitespace that
+// Kratos would refuse) and relays the rest of the browser's POST to Kratos verbatim.
+test("code-flow POST: the host trims the code, relays the POST to Kratos and Kratos' redirect + cookies back", async (t) => {
+  const calls: { body: string; cookie: string | undefined; flowId: string; type: FlowType }[] = [];
+  let answer: () => Promise<FlowSubmission> = async () =>
+    ({ location: "http://localhost:3000/settings?flow=s1", setCookie: ["plainpages_session=s; Path=/; HttpOnly"], status: 303 });
+  const kratos: KratosPublic = {
+    ...mockKratos(async () => { throw new Error("unused"); }),
+    submitFlow: async (type, flowId, opts) => { calls.push({ body: opts.body, cookie: opts.cookie, flowId, type }); return answer(); },
+  };
+  const app = createApp({ jwks: staticJwks([ecJwk]), kratos });
+  await new Promise<void>((r) => app.listen(0, r));
+  t.after(() => app.close());
+  const url = `http://localhost:${(app.address() as AddressInfo).port}`;
+  const post = (path: string, body: string) => fetch(url + path, {
+    body, headers: { "content-type": "application/x-www-form-urlencoded", cookie: "csrf_token_x=c" }, method: "POST", redirect: "manual",
+  });
+
+  const res = await post("/recovery?flow=f1", "csrf_token=tok&code=%C2%A0123456%09%0A&method=code");
+  assert.equal(res.status, 303);
+  assert.equal(res.headers.get("location"), "http://localhost:3000/settings?flow=s1");
+  assert.match(res.headers.get("set-cookie") ?? "", /plainpages_session=s/);
+  assert.deepEqual(calls[0], { body: "csrf_token=tok&code=123456&method=code", cookie: "csrf_token_x=c", flowId: "f1", type: "recovery" });
+
+  // The first step has no code field; its body passes through unchanged.
+  await post("/verification?flow=f2", "csrf_token=tok&email=a%40b.c&method=code");
+  assert.deepEqual(calls[1], { body: "csrf_token=tok&email=a%40b.c&method=code", cookie: "csrf_token_x=c", flowId: "f2", type: "verification" });
+
+  // No ?flow= → start over rather than post a flow-less submit.
+  const noFlow = await post("/recovery", "code=1");
+  assert.equal(noFlow.headers.get("location"), "/recovery");
+  assert.equal(calls.length, 2);
+
+  // Kratos answered without a redirect → back to the flow, whose page shows its state.
+  answer = async () => ({ location: null, setCookie: [], status: 400 });
+  assert.equal((await post("/recovery?flow=f1", "code=1")).headers.get("location"), "/recovery?flow=f1");
+
+  // Kratos down → the honest 503 the flow pages render, not a 500.
+  answer = async () => { throw new KratosError("bad gateway", 502, ""); };
+  assert.equal((await post("/recovery?flow=f1", "code=1")).status, 503);
+  answer = async () => { throw new TypeError("fetch failed"); };
+  assert.equal((await post("/recovery?flow=f1", "code=1")).status, 503);
+
+  // Sign-in still posts straight to Kratos: the host takes no POST there.
+  assert.notEqual((await post("/login?flow=f1", "x=1")).status, 303);
+});

src/i18n/locales/en-US.ts

@@ -9,7 +9,7 @@ const messages = {
   "auth.continue": "Continue",
   // Kratos labels its own form fields; these translate the ones the built-in identity schema uses,
   // keyed on the input name. A deployment's extra traits keep Kratos' label until a plugin covers them.
-  "auth.field.code.hint": "Digits only — no spaces.",
+  "auth.field.code.hint": "Digits only.",
   "auth.field.email": "Email",
   "auth.field.identifier": "Email",
   "auth.field.password": "Password",

src/i18n/locales/sv-SE.ts

@@ -2,7 +2,7 @@ import type { CoreMessages } from "./en-US.ts";
 
 const messages: CoreMessages = {
   "auth.continue": "Fortsätt",
-  "auth.field.code.hint": "Endast siffror — inga mellanslag.",
+  "auth.field.code.hint": "Endast siffror.",
   "auth.field.email": "E-postadress",
   "auth.field.identifier": "E-postadress",
   "auth.field.password": "Lösenord",