feat(auth): split backup code out of the main 2FA challenge view

Mount now redirects key-only users without a secure context straight to
the dedicated backup view. The main challenge form renders only for TOTP
users; a subordinate button links to two-factor.challenge.backup instead
of embedding the field inline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/Livewire/Auth/TwoFactorChallenge.php

@@ -23,6 +23,12 @@ class TwoFactorChallenge extends Component
         if (! session()->has('2fa.user')) {
             return $this->redirect(route('login'), navigate: true);
         }
+
+        // No TOTP and no usable security key (a key-only user over http + bare IP, where WebAuthn
+        // has no secure context) → the backup code is the only path: go straight to its own view.
+        if (! $this->pendingHasTotp && ! $this->webauthnAvailable()) {
+            return $this->redirect(route('two-factor.challenge.backup'), navigate: true);
+        }
     }
 
     public function verify()

resources/views/livewire/auth/two-factor-challenge.blade.php

@@ -1,6 +1,5 @@
 @php
     $field = 'h-14 w-full rounded-md border border-line bg-inset text-center font-mono text-2xl font-semibold tracking-[0.5em] text-ink caret-accent placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
-    $fieldText = 'h-12 w-full rounded-md border border-line bg-inset px-3 text-center font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
     $label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
     $err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
 @endphp
@@ -17,41 +16,42 @@
         <x-btn variant="primary" size="lg" class="w-full" x-data x-on:click="window.clusevWebauthn?.login($wire)">
             <x-icon name="shield" class="h-4 w-4" /> {{ __('auth.webauthn_login') }}
         </x-btn>
-        <div class="flex items-center gap-3">
-            <span class="h-px flex-1 bg-line"></span>
-            <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('common.or') }}</span>
-            <span class="h-px flex-1 bg-line"></span>
-        </div>
     @endif
 
-    <form wire:submit="verify" class="space-y-4">
+    @if ($this->pendingHasTotp)
-        <div>
+        <form wire:submit="verify" class="space-y-4">
-            <label for="code" class="{{ $label }}">{{ $this->pendingHasTotp ? __('auth.code') : __('auth.challenge_backup_label') }}</label>
+            <div>
-            <input wire:model="code" id="code" inputmode="text" autocomplete="one-time-code" autofocus
+                <label for="code" class="{{ $label }}">{{ __('auth.code') }}</label>
-                   class="{{ $this->pendingHasTotp ? $field : $fieldText }}"
+                <input wire:model="code" id="code" inputmode="text" autocomplete="one-time-code" autofocus
-                   placeholder="{{ $this->pendingHasTotp ? '000000' : __('auth.challenge_backup_placeholder') }}" />
+                       class="{{ $field }}" placeholder="000000" />
-            @error('code') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
+                @error('code') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
-            <p class="mt-2 text-center font-mono text-[11px] text-ink-4">{{ $this->pendingHasTotp ? __('auth.challenge_recovery_hint') : __('auth.challenge_backup_only_hint') }}</p>
+            </div>
-        </div>
 
-        <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="verify">
+            <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="verify">
-            <svg wire:loading wire:target="verify" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
+                <svg wire:loading wire:target="verify" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
-            <span wire:loading.remove wire:target="verify">{{ __('common.confirm') }}</span>
+                <span wire:loading.remove wire:target="verify">{{ __('common.confirm') }}</span>
-            <span wire:loading wire:target="verify">{{ __('auth.checking') }}</span>
+                <span wire:loading wire:target="verify">{{ __('auth.checking') }}</span>
-        </x-btn>
+            </x-btn>
-    </form>
+        </form>
 
-    @if ($this->pendingHasTotp && $this->webauthnAvailable())
+        @if ($this->webauthnAvailable())
-        <div class="flex items-center gap-3">
+            {{-- TOTP + key: the security key is the alternate path. --}}
-            <span class="h-px flex-1 bg-line"></span>
+            <div class="flex items-center gap-3">
-            <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('common.or') }}</span>
+                <span class="h-px flex-1 bg-line"></span>
-            <span class="h-px flex-1 bg-line"></span>
+                <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('common.or') }}</span>
-        </div>
+                <span class="h-px flex-1 bg-line"></span>
-        <x-btn variant="secondary" size="lg" class="w-full" x-data x-on:click="window.clusevWebauthn?.login($wire)">
+            </div>
-            <x-icon name="shield" class="h-4 w-4" /> {{ __('auth.webauthn_login') }}
+            <x-btn variant="secondary" size="lg" class="w-full" x-data x-on:click="window.clusevWebauthn?.login($wire)">
-        </x-btn>
+                <x-icon name="shield" class="h-4 w-4" /> {{ __('auth.webauthn_login') }}
+            </x-btn>
+        @endif
     @endif
 
+    {{-- Backup code lives on its own view — a deliberate, subordinate step. --}}
+    <x-btn variant="secondary" size="lg" class="w-full" :href="route('two-factor.challenge.backup')" wire:navigate>
+        {{ __('auth.challenge_use_backup') }}
+    </x-btn>
+
     <div class="flex justify-center">
         <a href="{{ route('login') }}" wire:navigate class="inline-flex items-center gap-1.5 font-mono text-[11px] text-ink-4 transition-colors hover:text-ink-2">
             <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('auth.back_to_login') }}

tests/Feature/ChallengeFactorAdaptTest.php

@@ -5,6 +5,7 @@ namespace Tests\Feature;
 use App\Livewire\Auth\TwoFactorChallenge;
 use App\Models\User;
 use App\Models\WebauthnCredential;
+use App\Services\WebauthnService;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Livewire\Livewire;
 use Tests\TestCase;
@@ -21,23 +22,6 @@ class ChallengeFactorAdaptTest extends TestCase
         return $u->fresh();
     }
 
-    public function test_key_only_user_has_no_totp_field_but_a_backup_code_works(): void
-    {
-        $user = $this->keyOnlyUser();
-        $codes = $user->replaceRecoveryCodes();
-        session(['2fa.user' => $user->id, '2fa.remember' => false]);
-
-        Livewire::test(TwoFactorChallenge::class)
-            ->assertSet('pendingHasTotp', false)
-            ->assertDontSee('000000')
-            ->assertSee(__('auth.challenge_backup_label'))
-            ->set('code', $codes[0])
-            ->call('verify')
-            ->assertRedirect(route('dashboard'));
-
-        $this->assertAuthenticatedAs($user);
-    }
-
     public function test_totp_user_sees_the_field(): void
     {
         $user = User::factory()->create(['two_factor_secret' => 'S', 'two_factor_confirmed_at' => now()]);
@@ -45,4 +29,42 @@ class ChallengeFactorAdaptTest extends TestCase
 
         Livewire::test(TwoFactorChallenge::class)->assertSet('pendingHasTotp', true);
     }
+
+    public function test_totp_user_sees_the_backup_link_but_not_the_backup_field(): void
+    {
+        $user = User::factory()->create(['two_factor_secret' => 'S', 'two_factor_confirmed_at' => now()]);
+        session(['2fa.user' => $user->id, '2fa.remember' => false]);
+
+        Livewire::test(TwoFactorChallenge::class)
+            ->assertSee('000000')                                  // TOTP field present
+            ->assertSee(__('auth.challenge_use_backup'))           // backup link present
+            ->assertDontSee(__('auth.challenge_backup_placeholder')); // no backup field here
+    }
+
+    public function test_key_only_user_without_secure_context_is_redirected_to_the_backup_view(): void
+    {
+        // No domain configured → webauthnAvailable() false, pendingHasTotp false: the backup code
+        // is the only usable path, so mount() sends the user straight to the dedicated view.
+        $user = $this->keyOnlyUser();
+        session(['2fa.user' => $user->id, '2fa.remember' => false]);
+
+        Livewire::test(TwoFactorChallenge::class)
+            ->assertRedirect(route('two-factor.challenge.backup'));
+    }
+
+    public function test_key_only_user_with_secure_context_stays_and_shows_key_plus_backup(): void
+    {
+        $svc = $this->mock(WebauthnService::class);
+        $svc->shouldReceive('available')->andReturn(true);
+
+        $user = $this->keyOnlyUser();
+        session(['2fa.user' => $user->id, '2fa.remember' => false]);
+
+        Livewire::test(TwoFactorChallenge::class)
+            ->assertNoRedirect()
+            ->assertSee(__('auth.webauthn_login'))                 // security-key button
+            ->assertSee(__('auth.challenge_use_backup'))           // backup link
+            ->assertDontSee('000000')                              // no TOTP field
+            ->assertDontSee(__('auth.challenge_backup_placeholder')); // no inline backup field
+    }
 }