Laravel Fortify 2FA Recovery Code Login Not Working

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.

>Solution :

@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">