diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 886b24a3..9f7da04e 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -806,8 +806,14 @@ public function verify2FA()
             // code with no way to recover it client-side. A real top-level navigation to
             // this URL lets the browser complete that chain natively instead - CORS never
             // applies to page navigations, only to XHR/fetch.
+            //
+            // The recovery-codes standing rides along (same as verify2FARecovery()) so
+            // the login page can warn the user when they are running low on codes.
             $redirect = $this->login_strategy->postLogin();
-            return $this->ok(['redirect_url' => $redirect->getTargetUrl()]);
+            return $this->ok(array_merge(
+                ['redirect_url' => $redirect->getTargetUrl()],
+                $this->recoveryCodesStatusOrEmpty($user)
+            ));
         } catch (ValidationException $ex) {
             Log::warning($ex);
             return $this->error412($ex->getMessages());
@@ -905,7 +911,7 @@ public function verify2FARecovery()
             $redirect = $this->login_strategy->postLogin();
             return $this->ok(array_merge(
                 ['redirect_url' => $redirect->getTargetUrl()],
-                $this->recovery_code_service->getStatus($user)->toArray()
+                $this->recoveryCodesStatusOrEmpty($user)
             ));
         } catch (ValidationException $ex) {
             Log::warning($ex);
@@ -1004,6 +1010,26 @@ private function mfaSessionExpired()
      *
      * @return void
      */
+    /**
+     * Recovery-codes standing for the post-verification response, best-effort.
+     * Callers only reach this once the second factor is redeemed, the session is
+     * established and postLogin() may already have consumed the OAuth2 memento,
+     * so a failure here must not turn the sign-in into a 500 that drops
+     * redirect_url. The login page navigates directly when the fields are absent.
+     *
+     * @param User $user
+     * @return array<string,int> RecoveryCodesStatus::toArray(), or [] on failure
+     */
+    private function recoveryCodesStatusOrEmpty(User $user): array
+    {
+        try {
+            return $this->recovery_code_service->getStatus($user)->toArray();
+        } catch (\Throwable $ex) {
+            Log::warning($ex);
+            return [];
+        }
+    }
+
     private function clearMFAUISessionState(): void
     {
         Session::forget('flow');
diff --git a/resources/js/login/login.js b/resources/js/login/login.js
index f85e6894..39add0ff 100644
--- a/resources/js/login/login.js
+++ b/resources/js/login/login.js
@@ -140,6 +140,7 @@ class LoginPage extends React.Component {
     this.onVerify2FA = this.onVerify2FA.bind(this);
     this.onResend2FA = this.onResend2FA.bind(this);
     this.onVerifyRecovery = this.onVerifyRecovery.bind(this);
+    this.proceedAfterVerifiedLogin = this.proceedAfterVerifiedLogin.bind(this);
     this.onContinueAfterLowRecoveryCodes = this.onContinueAfterLowRecoveryCodes.bind(this);
     this.onUseRecovery = this.onUseRecovery.bind(this);
     this.onBackToOtp = this.onBackToOtp.bind(this);
@@ -464,9 +465,12 @@ class LoginPage extends React.Component {
         // data (never a redirect for this XHR to follow) - a real top-level navigation
         // to it lets the browser complete any further hop natively, cross-origin
         // included, which this XHR never could.
+        // The recovery-codes standing rides along: warn before navigating when
+        // the user is running low (see proceedAfterVerifiedLogin()). A user with
+        // no unused codes here most likely never generated any, so 0 is not
+        // "running low" on this path - that case belongs to enrollment, not here.
         const { response } = payload;
-        window.location.href =
-          (response && response.redirect_url) || window.location.href;
+        this.proceedAfterVerifiedLogin(response, { warnWhenNoneLeft: false });
       },
       (error) => {
         this.handleMfaError(error, "twofactor");
@@ -567,25 +571,8 @@ class LoginPage extends React.Component {
     verifyRecoveryCode(recoveryCode, this.props.token).then(
       (payload) => {
         const { response } = payload;
-        const redirectUrl =
-          (response && response.redirect_url) || window.location.href;
-        const remaining = response && response.recovery_codes_remaining;
-        const threshold =
-          (response && response.recovery_codes_low_threshold) ??
-          DEFAULT_RECOVERY_CODES_LOW_THRESHOLD;
-        const alreadyDismissed =
-          sessionStorage.getItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY) === "1";
-
-        if (typeof remaining === "number" && remaining < threshold && !alreadyDismissed) {
-          this.setState({
-            ...this.state,
-            lowRecoveryCodesWarning: { remaining, redirectUrl },
-          });
-          return;
-        }
-
-        // See onVerify2FA() for rationale on using a real top-level navigation.
-        window.location.href = redirectUrl;
+        // The user just burned a code, so 0 left means they used their last one.
+        this.proceedAfterVerifiedLogin(response, { warnWhenNoneLeft: true });
       },
       (error) => {
         this.handleMfaError(error, "recovery");
@@ -593,6 +580,42 @@ class LoginPage extends React.Component {
     );
   }
 
+  /**
+   * Shared tail of every successful 2FA verification (email OTP and recovery
+   * code): show the "running low on recovery codes" warning once per browser
+   * session, otherwise navigate to the post-login destination.
+   *
+   * @param {object} response verification response (redirect_url + recovery-codes standing)
+   * @param {{warnWhenNoneLeft: boolean}} options whether 0 unused codes should warn
+   */
+  proceedAfterVerifiedLogin(response, { warnWhenNoneLeft }) {
+    const redirectUrl =
+      (response && response.redirect_url) || window.location.href;
+    const remaining = response && response.recovery_codes_remaining;
+    const threshold =
+      (response && response.recovery_codes_low_threshold) ??
+      DEFAULT_RECOVERY_CODES_LOW_THRESHOLD;
+    const alreadyDismissed =
+      sessionStorage.getItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY) === "1";
+
+    const isLow =
+      typeof remaining === "number" &&
+      remaining < threshold &&
+      (warnWhenNoneLeft || remaining > 0);
+
+    if (isLow && !alreadyDismissed) {
+      this.setState({
+        ...this.state,
+        lowRecoveryCodesWarning: { remaining, redirectUrl },
+      });
+      return;
+    }
+
+    // Real top-level navigation: the backend returns the destination as data so the
+    // browser completes any cross-origin hop natively (an XHR could not).
+    window.location.href = redirectUrl;
+  }
+
   onContinueAfterLowRecoveryCodes() {
     sessionStorage.setItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, "1");
     window.location.href = this.state.lowRecoveryCodesWarning.redirectUrl;
@@ -865,11 +888,16 @@ class LoginPage extends React.Component {
                   variant="outlined"
                   className={styles.valid_user_name_chip}
                   label={this.state.user_name}
-                  onDelete={this.handleDelete}
+                  // The sign-in already completed server-side while the low
+                  // recovery-codes warning is pending, so switching accounts
+                  // there would only strand the user beside a stale redirect.
+                  onDelete={
+                    this.state.lowRecoveryCodesWarning ? undefined : this.handleDelete
+                  }
                 />
               )}
             </Typography>
-            {showTwoFactorForm && (
+            {showTwoFactorForm && !this.state.lowRecoveryCodesWarning && (
               <TwoFactorForm
                 otpCode={this.state.twoFactorCode}
                 otpError={this.state.errors.twofactor}
@@ -897,8 +925,9 @@ class LoginPage extends React.Component {
                 onCancel={this.resetToPasswordFlow}
               />
             )}
-            {showRecoveryForm && this.state.lowRecoveryCodesWarning && (
+            {this.state.lowRecoveryCodesWarning && (
               <div
+                role="alert"
                 className={recoveryCodesStyles.low_code_warning}
                 data-testid="low-recovery-codes-warning"
               >
@@ -909,6 +938,9 @@ class LoginPage extends React.Component {
                   locked out.
                 </Typography>
                 <Button
+                  // The verify form that held focus unmounts when the warning
+                  // appears; move keyboard focus to the only way forward.
+                  autoFocus
                   variant="contained"
                   color="primary"
                   onClick={this.onContinueAfterLowRecoveryCodes}
diff --git a/tests/TwoFactorLoginFlowTest.php b/tests/TwoFactorLoginFlowTest.php
index 5bd612e8..e5a557f4 100644
--- a/tests/TwoFactorLoginFlowTest.php
+++ b/tests/TwoFactorLoginFlowTest.php
@@ -18,6 +18,7 @@
 use App\libs\Auth\Models\UserTrustedDevice;
 use App\Mail\OAuth2PasswordlessOTPMail;
 use App\Services\Auth\IDeviceTrustService;
+use App\Services\Auth\IRecoveryCodeService;
 use App\Services\Auth\ITwoFactorAuditService;
 use App\Services\Auth\ITwoFactorRateLimitService;
 use Auth\AuthHelper;
@@ -668,10 +669,31 @@ public function testSuccessfulOTPVerificationCompletesLogin(): void
         $this->assertStringStartsWith('http', $payload['redirect_url']);
         $this->assertTrue(Auth::check());
 
+        // Same recovery-codes standing as verify2FARecovery() so the login page can warn
+        // about low codes after an email OTP sign-in (RecoveryCodesStatus::toArray()).
+        $this->assertSame(0, $payload['recovery_codes_remaining'] ?? null);
+        $this->assertSame((int) Config::get('auth.recovery_codes.count'), $payload['recovery_codes_total'] ?? null);
+        $this->assertSame((int) Config::get('auth.recovery_codes.low_threshold'), $payload['recovery_codes_low_threshold'] ?? null);
+
         $admin = $this->user(self::ADMIN_EMAIL);
         $this->assertGreaterThan(0, $this->countAudit($admin->getId(), TwoFactorAuditLog::EventChallengeSucceeded));
     }
 
+    public function testOTPVerificationReportsUnusedRecoveryCodesRemaining(): void
+    {
+        $admin = $this->user(self::ADMIN_EMAIL);
+        $this->createRecoveryCode($admin, 'UNUSEDCODEONE', false);
+        $this->createRecoveryCode($admin, 'UNUSEDCODETWO', false);
+        $this->createRecoveryCode($admin, 'BURNEDCODE', true);
+
+        $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD);
+        $response = $this->verify($this->latestOtpCode(self::ADMIN_EMAIL));
+
+        $this->assertResponseStatus(200);
+        $payload = json_decode($response->getContent(), true);
+        $this->assertSame(2, $payload['recovery_codes_remaining'] ?? null, 'used codes must not be counted');
+    }
+
     public function testFailedOTPVerificationReturnsErrorAndIncrementsCounter(): void
     {
         $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD);
@@ -1066,6 +1088,47 @@ public function testRecoveryAuditFailureDoesNotBlockLogin(): void
         $this->assertTrue(Auth::check(), 'session must be established despite the audit failure');
     }
 
+    public function testRecoveryCodesStatusFailureDoesNotBlockOTPLogin(): void
+    {
+        // The recovery-codes standing is best-effort: it is read after the OTP is
+        // redeemed and the session established, so a failure must NOT 500 the
+        // user - the response still carries redirect_url, just without the status.
+        $this->failRecoveryCodesStatus();
+
+        $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD);
+        $response = $this->verify($this->latestOtpCode(self::ADMIN_EMAIL));
+
+        $this->assertEquals(200, $response->getStatusCode(), 'a recovery-codes status failure must not fail the login');
+        $this->assertTrue(Auth::check(), 'session must be established despite the status failure');
+        $payload = json_decode($response->getContent(), true);
+        $this->assertStringStartsWith('http', $payload['redirect_url'] ?? '');
+        $this->assertArrayNotHasKey('recovery_codes_remaining', $payload);
+    }
+
+    public function testRecoveryCodesStatusFailureDoesNotBlockRecoveryLogin(): void
+    {
+        $admin = $this->user(self::ADMIN_EMAIL);
+        $plain = 'RECOVERYSTATUSFAIL' . strtoupper(uniqid());
+        $this->createRecoveryCode($admin, $plain, false);
+        $this->failRecoveryCodesStatus();
+
+        $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD);
+        $response = $this->recovery($plain);
+
+        $this->assertEquals(200, $response->getStatusCode(), 'a recovery-codes status failure must not fail the login');
+        $this->assertTrue(Auth::check(), 'session must be established despite the status failure');
+        $payload = json_decode($response->getContent(), true);
+        $this->assertStringStartsWith('http', $payload['redirect_url'] ?? '');
+        $this->assertArrayNotHasKey('recovery_codes_remaining', $payload);
+    }
+
+    private function failRecoveryCodesStatus(): void
+    {
+        $mock = \Mockery::mock(IRecoveryCodeService::class);
+        $mock->shouldReceive('getStatus')->andThrow(new \RuntimeException('recovery codes store unavailable'));
+        $this->app->instance(IRecoveryCodeService::class, $mock);
+    }
+
     public function testDeviceTrustFailureDoesNotBlockLogin(): void
     {
         // Device-trust enrollment is best-effort: by the time it runs the OTP is
diff --git a/tests/js/login/login.mfa.test.js b/tests/js/login/login.mfa.test.js
index 62524fb9..f13c2d93 100644
--- a/tests/js/login/login.mfa.test.js
+++ b/tests/js/login/login.mfa.test.js
@@ -21,8 +21,9 @@ jest.mock('../../../resources/js/login/actions', () => ({
 delete window.location;
 window.location = { href: '', reload: jest.fn() };
 
+import { render, screen, act } from '@testing-library/react';
 import { LoginPage } from '../../../resources/js/login/login';
-import { verifyRecoveryCode, cancelLogin, resend2FA } from '../../../resources/js/login/actions';
+import { verify2FA, verifyRecoveryCode, cancelLogin, resend2FA } from '../../../resources/js/login/actions';
 
 // ─── Minimal props that satisfy the LoginPage constructor ────────────────────
 
@@ -210,6 +211,182 @@ describe('LoginPage', () => {
     });
   });
 
+  // ─── Low recovery-codes warning after an email OTP sign-in ─────────────────
+
+  describe('onVerify2FA — low recovery-codes warning', () => {
+    let inst;
+
+    beforeEach(() => {
+      inst = makeInstance();
+      inst.state = { ...inst.state, authFlow: FLOW.MFA, twoFactorCode: '123456' };
+      window.location.href = '';
+      verify2FA.mockReset();
+      verifyRecoveryCode.mockReset();
+      sessionStorage.clear();
+    });
+
+    it('remaining below the threshold — shows the warning instead of navigating', async () => {
+      verify2FA.mockReturnValue(
+        Promise.resolve({
+          response: {
+            redirect_url: 'https://idp.test/authorize',
+            recovery_codes_remaining: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD - 1,
+            recovery_codes_total: 10,
+            recovery_codes_low_threshold: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD,
+          },
+        }),
+      );
+
+      inst.onVerify2FA();
+      await flush();
+
+      expect(window.location.href).toBe('');
+      expect(inst.state.lowRecoveryCodesWarning).toEqual({
+        remaining: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD - 1,
+        redirectUrl: 'https://idp.test/authorize',
+      });
+    });
+
+    it('remaining at the threshold — navigates directly', async () => {
+      verify2FA.mockReturnValue(
+        Promise.resolve({
+          response: {
+            redirect_url: 'https://idp.test/authorize',
+            recovery_codes_remaining: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD,
+            recovery_codes_low_threshold: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD,
+          },
+        }),
+      );
+
+      inst.onVerify2FA();
+      await flush();
+
+      expect(window.location.href).toBe('https://idp.test/authorize');
+      expect(inst.state.lowRecoveryCodesWarning).toBeNull();
+    });
+
+    it('no unused codes left — navigates directly (user never generated codes)', async () => {
+      verify2FA.mockReturnValue(
+        Promise.resolve({
+          response: {
+            redirect_url: 'https://idp.test/authorize',
+            recovery_codes_remaining: 0,
+            recovery_codes_low_threshold: DEFAULT_RECOVERY_CODES_LOW_THRESHOLD,
+          },
+        }),
+      );
+
+      inst.onVerify2FA();
+      await flush();
+
+      expect(window.location.href).toBe('https://idp.test/authorize');
+      expect(inst.state.lowRecoveryCodesWarning).toBeNull();
+    });
+
+    it('response without the standing — navigates directly', async () => {
+      verify2FA.mockReturnValue(
+        Promise.resolve({ response: { redirect_url: 'https://idp.test/authorize' } }),
+      );
+
+      inst.onVerify2FA();
+      await flush();
+
+      expect(window.location.href).toBe('https://idp.test/authorize');
+      expect(inst.state.lowRecoveryCodesWarning).toBeNull();
+    });
+
+    it('dismissed warning is not shown again in the same session (OTP and recovery paths)', async () => {
+      verify2FA.mockReturnValue(
+        Promise.resolve({
+          response: { redirect_url: 'https://idp.test/authorize', recovery_codes_remaining: 1 },
+        }),
+      );
+
+      inst.onVerify2FA();
+      await flush();
+      expect(inst.state.lowRecoveryCodesWarning).not.toBeNull();
+
+      inst.onContinueAfterLowRecoveryCodes();
+      expect(window.location.href).toBe('https://idp.test/authorize');
+
+      // Same session, OTP path again.
+      window.location.href = '';
+      inst.state = { ...inst.state, lowRecoveryCodesWarning: null, disableInput: false };
+      inst.onVerify2FA();
+      await flush();
+      expect(window.location.href).toBe('https://idp.test/authorize');
+      expect(inst.state.lowRecoveryCodesWarning).toBeNull();
+
+      // Same session, recovery path.
+      window.location.href = '';
+      verifyRecoveryCode.mockReturnValue(
+        Promise.resolve({
+          response: { redirect_url: 'https://idp.test/authorize', recovery_codes_remaining: 1 },
+        }),
+      );
+      inst.state = { ...inst.state, disableInput: false, recoveryCode: 'ABCD1234' };
+      inst.onVerifyRecovery();
+      await flush();
+      expect(window.location.href).toBe('https://idp.test/authorize');
+      expect(inst.state.lowRecoveryCodesWarning).toBeNull();
+    });
+  });
+
+  // ─── Low recovery-codes warning — rendered transition ──────────────────────
+
+  describe('low recovery-codes warning — rendered', () => {
+    beforeEach(() => {
+      window.location.href = '';
+      verify2FA.mockReset();
+      sessionStorage.clear();
+    });
+
+    async function renderAndVerifyOtp() {
+      verify2FA.mockReturnValue(
+        Promise.resolve({
+          response: { redirect_url: 'https://idp.test/authorize', recovery_codes_remaining: 1 },
+        }),
+      );
+      const ref = React.createRef();
+      render(
+        <LoginPage
+          {...PROPS}
+          ref={ref}
+          flow={FLOW.MFA}
+          userName="user@example.com"
+          user_fullname="Test User"
+        />,
+      );
+      // Baseline: before verification the account chip can be removed.
+      expect(document.querySelector('.MuiChip-deleteIcon')).not.toBeNull();
+      await act(async () => {
+        ref.current.setState({ twoFactorCode: '123456' });
+      });
+      await act(async () => {
+        ref.current.onVerify2FA();
+        await flush();
+      });
+      return ref;
+    }
+
+    it('announces the warning and moves focus to Continue when the OTP form unmounts', async () => {
+      await renderAndVerifyOtp();
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('data-testid', 'low-recovery-codes-warning');
+      expect(screen.getByTestId('continue-after-low-recovery-codes')).toHaveFocus();
+      expect(window.location.href).toBe('');
+    });
+
+    it('hides the account chip delete action while the warning is pending', async () => {
+      await renderAndVerifyOtp();
+
+      // MUI renders the Chip delete icon only when onDelete is provided.
+      expect(document.querySelector('.MuiChip-deleteIcon')).toBeNull();
+      expect(cancelLogin).not.toHaveBeenCalled();
+    });
+  });
+
   // ─── Recovery-code login flow (CU-86ba2zp4f) ───────────────────────────────
 
   describe('recovery code flow', () => {
@@ -350,6 +527,24 @@ describe('LoginPage', () => {
         });
       });
 
+      it('valid code that was the last one — warns with 0 left', async () => {
+        verifyRecoveryCode.mockReturnValue(
+          Promise.resolve({
+            response: { redirect_url: 'https://idp.test/authorize', recovery_codes_remaining: 0 },
+          }),
+        );
+        inst.state = { ...inst.state, recoveryCode: 'ABCD1234' };
+
+        inst.onVerifyRecovery();
+        await flush();
+
+        expect(window.location.href).toBe('');
+        expect(inst.state.lowRecoveryCodesWarning).toEqual({
+          remaining: 0,
+          redirectUrl: 'https://idp.test/authorize',
+        });
+      });
+
       it('low-code warning already dismissed this session — navigates straight through', async () => {
         sessionStorage.setItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, '1');
         verifyRecoveryCode.mockReturnValue(