From Technopreneur - Mostly for iOS

Sunday, 9 December 2018

Implementing autocompletion OTP field in iOS

Long waiting is over. !!  iOS 12 brings Autofill for OTP text field which is close to Android provided a decade back. Previously in iOS we used to toggle between OTP text screen and message inbox.  Which was hard to remember and time consuming resulting a bad user experience. Personally, I have been asked from the client/customer couple of times to implement autocompletion for OTP field and took me a lot of time to convey that it is not possible in iOS.

Why Autofill was not possible previously? 

We all know that Apple gives at most care for user privacy. When we see iOS architecture, each individual app is like a separate island. There is no inter-app bridge between apps (exception for Keychain and URLSchemes APIs which gives very limited scope). Thus we cannot read message content from inbox.

Where to start Autofilling?

First of all, the target SMS need to have the OTP Code with prefix string "Code" or "Passcode"on its message content. Beware of OTP code accepted only if it has no space and works only with system provided keyboard. Do not expect this feature works with custom keyboard.

Now from the application side, make sure that device running in iOS 12 and set text field content type to `.OneTimeCode`.

This can be also achieved via storyboard. Just select UITextField in storyboard/XIB and click on Attribute Inspector. Go to text input trait, For Content Type, choose "One Time Code" from drop down. Keyboard Type doesn't matter.

 That's all about implementations...! Now as given in the first diagram, as soon as a SMS with OTP code landed in the message inbox, we will see the same in the tool bar of the Keyboard. All we need to tap the code for autofill OTP field. 

Read further from Apple's complete documentation 
Buy me a coffeeBuy me a coffee

I am ...

Subscribe to my blogSubscribe to my Blog

& My Creative stuffs.

Copyright © Blog by Jeevan | Powered by Blogger
Design by SimpleWpThemes | Blogger Theme by