React SDK: Fix OTP error handling

.changeset/lovely-pandas-film.md

@@ -0,0 +1,5 @@
+---
+"@slashid/react": patch
+---
+
+Fix the subscriptions logic in the OTP component

packages/react/package.json

@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@slashid/slashid": "3.29.0",
+    "@slashid/slashid": "3.29.4",
     "@storybook/addon-essentials": "7.6.19",
     "@storybook/addon-interactions": "7.4.0",
     "@storybook/addon-links": "7.4.0",
@@ -95,7 +95,7 @@
     "yalc": "1.0.0-pre.53"
   },
   "peerDependencies": {
-    "@slashid/slashid": ">= 3.28.0",
+    "@slashid/slashid": ">= 3.29.4",
     "react": ">=16",
     "react-dom": ">=16"
   }

packages/react/src/components/form/authenticating/otp.tsx

@@ -69,8 +69,14 @@ function mapFormStateToMessageState(
 export const OTPState = ({ flowState }: Props) => {
   const { text } = useConfiguration();
   const { sid, subscribe, unsubscribe } = useSlashID();
-  const { values, registerField, registerSubmit, setError, clearError } =
-    useForm();
+  const {
+    values,
+    registerField,
+    registerSubmit,
+    setError,
+    clearError,
+    resetForm,
+  } = useForm();
   const [formState, setFormState] = useState<FormState>("initial");
   const submitInputRef = useRef<HTMLInputElement>(null);
 
@@ -81,24 +87,24 @@ export const OTPState = ({ flowState }: Props) => {
     });
   }, [factor, formState, handle]);
 
-  useEffect(() => {
-    const onOtpCodeSent = () => setFormState("input");
-    const onOtpIncorrectCodeSubmitted = () => {
-      setError("otp", {
-        message: text["authenticating.otpInput.submit.error"],
-      });
-      values["otp"] = "";
-      setFormState("input");
-    };
+  const onOtpCodeSent = useCallback(() => setFormState("input"), []);
+  const onOtpIncorrectCodeSubmitted = useCallback(() => {
+    resetForm();
+    setError("otp", {
+      message: text["authenticating.otpInput.submit.error"],
+    });
+    setFormState("input");
+  }, [resetForm, setError, text]);
 
+  useEffect(() => {
     subscribe("otpCodeSent", onOtpCodeSent);
     subscribe("otpIncorrectCodeSubmitted", onOtpIncorrectCodeSubmitted);
 
     return () => {
       unsubscribe("otpCodeSent", onOtpCodeSent);
       unsubscribe("otpIncorrectCodeSubmitted", onOtpIncorrectCodeSubmitted);
     };
-  }, [formState, setError, sid, subscribe, text, unsubscribe, values]);
+  }, [onOtpCodeSent, onOtpIncorrectCodeSubmitted, subscribe, unsubscribe]);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     (e) => {