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 = .password

Same 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.

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.