I've got 2FA working in my app with the qr code, but the recovery code route isn't working for some reason. I always get the error:
The provided two factor authentication code was invalid.
I don't know if it's the route I'm using in my form, or what. Here's the form:
<div class="col-md-12 ps-md-0" x-data="{ showRecovery: false, showCode: true }" x-cloak>
<div class="auth-form-wrapper px-4 py-5">
<form class="reset-password-form" method="POST" action="{{ route('two-factor.login') }}">
@csrf
<div x-show="showCode">
<h5 class="text-muted fw-normal mb-4 mt-4">Enter Authentication Code</h5>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="Code" name="code">
@error('code')
<span class="invalid-feedback" style="display: block;" role="alert"><strong>{{ $message }} </strong></span>
@enderror
</div>
<div class="d-flex justify-content-start">
<button class="btn btn-primary me-2 mb-2 mb-md-0" type="submit">Submit</button>
</div>
<a role="button" x-on:click="showRecovery = true, showCode = false" class="d-block mt-3 text-muted">Use Recovery Code Instead</a>
</div>
<div x-show="showRecovery">
@csrf
<h5 class="text-muted fw-normal mb-4 mt-4">Enter Recovery Code</h5>
<div class="mb-3">
<input type="text" class="form-control" id="recovery_code " placeholder="Recovery Code" name="recovery_code ">
@error('recovery-code')
<span class="invalid-feedback" style="display: block;" role="alert"><strong>{{ $message }} </strong></span>
@enderror
</div>
<div class="d-flex justify-content-start">
<button class="btn btn-primary me-2 mb-2 mb-md-0" type="submit">Submit</button>
</div>
<a role="button" x-on:click="showRecovery = false, showCode = true" class="d-block mt-3 text-muted">Use Authentication Code Instead</a>
</div>
</form>
</div>
</div>
When I do php artisan route:list
I don't see a route for two-factor.login
, but it works with the authentication code. I'm assuming it should be the same route for using the recovery code as well.
I've also tried using /two-factor-challenge
as the form action but I get the same result.
@hyphen
In the recovery code input field, there's an extra space in the name attribute, which might cause issues. Change this line:
<input type="text" class="form-control" id="recovery_code " placeholder="Recovery Code" name="recovery_code ">
TO
<input type="text" class="form-control" id="recovery_code" placeholder="Recovery Code" name="recovery_code">