Implementing a paste functionality in OTP login where the user can directly paste the OTP.

src/pages/authentication/LoginWithOtp.jsx

@@ -29,6 +29,8 @@ const LoginWithOtp = () => {
     handleSubmit,
     formState: { errors, isSubmitted },
     getValues,
+    setValue,
+    trigger,
   } = useForm({
     resolver: zodResolver(otpSchema),
   });
@@ -64,6 +66,7 @@ const formatTime = (seconds) => {
     return `${min}:${sec}`;
   };
 
+  // Time Logic for OTP expiry
   useEffect(() => {
     const otpSentTime = localStorage.getItem("otpSentTime");
     const now = Date.now();
@@ -74,6 +77,8 @@ useEffect(() => {
       setTimeLeft(remaining);
     }
   }, []);
+
+
   useEffect(() => {
     if (timeLeft <= 0) return;
 
@@ -92,6 +97,30 @@ useEffect(() => {
     return () => clearInterval(timer);
   }, [timeLeft]);
 
+  // Handle Paste Event
+  const handlePaste = (e) => {
+    e.preventDefault();
+
+    const pastedData = e.clipboardData.getData("text/plain").trim();
+    if (pastedData.match(/^\d{4}$/)) {
+      for (let i = 0; i < pastedData.length; i++) {
+        setValue(`otp${i + 1}`, pastedData[i], { shouldValidate: true });
+
+        if (inputRefs.current[i + 1]) {
+          inputRefs.current[i + 1].focus();
+        }
+      }
+      trigger(["otp1", "otp2", "otp3", "otp4"]);
+    } else {
+      showToast("Invalid OTP format pasted. Please enter 4 digits")
+
+      for (let i = 0; i < 4; i++) {
+        setValue(`otp${i + 1}`, "")
+
+      }
+    }
+  }
+
 
   return (
     <AuthWrapper>
@@ -109,8 +138,7 @@ useEffect(() => {
                   key={num}
                   type="text"
                   maxLength={1}
-                  className={`form-control text-center ${
+                  className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
-                    errors[`otp${num}`] ? "is-invalid" : ""
                     }`}
                   ref={(el) => {
                     inputRefs.current[idx] = el;
@@ -121,6 +149,9 @@ useEffect(() => {
                     onChange(e);
                     if (/^\d$/.test(val) && idx < 3) {
                       inputRefs.current[idx + 1]?.focus();
+
+                    } else if (val === "" && idx > 0) {
+                      inputRefs.current[idx - 1]?.focus();
                     }
                   }}
                   onKeyDown={(e) => {
@@ -132,6 +163,8 @@ useEffect(() => {
                       inputRefs.current[idx - 1]?.focus();
                     }
                   }}
+
+                  onPaste={idx === 0 ? handlePaste : undefined}
                   style={{ width: "40px", height: "40px", fontSize: "15px" }}
                   {...rest}
                 />