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 = .username
passwordTF.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:

source: wwdc 2017 session 206

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 .

click on Accounts & passwords and authenticate

Add/delete/modify the passowrd here.

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 the UITextInput 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!