Test ZITADEL username resubmit guard

Author: terion-labs

tests/integration/assertions/browser.test.ts

@@ -1,6 +1,8 @@
 import { basename } from "node:path";
 import { describe, expect, test } from "bun:test";
+import { chromium } from "playwright";
 import {
+  __browserTestHooks,
   bodyContainsAnyMarker,
   bodyContainsDenialText,
   bodyContainsHttpErrorText,
@@ -199,4 +201,42 @@ describe("browser assertion helpers", () => {
       )
     ).toBe(false);
   });
+
+  test("resubmits username only while still on the ZITADEL username route", async () => {
+    const browser = await chromium.launch({ headless: true });
+    try {
+      const page = await browser.newPage();
+      await page.route("**/*", (route) =>
+        route.fulfill({
+          contentType: "text/html",
+          body: [
+            "<form>",
+            '<input data-testid="username-text-input" value="">',
+            '<button type="submit">Continue</button>',
+            "</form>",
+            "<script>",
+            "window.submits = 0;",
+            "document.querySelector('form').addEventListener('submit', (event) => { event.preventDefault(); window.submits += 1; });",
+            "</script>"
+          ].join("")
+        })
+      );
+
+      await page.goto("http://issuer.example.test/ui/v2/login/loginname?requestId=oidc_123");
+      await __browserTestHooks.resubmitUsernameIfStillOnUsernameStep(page, "agent@example.test");
+      expect(await page.locator('[data-testid="username-text-input"]').inputValue()).toBe("agent@example.test");
+      expect(await page.evaluate(() => (window as unknown as { submits: number }).submits)).toBe(1);
+
+      await page.goto("http://issuer.example.test/ui/v2/login/password?requestId=oidc_123");
+      await page.locator('[data-testid="username-text-input"]').fill("");
+      await page.evaluate(() => {
+        (window as unknown as { submits: number }).submits = 0;
+      });
+      await __browserTestHooks.resubmitUsernameIfStillOnUsernameStep(page, "agent@example.test");
+      expect(await page.locator('[data-testid="username-text-input"]').inputValue()).toBe("");
+      expect(await page.evaluate(() => (window as unknown as { submits: number }).submits)).toBe(0);
+    } finally {
+      await browser.close();
+    }
+  });
 });

tests/integration/assertions/browser.ts

@@ -117,16 +117,9 @@ async function waitForPasswordInputAfterUsernameSubmit(page: Page, usernameSelec
 
     if (isUsernameLoginStep(currentUrl) && isIdentityLoginInputPage(currentUrl, targetHost)) {
       const now = Date.now();
-      if (now - lastResubmit > 5000 && await canResubmitUsername(page, usernameSelector)) {
+      if (now - lastResubmit > 5000) {
         lastResubmit = now;
-        if (isPasswordLoginStep(page.url())) {
-          continue;
-        }
-        await typeInto(page, usernameSelector, userEmail);
-        if (isPasswordLoginStep(page.url())) {
-          continue;
-        }
-        await submitIdentityForm(page, usernameSelector, USERNAME_SUBMIT_SELECTORS);
+        await resubmitUsernameIfStillOnUsernameStep(page, userEmail);
         await page.waitForTimeout(1000);
         continue;
       }
@@ -160,15 +153,54 @@ async function visiblePasswordInputSelector(page: Page, timeoutMs: number): Prom
   return undefined;
 }
 
-async function canResubmitUsername(page: Page, usernameSelector: string): Promise<boolean> {
-  if (!isUsernameLoginStep(page.url())) {
-    return false;
-  }
+async function resubmitUsernameIfStillOnUsernameStep(page: Page, userEmail: string): Promise<void> {
+  await maybeWithTimeout(
+    page
+      .evaluate(
+        ({ selectors, value }) => {
+          if (!location.pathname.toLowerCase().startsWith("/ui/v2/login/loginname")) {
+            return;
+          }
+
+          const input = selectors
+            .map((selector) => document.querySelector(selector))
+            .find((element): element is HTMLInputElement => element instanceof HTMLInputElement && !element.disabled && !element.readOnly);
+          if (!input) {
+            return;
+          }
 
-  const locator = page.locator(usernameSelector).first();
-  return (await locatorVisible(locator)) && (await waitForEditableInput(locator)) && isUsernameLoginStep(page.url());
+          input.focus();
+          input.value = value;
+          input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+          input.dispatchEvent(new Event("change", { bubbles: true }));
+
+          const form = input.closest("form");
+          if (form && typeof form.requestSubmit === "function") {
+            form.requestSubmit();
+            return;
+          }
+
+          const submit = Array.from(document.querySelectorAll("button,input"))
+            .find((element): element is HTMLButtonElement | HTMLInputElement => {
+              if (!(element instanceof HTMLButtonElement || element instanceof HTMLInputElement) || element.disabled) {
+                return false;
+              }
+              const text = `${element.textContent ?? ""} ${element.value ?? ""}`.toLowerCase();
+              return element.type === "submit" || text.includes("continue") || text.includes("next") || text.includes("sign in");
+            });
+          submit?.click();
+        },
+        { selectors: USERNAME_INPUT_SELECTORS, value: userEmail }
+      )
+      .catch(() => undefined),
+    3000
+  );
 }
 
+export const __browserTestHooks = {
+  resubmitUsernameIfStillOnUsernameStep
+};
+
 function isUsernameLoginStep(currentUrl: string): boolean {
   const parsedUrl = parseBrowserUrl(currentUrl);
   return parsedUrl?.pathname.toLowerCase().startsWith("/ui/v2/login/loginname") ?? false;