Username, Password and OTP autofill for iOS Apps for faster login 🤨🤪
Last month I went for an iOS dev meetup at Apple App Accelerator Bengaluru, India. There they discussed about many iOS 11 features and best practices which we need to implement in our apps. Password autofill was one such feature. Here , I will explain what it is and how to do it.
--
You might have seen the computer browsers like chrome and safari giving password suggestions and autofilling passwords. It was a real life saver for me. We don’t have to remember passwords for each and every websites out there on the internet. From iOS 11, autofill was introduced (watch WWDC video). Any control that confirms to UITextInput
protocol like UITextField
, UITextView
can use this feature.
WWDC Video iOS 11: Introducing Password AutoFill for Apps
WWDC Video iOS 12: Automatic Strong Passwords and Security Code Autofill.
User data is saved in the users device and is synced to the iCloud keychain and will be available to all the devices using the same iCloud. ie; user’s other devices.
Apple does not have access to the credentials stored in Keychain, so users’ privacy is preserved, as well.
How to enable autofill?
UITextFiled
or UITextView
confirms to UITextInput
protocol as mentioned earlier. UITextInput
confirms to UIKeyInput
and UIKeyInput
confirms to UITextInputTraits
protocol. UITextInputTraits
has an optional var called textContentType
which will provide the keyboard with extra information about the semantic intent of the text document.
As of now, till iOS 11, we have the following textContentTypes available:
The last two textContentTypes
are added in iOS 11.ie; username and password.
Just set the textContentType for each textField
.
usernameTF.textContentType = .usernamepasswordTF.textContentType = .password
You can also set this from the xcode storyboard as well. In the attributes inspector, under the UITextInputTraits section:
Compile and run the app. Click on the textfield and you will see the keyboard with a key icon towards the side. This toolbar is called quick type bar.
Tap on the key icon and it will ask for authentication. If the device has TouchID, it will ask for touchID authentication.
Important: When the authentication screen is prompted, the app enters an inactive state. You should not close the login or the screen with the textfields when the app become inactive. This is how it normally works.
After authentication, the OS will show a list of saved passwords from which you can select the one that you think is the right one for the app. This will automatically fill all the textfields as per the textContentType
given.
That’s it !
Can the app predict the password accurately instead of making the user select the password from the list?
YES!. If you are an iOS user, you might have seen this:
So, previously the OS listed all the passwords saved in the keychain because it didn’t knew that this app is associated with a domain. To fix this, we have to enable the associated domains in the xcode project settings.
In Xcode project settings → Capabilites →Associated Domains, add your website domain. The domain name should be prefixed with the keyword webcredentials:
because we are using the webcredentials service and this is important. Example: webcredentials:facebook.com
It will look something like this:
This is all what we need to do to tell iOS that the app is associated to a website. Now we need the website to agree and point back to the app so that the iOS can establish a two way connection.
Have a look at my other article on Universal Links in iOS which explains about how to setup AASA file. I am not explaining it here. Just note that universal links uses applinks:
prefix instead of webcredentials:
prefix for using shared web credentials.
The AASA file content will look like this:
This is a json file with app identifier string array for key “apps” as you can see.
The app ID is basically the teamID, followed by a period character (.) and then the apps bundle ID.
This json file should be placed in the .well-known
folder or in the root
folder of your website. .well-known
folder is preferred.
Note: when you are testing this, make sure you use a real device. Associated domains are a device only feature.
Compile and run the app. If everything is proper and the shared web credentials has some data specific to your domain, it will be shown above the keyboard in the quick type bar as shown above.
If it is not showing, it should be because of your AASA file being not accessible to the iOS. Do watch the WWDC video to know more.
How to add/delete/modify passwords?
Well, in iOS 11, this feature is added to the device settings .
How to AutoFill One Time Security Code or OTP (iOS 12+ )?
This works the same way as the username and password. You need to change textContentType
of the OTP textField to .oneTimeCode
.
myOTPTextField.textContentType = .oneTimeCode
iOS supports Password AutoFill on
UITextField
, UITextView, and any custom view that adopts theUITextInput
protocol.Note: If you use a custom input view for a security code input text field, iOS cannot display the necessary AutoFill UI.
That’s it. !
Enjoy!!
If you enjoyed reading this post, please share and give some clapps so others can find it 👏👏👏👏👏 !!!!
You can follow me on Medium for fresh articles. Also, connect with me on LinkedIn.
If you have any comment, question, or recommendation, feel free to post them in the comment section below!