diff --git a/packages/experience/src/containers/TotpCodeVerification/index.tsx b/packages/experience/src/containers/TotpCodeVerification/index.tsx
index 2030dc042..085c552be 100644
--- a/packages/experience/src/containers/TotpCodeVerification/index.tsx
+++ b/packages/experience/src/containers/TotpCodeVerification/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import VerificationCodeInput from '@/components/VerificationCode';
 import { type UserMfaFlow } from '@/types';
@@ -14,7 +14,11 @@ type Props = {
 
 const TotpCodeVerification = ({ flow }: Props) => {
   const [code, setCode] = useState<string[]>([]);
-  const { errorMessage, onSubmit } = useTotpCodeVerification(flow);
+  const errorCallback = useCallback(() => {
+    setCode([]);
+  }, []);
+
+  const { errorMessage, onSubmit } = useTotpCodeVerification(flow, errorCallback);
 
   return (
     <VerificationCodeInput
diff --git a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
index f9a5636c2..313aff5fc 100644
--- a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
+++ b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
@@ -5,7 +5,7 @@ import { type ErrorHandlers } from '@/hooks/use-error-handler';
 import useSendMfaPayload from '@/hooks/use-send-mfa-payload';
 import { type UserMfaFlow } from '@/types';
 
-const useTotpCodeVerification = (flow: UserMfaFlow) => {
+const useTotpCodeVerification = (flow: UserMfaFlow, errorCallback?: () => void) => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const sendMfaPayload = useSendMfaPayload();
 
@@ -22,10 +22,11 @@ const useTotpCodeVerification = (flow: UserMfaFlow) => {
     (code: string) => {
       void sendMfaPayload(
         { flow, payload: { type: MfaFactor.TOTP, code } },
-        invalidCodeErrorHandlers
+        invalidCodeErrorHandlers,
+        errorCallback
       );
     },
-    [flow, invalidCodeErrorHandlers, sendMfaPayload]
+    [errorCallback, flow, invalidCodeErrorHandlers, sendMfaPayload]
   );
 
   return {
diff --git a/packages/experience/src/hooks/use-send-mfa-payload.ts b/packages/experience/src/hooks/use-send-mfa-payload.ts
index 60a173855..d748fd8a8 100644
--- a/packages/experience/src/hooks/use-send-mfa-payload.ts
+++ b/packages/experience/src/hooks/use-send-mfa-payload.ts
@@ -31,7 +31,11 @@ const useSendMfaPayload = () => {
   const handleError = useErrorHandler();
 
   return useCallback(
-    async (apiOptions: SendMfaPayloadApiOptions, errorHandlers?: ErrorHandlers) => {
+    async (
+      apiOptions: SendMfaPayloadApiOptions,
+      errorHandlers?: ErrorHandlers,
+      errorCallback?: () => void
+    ) => {
       const [error, result] = await asyncSendMfaPayload(apiOptions);
 
       if (error) {
@@ -39,6 +43,7 @@ const useSendMfaPayload = () => {
           ...errorHandlers,
           ...preSignInErrorHandler,
         });
+        errorCallback?.();
         return;
       }