otp mobile sms

[Sarah]

Hi

I 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]

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:

 

<SfTextBox Placeholder="Enter OTP" InputAttributes="@(new Dictionary<string, object>{{ "autocomplete", "one-time-code" }})"></SfTextBox>

 

 

 

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-browsers

https://stackoverflow.com/questions/61230843/how-to-automatically-paste-the-one-time-code-which-is-received-in-sms-in-react-n

We 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]

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]

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]

Hi,

I tested the code below on three mobile phones and it didn't work.

<SfTextBox Placeholder="Enter OTP" InputAttributes="@(new Dictionary<string, object>{{ "autocomplete", "one-time-code" }})"></SfTextBox>

Unfortunately, the link below has an error and will not work

https://blazorplayground.syncfusion.com/BtLSjpVkzRVvqIBN?_gl=1*1w9uo9m*_ga*MTA4NjgxMzkwNy4xNzQwNzQ1OTQx*_ga_41J4HFMX1J*MTc0NTk0MjY2Mi4zNi4xLjE3NDU5NDI4NTQuMC4wLjA.

[Yohapuja Selvakumaran]

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=fluent2

Documentation: http://blazor.syncfusion.com/documentation/otp-input/getting-started-webapp

Regards,

Yohapuja S

[Harshad]

Hi Yohapuja,

The original question was how to make SfOtpInput accept and autofill the OTP received when working on a mobile phone.  

Because there are multiple input boxes in SfOtpInput, when user taps on the otp received on the phone, it fills only the first character/number in the first box, the rest of the otp numbers/characters are ignored.  

So now my question is, if I define 6 digit OTP and receive 6 digit OTP from the provider on my phone, can it be filled in the 6 places provided by SfOtpInput instead of only the first box?

Thanks

Harshad

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Sarah,

 

we understand that you’d like the OTP sent via SMS on a mobile device to be automatically read and filled into the Syncfusion Blazor OtpInput component.

 

Unfortunately , the OtpInput component does not support automatic OTP detection and autofill directly from SMS messages. This limitation exists because web browsers and hybrid frameworks like .NET MAUI Blazor cannot access or parse SMS messages for autofill. SMS retriever APIs that enable auto-detection are typically available only to native mobile applications, not to browser-based or WebView-hosted apps.

 

Here’s what is possible:

• Android clipboard suggestion: When an OTP arrives via SMS, Android often shows the OTP in the clipboard suggestion bar. By focusing on the first input field and selecting the suggestion, the OTP can be auto-filled across all six fields.
• Paste support: If a user copies the OTP and pastes it into the first input field, the component intelligently distributes the digits across the remaining fields, avoiding manual entry for each digit.

 

We have considered “Feature request: OTP Input — OTP Auto-Fill Support from Clipboard and Paste “ as a feature from our end, but we do not have any immediate plans to implement this feature. At the planning stage for every release cycle, we review all open features and implement them based on feature rank, customer request count, and volume wish-list.

 

The status of implementation can be tracked through the feedback portal link below: Feature request: OTP Input — OTP Auto-Fill Support from Clipboard and Paste in Blazor | Feedback Portal

 

 

[Heinrich Klaaseen]

Yes, it should be possible on supported devices. I’ve seen apps use SMS auto-read APIs to detect the OTP from incoming messages and fill it automatically into the OTPinput field.

[Priyanka Karthikeyan]

Hi Heinrich Klaaseen,

Thank you for your feedback and for sharing your perspective.

You are absolutely right that automatic OTP detection and autofill is a common experience in many mobile applications. However, we would like to clarify that this functionality is supported only in native mobile apps (Android/iOS) through platform-specific SMS retrieval APIs.

In the case of Syncfusion Blazor OtpInput, which runs in a browser or WebView environment, there are platform limitations that prevent direct access to SMS messages. Due to these restrictions, it is not possible to automatically read and distribute the OTP across multiple input fields.

That said, the component does support the following to improve usability:

• Paste support: Users can paste the full OTP into the first field, and it will automatically populate across all input boxes.
• Android OTP suggestion: On some Android devices, OTP suggestions may appear above the keyboard, though behavior can vary depending on the browser and device.

We understand the importance of seamless OTP entry and appreciate your feedback in this area. Enhancements around autofill and improved user experience are being tracked as part of our feature review process and will be evaluated during future planning cycles.

Thank you for your understanding and continued support.

Regards,

Priyanka K