fix: prevent double totp submissions

This commit is contained in:
Stavros
2026-04-12 18:59:09 +03:00
parent e7b44ee54e
commit 40bb8b4472

View File

@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { totpSchema, TotpSchema } from "@/schemas/totp-schema"; import { totpSchema, TotpSchema } from "@/schemas/totp-schema";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRef } from "react";
import z from "zod"; import z from "zod";
interface Props { interface Props {
@@ -14,6 +15,7 @@ interface Props {
export const TotpForm = (props: Props) => { export const TotpForm = (props: Props) => {
const { formId, onSubmit } = props; const { formId, onSubmit } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const autoSubmittedRef = useRef(false);
z.config({ z.config({
customError: (iss) => customError: (iss) =>
@@ -27,9 +29,12 @@ export const TotpForm = (props: Props) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value.replace(/\D/g, "").slice(0, 6); const value = e.target.value.replace(/\D/g, "").slice(0, 6);
form.setValue("code", value, { shouldDirty: true, shouldValidate: false }); form.setValue("code", value, { shouldDirty: true, shouldValidate: false });
if (value.length === 6) { if (value.length === 6 && !autoSubmittedRef.current) {
autoSubmittedRef.current = true;
form.handleSubmit(onSubmit)(); form.handleSubmit(onSubmit)();
return;
} }
autoSubmittedRef.current = false;
}; };
// Note: This is not the best UX, ideally we would want https://github.com/guilhermerodz/input-otp // Note: This is not the best UX, ideally we would want https://github.com/guilhermerodz/input-otp