C#•2y ago

✅ ASP.NET Core form with two submit buttons

I have a form

    <form asp-route="MultiFactorAuthenticate">
        <div class="space-y-7">
            <div class="text-lg">
                Enter 6-digit verification code sent to your mobile
            </div>
            <input type="hidden" asp-for="@Model.Command.RedirectTo"/>
            <input type="hidden" asp-for="@Model.IsRegistrationVerification"/>

            <div id="otp-section" class="form-group text-center mb-5">
                <input asp-for="@Model.Command.OtpString"
                       type="text"
                       title="Otp"
                       placeholder=""
                       autocomplete="one-time-code"
                       maxLength="6"
                       inputmode="numeric"
                       autofocus
                       class="form-input text-xl appearance-none numeric-plain"/>
            </div>
            <div class="text-center mb-5">
                <button id="verify" type="submit" class="btn-control with-loader">
                    Verify
                </button>
            </div>
            <div class="text-center font-lg">
                Didn't receive the code?<br/>
                <button type="submit" class="font-medium text-blue-500 hover:text-blue-400" asp-page-handler="ResendCode">Send code again</button><br/>
            </div>
        </div>
    </form>

    <form asp-route="MultiFactorAuthenticate">
        <div class="space-y-7">
            <div class="text-lg">
                Enter 6-digit verification code sent to your mobile
            </div>
            <input type="hidden" asp-for="@Model.Command.RedirectTo"/>
            <input type="hidden" asp-for="@Model.IsRegistrationVerification"/>

            <div id="otp-section" class="form-group text-center mb-5">
                <input asp-for="@Model.Command.OtpString"
                       type="text"
                       title="Otp"
                       placeholder=""
                       autocomplete="one-time-code"
                       maxLength="6"
                       inputmode="numeric"
                       autofocus
                       class="form-input text-xl appearance-none numeric-plain"/>
            </div>
            <div class="text-center mb-5">
                <button id="verify" type="submit" class="btn-control with-loader">
                    Verify
                </button>
            </div>
            <div class="text-center font-lg">
                Didn't receive the code?<br/>
                <button type="submit" class="font-medium text-blue-500 hover:text-blue-400" asp-page-handler="ResendCode">Send code again</button><br/>
            </div>
        </div>
    </form>

The problem with this code is next: 1. I'm trying to log in, login requires sms code. The application sends me a code 2. I click "Send code again", and application generates a new code and sends it to me 3. I enter the second code and click Verify button, but the application calls ResendCode handler and sends me a new code again. Any idea why it can happen?

1 Reply

no >> bodyOP•2y ago

I also have a script on this page

@section scripts {
    <script asp-append-version="true" src="/public/2fa-auto-input.entry.js"></script>
}

@section scripts {
    <script asp-append-version="true" src="/public/2fa-auto-input.entry.js"></script>
}

The script itself

import $ from "jquery";

const otpInputConstraintRegex = /^\d{1,6}$/;
$(() => {
    const input = $<HTMLInputElement>(`input[autocomplete="one-time-code"]`);
    input.on("input", (event) => {
        let value = event.target.value?.replace(/[^\d]/g, "") ?? "";
        if (!otpInputConstraintRegex.test(value)) {
            value = value.substring(0, 6);
        }
        input.val(value);
    });
});

if ("OTPCredential" in window) {
    $(() => {
        const input = document.querySelector(
                'input[autocomplete="one-time-code"]'
        ) as HTMLInputElement;
        const ac = new AbortController();
        const form = input.closest("form");
        if (form) {
            $(form).on("submit", () => {
                ac.abort();
            });
        }
        (navigator.credentials as any)
                .get({
                    otp: {transport: ["sms"]},
                    signal: ac.signal,
                })
                .then((otp) => {
                    $(input).val(otp.code);
                })
                .catch((err) => {
                    console.log(err);
                });
    });
}

import $ from "jquery";

const otpInputConstraintRegex = /^\d{1,6}$/;
$(() => {
    const input = $<HTMLInputElement>(`input[autocomplete="one-time-code"]`);
    input.on("input", (event) => {
        let value = event.target.value?.replace(/[^\d]/g, "") ?? "";
        if (!otpInputConstraintRegex.test(value)) {
            value = value.substring(0, 6);
        }
        input.val(value);
    });
});

if ("OTPCredential" in window) {
    $(() => {
        const input = document.querySelector(
                'input[autocomplete="one-time-code"]'
        ) as HTMLInputElement;
        const ac = new AbortController();
        const form = input.closest("form");
        if (form) {
            $(form).on("submit", () => {
                ac.abort();
            });
        }
        (navigator.credentials as any)
                .get({
                    otp: {transport: ["sms"]},
                    signal: ac.signal,
                })
                .then((otp) => {
                    $(input).val(otp.code);
                })
                .catch((err) => {
                    console.log(err);
                });
    });
}

The interesting thing that this issue appears only in Chrome and Edge. And looks like OPTCredential works only in chrome browsers https://caniuse.com/mdn-api_otpcredential. But, commenting this code did not fix the issue Ok, so I found a problem. It's because, after the first call, the URL changes and contains now ?handler=ResendCode The second button has only submit type, without any handlers. I have a hunch that because of that, we are getting into the ResendCode handler all the time. So I added a new handler for this button and from a new handler I return OnPostAsync. After that everything works as expected. But I'm not sure if this is a good approach. Any ideas if I can do it better?

Gaming

Programming

✅ ASP.NET Core form with two submit buttons