From e25220bfab52a2d754988fe8d1619ff9590bc187 Mon Sep 17 00:00:00 2001
From: Liam Neville <liam@zitadel.com>
Date: Thu, 19 Feb 2026 12:28:48 +0300
Subject: [PATCH] feat(login): add autoFocus to input components (#11566)

<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

# Which Problems Are Solved

The first input field on login screens is not automatically focused,
requiring users to manually click before typing. This creates
unnecessary friction during the login flow, particularly for
keyboard-oriented users and accessibility scenarios.


# How the Problems Are Solved

- Added the `autoFocus` prop to the first `TextInput` in all 12 login
form components.
- For forms with conditionally rendered first inputs
(`set-password-form` and `register-form-idp-incomplete`), `autoFocus` is
set dynamically so the correct field receives focus depending on which
input is visible.

# Additional Changes

None

# Additional Context

- Closes #11565

Co-authored-by: Max Peintner <max@caos.ch>
---
 .../components/change-password-form.test.tsx  | 45 ++++++++++++++
 .../src/components/change-password-form.tsx   |  1 +
 .../src/components/device-code-form.test.tsx  | 24 ++++++++
 .../login/src/components/device-code-form.tsx |  1 +
 apps/login/src/components/input.test.tsx      |  6 ++
 .../ldap-username-password-form.test.tsx      | 26 ++++++++
 .../ldap-username-password-form.tsx           |  1 +
 apps/login/src/components/login-otp.test.tsx  | 31 ++++++++++
 apps/login/src/components/login-otp.tsx       |  1 +
 .../src/components/password-form.test.tsx     | 30 ++++++++++
 apps/login/src/components/password-form.tsx   |  1 +
 .../register-form-idp-incomplete.test.tsx     | 44 ++++++++++++++
 .../register-form-idp-incomplete.tsx          |  2 +
 .../src/components/register-form.test.tsx     | 38 ++++++++++++
 apps/login/src/components/register-form.tsx   |  1 +
 .../src/components/set-password-form.test.tsx | 59 +++++++++++++++++++
 .../src/components/set-password-form.tsx      |  2 +
 .../set-register-password-form.test.tsx       | 46 +++++++++++++++
 .../components/set-register-password-form.tsx |  1 +
 .../src/components/totp-register.test.tsx     | 35 +++++++++++
 apps/login/src/components/totp-register.tsx   |  1 +
 .../src/components/username-form.test.tsx     | 32 ++++++++++
 apps/login/src/components/username-form.tsx   |  1 +
 .../login/src/components/verify-form.test.tsx |  9 +++
 apps/login/src/components/verify-form.tsx     |  1 +
 25 files changed, 439 insertions(+)
 create mode 100644 apps/login/src/components/change-password-form.test.tsx
 create mode 100644 apps/login/src/components/device-code-form.test.tsx
 create mode 100644 apps/login/src/components/ldap-username-password-form.test.tsx
 create mode 100644 apps/login/src/components/login-otp.test.tsx
 create mode 100644 apps/login/src/components/password-form.test.tsx
 create mode 100644 apps/login/src/components/register-form-idp-incomplete.test.tsx
 create mode 100644 apps/login/src/components/register-form.test.tsx
 create mode 100644 apps/login/src/components/set-password-form.test.tsx
 create mode 100644 apps/login/src/components/set-register-password-form.test.tsx
 create mode 100644 apps/login/src/components/totp-register.test.tsx
 create mode 100644 apps/login/src/components/username-form.test.tsx

diff --git a/apps/login/src/components/change-password-form.test.tsx b/apps/login/src/components/change-password-form.test.tsx
new file mode 100644
index 000000000..36271fd3a
--- /dev/null
+++ b/apps/login/src/components/change-password-form.test.tsx
@@ -0,0 +1,45 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { ChangePasswordForm } from "./change-password-form";
+import { create } from "@zitadel/client";
+import { PasswordComplexitySettingsSchema } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/password", () => ({
+  checkSessionAndSetPassword: vi.fn(),
+  sendPassword: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+}));
+
+const defaultComplexitySettings = create(PasswordComplexitySettingsSchema, {
+  minLength: 8n,
+  requiresUppercase: false,
+  requiresLowercase: false,
+  requiresNumber: false,
+  requiresSymbol: false,
+});
+
+describe("ChangePasswordForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the current password input on mount", () => {
+    const { getByTestId } = render(
+      <ChangePasswordForm
+        passwordComplexitySettings={defaultComplexitySettings}
+        sessionId="session-1"
+        loginName="test@example.com"
+      />,
+    );
+    expect(getByTestId("password-change-current-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/change-password-form.tsx b/apps/login/src/components/change-password-form.tsx
index c8d1aff2b..cdcec0142 100644
--- a/apps/login/src/components/change-password-form.tsx
+++ b/apps/login/src/components/change-password-form.tsx
@@ -129,6 +129,7 @@ export function ChangePasswordForm({ passwordComplexitySettings, sessionId, logi
           <TextInput
             type="password"
             autoComplete="current-password"
+            autoFocus
             required
             {...register("currentPassword", {
               required: t("change.required.currentPassword"),
diff --git a/apps/login/src/components/device-code-form.test.tsx b/apps/login/src/components/device-code-form.test.tsx
new file mode 100644
index 000000000..5c139f5d4
--- /dev/null
+++ b/apps/login/src/components/device-code-form.test.tsx
@@ -0,0 +1,24 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { DeviceCodeForm } from "./device-code-form";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/oidc", () => ({
+  getDeviceAuthorizationRequest: vi.fn(),
+}));
+
+describe("DeviceCodeForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the code input on mount", () => {
+    const { getByTestId } = render(<DeviceCodeForm />);
+    expect(getByTestId("code-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/device-code-form.tsx b/apps/login/src/components/device-code-form.tsx
index 12a44fd59..1e64190b8 100644
--- a/apps/login/src/components/device-code-form.tsx
+++ b/apps/login/src/components/device-code-form.tsx
@@ -65,6 +65,7 @@ export function DeviceCodeForm({ userCode }: { userCode?: string }) {
           <TextInput
             type="text"
             autoComplete="one-time-code"
+            autoFocus
             {...register("userCode", { required: t("usercode.required.code") })}
             label={t("usercode.labels.code")}
             data-testid="code-text-input"
diff --git a/apps/login/src/components/input.test.tsx b/apps/login/src/components/input.test.tsx
index 556fcf401..d63433208 100644
--- a/apps/login/src/components/input.test.tsx
+++ b/apps/login/src/components/input.test.tsx
@@ -125,6 +125,12 @@ describe("TextInput Component", () => {
       expect(input?.maxLength).toBe(10);
       expect(input?.type).toBe("email");
     });
+
+    it("should support autoFocus", () => {
+      const { container } = render(<TextInput label="Test" autoFocus />);
+      const input = container.querySelector("input");
+      expect(input).toHaveFocus();
+    });
   });
 
   describe("Styling", () => {
diff --git a/apps/login/src/components/ldap-username-password-form.test.tsx b/apps/login/src/components/ldap-username-password-form.test.tsx
new file mode 100644
index 000000000..0d2dce091
--- /dev/null
+++ b/apps/login/src/components/ldap-username-password-form.test.tsx
@@ -0,0 +1,26 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { LDAPUsernamePasswordForm } from "./ldap-username-password-form";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/idp", () => ({
+  createNewSessionForLDAP: vi.fn(),
+}));
+
+describe("LDAPUsernamePasswordForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the username input on mount", () => {
+    const { getByTestId } = render(
+      <LDAPUsernamePasswordForm idpId="idp-1" link={false} />,
+    );
+    expect(getByTestId("username-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/ldap-username-password-form.tsx b/apps/login/src/components/ldap-username-password-form.tsx
index 669c673f7..342ae4b63 100644
--- a/apps/login/src/components/ldap-username-password-form.tsx
+++ b/apps/login/src/components/ldap-username-password-form.tsx
@@ -68,6 +68,7 @@ export function LDAPUsernamePasswordForm({ idpId, link }: Props) {
       <TextInput
         type="text"
         autoComplete="username"
+        autoFocus
         {...register("loginName", { required: t("required.username") })}
         label={t("labels.username")}
         data-testid="username-text-input"
diff --git a/apps/login/src/components/login-otp.test.tsx b/apps/login/src/components/login-otp.test.tsx
new file mode 100644
index 000000000..540892fba
--- /dev/null
+++ b/apps/login/src/components/login-otp.test.tsx
@@ -0,0 +1,31 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { LoginOTP } from "./login-otp";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/session", () => ({
+  updateOrCreateSession: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+  completeFlowOrGetUrl: vi.fn(),
+}));
+
+describe("LoginOTP", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the code input on mount", () => {
+    const { getByTestId } = render(
+      <LoginOTP host={null} method="time-based" />,
+    );
+    expect(getByTestId("code-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/login-otp.tsx b/apps/login/src/components/login-otp.tsx
index 2bf7f49ee..4c4f0fa94 100644
--- a/apps/login/src/components/login-otp.tsx
+++ b/apps/login/src/components/login-otp.tsx
@@ -241,6 +241,7 @@ export function LoginOTP({ host, loginName, sessionId, requestId, organization,
         <div className="mt-4">
           <TextInput
             type="text"
+            autoFocus
             {...register("code", { required: t("verify.required.code") })}
             label={t("verify.labels.code")}
             autoComplete="one-time-code"
diff --git a/apps/login/src/components/password-form.test.tsx b/apps/login/src/components/password-form.test.tsx
new file mode 100644
index 000000000..f1f88ffb6
--- /dev/null
+++ b/apps/login/src/components/password-form.test.tsx
@@ -0,0 +1,30 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { PasswordForm } from "./password-form";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/password", () => ({
+  sendPassword: vi.fn(),
+  resetPassword: vi.fn(),
+}));
+
+describe("PasswordForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the password input on mount", () => {
+    const { getByTestId } = render(
+      <PasswordForm
+        loginSettings={undefined}
+        loginName="test@example.com"
+      />,
+    );
+    expect(getByTestId("password-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/password-form.tsx b/apps/login/src/components/password-form.tsx
index 7f767461d..23f66e91a 100644
--- a/apps/login/src/components/password-form.tsx
+++ b/apps/login/src/components/password-form.tsx
@@ -116,6 +116,7 @@ export function PasswordForm({ loginSettings, loginName, organization, defaultOr
           <TextInput
             type="password"
             autoComplete="password"
+            autoFocus
             {...register("password", { required: t("verify.required.password") })}
             label={t("verify.labels.password")}
             data-testid="password-text-input"
diff --git a/apps/login/src/components/register-form-idp-incomplete.test.tsx b/apps/login/src/components/register-form-idp-incomplete.test.tsx
new file mode 100644
index 000000000..fe59a328e
--- /dev/null
+++ b/apps/login/src/components/register-form-idp-incomplete.test.tsx
@@ -0,0 +1,44 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { RegisterFormIDPIncomplete } from "./register-form-idp-incomplete";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/register", () => ({
+  registerUserAndLinkToIDP: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+}));
+
+const defaultProps = {
+  organization: "org-1",
+  idpIntent: { idpIntentId: "intent-1", idpIntentToken: "token-1" },
+  idpUserId: "user-1",
+  idpId: "idp-1",
+};
+
+describe("RegisterFormIDPIncomplete", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the username input when idpUserName is not provided", () => {
+    const { getByTestId } = render(
+      <RegisterFormIDPIncomplete {...defaultProps} />,
+    );
+    expect(getByTestId("username-text-input")).toHaveFocus();
+  });
+
+  test("should autofocus the firstname input when idpUserName is provided", () => {
+    const { getByTestId } = render(
+      <RegisterFormIDPIncomplete {...defaultProps} idpUserName="existing-user" />,
+    );
+    expect(getByTestId("firstname-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/register-form-idp-incomplete.tsx b/apps/login/src/components/register-form-idp-incomplete.tsx
index d405ec1a2..318869532 100644
--- a/apps/login/src/components/register-form-idp-incomplete.tsx
+++ b/apps/login/src/components/register-form-idp-incomplete.tsx
@@ -100,6 +100,7 @@ export function RegisterFormIDPIncomplete({
               <TextInput
                 type="text"
                 autoComplete="username"
+                autoFocus
                 required
                 {...register("username", { required: "Username is required" })}
                 label="Username"
@@ -113,6 +114,7 @@ export function RegisterFormIDPIncomplete({
               <TextInput
                 type="firstname"
                 autoComplete="firstname"
+                autoFocus={!!idpUserName}
                 required
                 {...register("firstname", { required: t("required.firstname") })}
                 label={t("labels.firstname")}
diff --git a/apps/login/src/components/register-form.test.tsx b/apps/login/src/components/register-form.test.tsx
new file mode 100644
index 000000000..b4aef684d
--- /dev/null
+++ b/apps/login/src/components/register-form.test.tsx
@@ -0,0 +1,38 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { RegisterForm } from "./register-form";
+import { create } from "@zitadel/client";
+import { LegalAndSupportSettingsSchema } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/register", () => ({
+  registerUser: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+}));
+
+const defaultLegal = create(LegalAndSupportSettingsSchema, {});
+
+describe("RegisterForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the firstname input on mount", () => {
+    const { getByTestId } = render(
+      <RegisterForm
+        legal={defaultLegal}
+        organization="org-1"
+        idpCount={0}
+      />,
+    );
+    expect(getByTestId("firstname-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/register-form.tsx b/apps/login/src/components/register-form.tsx
index 7352d5cfd..cd02c6b9d 100644
--- a/apps/login/src/components/register-form.tsx
+++ b/apps/login/src/components/register-form.tsx
@@ -122,6 +122,7 @@ export function RegisterForm({
             <TextInput
               type="firstname"
               autoComplete="firstname"
+              autoFocus
               required
               {...register("firstname", { required: t("required.firstname") })}
               label={t("labels.firstname")}
diff --git a/apps/login/src/components/set-password-form.test.tsx b/apps/login/src/components/set-password-form.test.tsx
new file mode 100644
index 000000000..5d2a05381
--- /dev/null
+++ b/apps/login/src/components/set-password-form.test.tsx
@@ -0,0 +1,59 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { SetPasswordForm } from "./set-password-form";
+import { create } from "@zitadel/client";
+import { PasswordComplexitySettingsSchema } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/password", () => ({
+  changePassword: vi.fn(),
+  resetPassword: vi.fn(),
+  sendPassword: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+}));
+
+const defaultComplexitySettings = create(PasswordComplexitySettingsSchema, {
+  minLength: 8n,
+  requiresUppercase: false,
+  requiresLowercase: false,
+  requiresNumber: false,
+  requiresSymbol: false,
+});
+
+describe("SetPasswordForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the code input when codeRequired is true", () => {
+    const { getByTestId } = render(
+      <SetPasswordForm
+        passwordComplexitySettings={defaultComplexitySettings}
+        loginName="test@example.com"
+        userId="user-1"
+        codeRequired={true}
+      />,
+    );
+    expect(getByTestId("code-text-input")).toHaveFocus();
+  });
+
+  test("should autofocus the password input when codeRequired is false", () => {
+    const { getByTestId } = render(
+      <SetPasswordForm
+        passwordComplexitySettings={defaultComplexitySettings}
+        loginName="test@example.com"
+        userId="user-1"
+        codeRequired={false}
+      />,
+    );
+    expect(getByTestId("password-set-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/set-password-form.tsx b/apps/login/src/components/set-password-form.tsx
index 84466d4c0..25742106b 100644
--- a/apps/login/src/components/set-password-form.tsx
+++ b/apps/login/src/components/set-password-form.tsx
@@ -201,6 +201,7 @@ export function SetPasswordForm({
           <div>
             <TextInput
               type="text"
+              autoFocus
               required
               {...register("code", {
                 required: t("set.required.code"),
@@ -216,6 +217,7 @@ export function SetPasswordForm({
           <TextInput
             type="password"
             autoComplete="new-password"
+            autoFocus={!codeRequired}
             required
             {...register("password", {
               required: t("set.required.newPassword"),
diff --git a/apps/login/src/components/set-register-password-form.test.tsx b/apps/login/src/components/set-register-password-form.test.tsx
new file mode 100644
index 000000000..25b5f343b
--- /dev/null
+++ b/apps/login/src/components/set-register-password-form.test.tsx
@@ -0,0 +1,46 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { SetRegisterPasswordForm } from "./set-register-password-form";
+import { create } from "@zitadel/client";
+import { PasswordComplexitySettingsSchema } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/register", () => ({
+  registerUser: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+}));
+
+const defaultComplexitySettings = create(PasswordComplexitySettingsSchema, {
+  minLength: 8n,
+  requiresUppercase: false,
+  requiresLowercase: false,
+  requiresNumber: false,
+  requiresSymbol: false,
+});
+
+describe("SetRegisterPasswordForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the password input on mount", () => {
+    const { getByTestId } = render(
+      <SetRegisterPasswordForm
+        passwordComplexitySettings={defaultComplexitySettings}
+        email="test@example.com"
+        firstname="Test"
+        lastname="User"
+        organization="org-1"
+      />,
+    );
+    expect(getByTestId("password-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/set-register-password-form.tsx b/apps/login/src/components/set-register-password-form.tsx
index 56ddd443c..debcc4f2d 100644
--- a/apps/login/src/components/set-register-password-form.tsx
+++ b/apps/login/src/components/set-register-password-form.tsx
@@ -106,6 +106,7 @@ export function SetRegisterPasswordForm({
             <TextInput
               type="password"
               autoComplete="new-password"
+              autoFocus
               required
               {...register("password", {
                 required: t("password.required.password"),
diff --git a/apps/login/src/components/totp-register.test.tsx b/apps/login/src/components/totp-register.test.tsx
new file mode 100644
index 000000000..34c6876a5
--- /dev/null
+++ b/apps/login/src/components/totp-register.test.tsx
@@ -0,0 +1,35 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TotpRegister } from "./totp-register";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/verify", () => ({
+  verifyTOTP: vi.fn(),
+}));
+
+vi.mock("@/lib/client", () => ({
+  handleServerActionResponse: vi.fn(),
+  completeFlowOrGetUrl: vi.fn(),
+}));
+
+vi.mock("qrcode.react", () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <svg data-testid="qr-code" data-value={value} />,
+}));
+
+describe("TotpRegister", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the code input on mount", () => {
+    const { getByTestId } = render(
+      <TotpRegister uri="otpauth://totp/test" secret="SECRET" />,
+    );
+    expect(getByTestId("code-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/totp-register.tsx b/apps/login/src/components/totp-register.tsx
index 8a6424689..3a268ec6b 100644
--- a/apps/login/src/components/totp-register.tsx
+++ b/apps/login/src/components/totp-register.tsx
@@ -116,6 +116,7 @@ export function TotpRegister({ uri, loginName, sessionId, requestId, organizatio
             <div className="">
               <TextInput
                 type="text"
+                autoFocus
                 {...register("code", { required: t("set.required.code") })}
                 label={t("set.labels.code")}
                 data-testid="code-text-input"
diff --git a/apps/login/src/components/username-form.test.tsx b/apps/login/src/components/username-form.test.tsx
new file mode 100644
index 000000000..c6e734af6
--- /dev/null
+++ b/apps/login/src/components/username-form.test.tsx
@@ -0,0 +1,32 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { UsernameForm } from "./username-form";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/lib/server/loginname", () => ({
+  sendLoginname: vi.fn(),
+}));
+
+describe("UsernameForm", () => {
+  afterEach(cleanup);
+
+  test("should autofocus the loginName input on mount", () => {
+    const { getByTestId } = render(
+      <UsernameForm
+        loginName=""
+        requestId={undefined}
+        loginSettings={undefined}
+        submit={false}
+        allowRegister={false}
+      />,
+    );
+    expect(getByTestId("username-text-input")).toHaveFocus();
+  });
+});
diff --git a/apps/login/src/components/username-form.tsx b/apps/login/src/components/username-form.tsx
index c98131c54..08ed561ec 100644
--- a/apps/login/src/components/username-form.tsx
+++ b/apps/login/src/components/username-form.tsx
@@ -101,6 +101,7 @@ export function UsernameForm({
           <TextInput
             type="text"
             autoComplete="username"
+            autoFocus
             {...register("loginName", { required: t("required.loginName") })}
             label={inputLabel}
             data-testid="username-text-input"
diff --git a/apps/login/src/components/verify-form.test.tsx b/apps/login/src/components/verify-form.test.tsx
index f284cd9a2..7c4d5f695 100644
--- a/apps/login/src/components/verify-form.test.tsx
+++ b/apps/login/src/components/verify-form.test.tsx
@@ -28,6 +28,15 @@ describe("VerifyForm", () => {
 
   afterEach(cleanup);
 
+  describe("Input Focus", () => {
+    test("should autofocus the code input on mount", () => {
+      const { getByTestId } = render(
+        <VerifyForm userId="user-1" code="" isInvite={false} submit={false} />,
+      );
+      expect(getByTestId("code-text-input")).toHaveFocus();
+    });
+  });
+
   describe("Auto-submit Behavior", () => {
     test("should call sendVerification automatically when submit=true", async () => {
       render(<VerifyForm userId="user-1" code="123456" isInvite={false} submit={true} />);
diff --git a/apps/login/src/components/verify-form.tsx b/apps/login/src/components/verify-form.tsx
index 5d303a8c4..3fd53cb07 100644
--- a/apps/login/src/components/verify-form.tsx
+++ b/apps/login/src/components/verify-form.tsx
@@ -138,6 +138,7 @@ export function VerifyForm({ userId, loginName, organization, requestId, code, i
           <TextInput
             type="text"
             autoComplete="one-time-code"
+            autoFocus
             {...register("code", { required: t("verify.required.code") })}
             label={t("verify.labels.code")}
             data-testid="code-text-input"