If you\’re developing an app for iOS in .Net Maui and want use OTP to authenticate users with SMS, read this to implement auto fill in just a few lines of code.
While in the testing phase of an iOS application I am developing in .Net Maui I came across the requirement of making my OTP authentication work like iOS users expect it to behave (after the SMS containing the authentication code is received, the authentication code itself appears at the top of the soft keboard and the user can then just tap it to auto fill the entry field). Being an Android user myself, it was new to me and I had to study and experiment to eventually make it work.
I found out that in Swift there are 3 requirements to accomplish this behaviour:
- Make the textContentType of the entry field a .oneTimeCode.
- Make the keyboard type of the entry numeric.
- Make sure the text of the SMS is formatted a certain way.
Let\’s see how we can take care of these requirements in Maui.
The first thing we need to do is figure out how we can make a Maui Entry control of type UITextContentType.oneTimeCode. That means we have to dive a bit deeper and get to the native code level using Maui tools. We will use handlers to accomplish it.
Because handlers apply to all controls of the the type being handled and I only want one Entry field in my app to be customized, I subclassed the Entry control and created a handler for that subclass only. These are the steps:
Create a new folder in your project. This folder will host your custom controls. I will call it \”Controls\”.
Add a new public class in that folder, let\’s call it \”OneTimeCodeEntry\”. Make it public and inherit from Maui.Entry. Save and close this tab.
Now we can add a handler that will only affect this custom control we created.
In MauiProgram.cs add these lines before the return:
Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(\"OneTimeCode\", (handler, view) =>
{
if (view is OneTimeCodeEntry)
{
handler.PlatformView.TextContentType = UIKit.UITextContentType.OneTimeCode;
handler.PlatformView.KeyboardType = UIKit.UIKeyboardType.NumberPad;
}
});
This code will achieve our first goal of making the Entry UITextContentType.OneTimeCode. It will also make the keyboard type numeric (this can also be achived in regular XAML\’s \”keyboard\” property).
Next, in the Xaml page where we want the OTP code to be auto filled we will replace the regular Entry control with our custom OneTimeCodeEntry. In order to do that add this line at the top, to reference our controls namespace:
xmlns:controls =\”clr-namespace:{your project name}.Controls\”
Replace the regular Entry control (the one where the user has to type the OTP code) and replace it with <controls:OneTimeCodeEntry>.
Be aware that you have to take care of the styling as you want.
The last step is to make sure the SMS is parsed correctly and for that end the text in the SMS should be constructed a certain way. For me the text: \”Your security code is XXXX\” worked. You can experiment with the text and see what works for you.
Now when the user is on the login page and receives the SMS, the code will appear at the top of the soft keyboard and the user can tap it to auto fill the entry.