otp mobile sms

Question

HiI want to use OTPinput. Is it possible for the code sent via SMS to be automatically read from the mobile and filled into the OTPinput?

Yohapuja Selvakumaran · Answer

Hi Sarah,Thank you for reaching out to us.Yes, it is possible to have the OTP sent via SMS automatically read and filled into the input field when using the TextBox, provided a few conditions are met. Modern mobile browsers, such as Chrome on Android, support this feature through the use of the autocomplete="one-time-code" attribute.To enable this, you can add the attribute as follows: Sample: https://blazorplayground.syncfusion.com/VDBSDfsyprnHMWKT Please note that this feature is currently supported by Android devices using Chrome and may not work on iOS browsers due to platform restrictions.For more reference, you can refer to the blogs below,https://stackoverflow.com/questions/56180780/can-i-auto-read-otp-on-mobile-browsershttps://stackoverflow.com/questions/61230843/how-to-automatically-paste-the-one-time-code-which-is-received-in-sms-in-react-nWe hope this helps! If you have any further questions or need assistance in implementing this, please feel free to let us know.Regards,Yohapuja S

Sarah · Answer

Hello,Thank you for your response.1-If I want to use SfOtpInput and have the mobile SMS read and the OTP set automatically, what should I do?2-The website I am designing is multilingual, and based on the user's selection, I set the site's direction to either RTL or LTR.When the site is in RTL mode and I use the SfOtpInput component, if the type is set to number, the input fields are completed from right to left, whereas they should be completed from left to right (in right-to-left languages, numbers are entered from left to right).

Yohapuja Selvakumaran · Answer

Hi Sarah,We
understand that you are currently using the SfOtpInput component. You can
achieve the same functionality using the OtpInput component, which is more
streamlined and offers similar capabilities.To
assist you further, we have prepared a sample demonstrating the required
functionality using the OtpInput component:Sample: https://blazorplayground.syncfusion.com/BtLSjpVkzRVvqIBN
For
additional information, you may refer to the following resources:Demo: https://blazor.syncfusion.com/demos/otp-input/default-functionalities?theme=fluent2
Documentation: http://blazor.syncfusion.com/documentation/otp-input/getting-started-webapp
Additionally,
you might find the following blog post helpful, which explains how to
automatically read or verify an SMS OTP in your application:https://www.syncfusion.com/forums/158425/how-to-read-or-verify-sms-otp-automatically-in-my-app  If
you are still facing any issues or if your requirement differs from what is
demonstrated, kindly share more details about your exact use case. We will be
happy to assist you further.Regards,Yohapuja
S

Sarah · Answer

Hi,I tested the code below on three mobile phones and it didn't work. Unfortunately, the link below has an error and will not workhttps://blazorplayground.syncfusion.com/BtLSjpVkzRVvqIBN?_gl=1*1w9uo9m*_ga*MTA4NjgxMzkwNy4xNzQwNzQ1OTQx*_ga_41J4HFMX1J*MTc0NTk0MjY2Mi4zNi4xLjE3NDU5NDI4NTQuMC4wLjA.

Yohapuja Selvakumaran · Answer

Hi Sarah,Instead
of using the TextBox component, we recommend using our dedicated OTP Input
component, which is specifically designed for entering one-time passwords and
offers better compatibility with mobile devices.If
you encounter any issues while using the OTP Input component, please feel free
to get back to us. We’ll be happy to assist you further.For
more information, please refer to the following resources:Demo: https://blazor.syncfusion.com/demos/otp-input/default-functionalities?theme=fluent2Documentation: http://blazor.syncfusion.com/documentation/otp-input/getting-started-webappRegards,Yohapuja
S