iOS 11 Password Autofill
Password autofill is one of the exciting features of iOS 11. Entering password is always a source of friction. In iOS 11 you never have to remember your passwords. Just like safari suggests the password, now your app can auto-fill the user credentials and offer them a faster login.
How to implement?
Implementing password autofill in your app is super easy. All you need to do is set the textContentType for username and password textfields.
userNameTextField.textContentType = .username
passwordTextField.textContentType = .passwordSame can be done in storyboard as well
QuickType bar
Let’s run the app and see how it appears on the screen. When tapping on the username or password textfield a quickType bar will appear with a key icon. Clicking on the key icon will ask for authentication using Touch-Id, then it will list all the passwords saved in the keychain. Picking any password will fill up the username&password textfields.
Associating app & website
So far we didn’t tell the app that which is my associated website. So it displayed all the passwords in the keychain. Now let’s associate our app and website. First we need to add our website domain to Associated Domains in Xcode. In Xcode project settings-> Capabilites -> Associated Domains, add your website domain.
Now your app knows about your associated website. Your website should confirm this association. For that, create a json file named apple-app-site-association with the following content.
{
“webcredentials”: {
“apps”: [“SR9HR505U.com.anilvarghese.pw-autofill”]
}
}Here SR9HR505U is your team id and com.anilvarghese.pw-autofill is app bundleId. Add this file to your website root folder or .well-known directory(prefferred).
When launching the app iOS looks for this file on your server using a secure connection (you must have SSL setup on your server). App will automatically send a request to https://www.example.com/apple-app-site-association and look for your app bundleId in the response.
You can verify your setup by checking the device logs in the console when running the app. If everything is okay, you get “SiteApproved” .
Now we have a two-way association between our app and website. Launch the app and notice that the QuickType bar suggests your credentials right on your keyboard so that you can log in with a single tap.
Cool 😎. Try this out. Let me know if you have any questions in comments.
Shared Web Credentials (Update)
Some of you guys asked me about whether the auto-fill feature save/update the password in the keychain?
It doesn’t update the password automatically. But there is a way to do it, known as shared web credential. Using this your native iOS apps can share credentials with their website counterparts. User can create a new account, update the password, or delete his account from within the app. These changes will be then synced by iCloud and used by safari, thereby enables sharing user credentials between app&website. However it requires user concern.
Shared web credentail is explained very well in this apple article Managing shared credentials
