All about iOS 12 Autofill Passwords Tool API’s

Ali Akhtar
13 min readSep 10, 2019

--

This amazing gif came from Darin Senneff

Password AutoFill

Password AutoFill simplifies login and account creation tasks for iOS apps and webpages.

With just a few taps, your users can create and save new passwords or log in to an existing account. Users don’t even need to know their password; the system handles everything. This convenience increases the likelihood that users will complete your app’s onboarding process and start using your app more quickly.

Additionally, by encouraging users to select unique, strong passwords, you increase the security of your app.

By default, Password AutoFill saves the user’s login credentials on their current iOS device. iOS can sync these credentials securely across the user’s devices using iCloud Keychain. Password AutoFill recommends credentials only for your app’s associated domain, and the user must authenticate using Face ID or Touch ID before accessing these credentials.

Availability

Password Autofill is iOS 11 feature, that puts the password your users already saved in Safari, iCloud Keychain, directly on the keyboard within your apps to make logging super simple. Apple team made password autofill because logging into apps is hard. In iOS 11 we need to perform very tedious tasks to save the password in iCloud Keychain.

In iOS 12, it’s now offered to save credentials when a user logs into an app with a new account. This way users can then use these credentials in your app and website on all of their devices automatically. Furthermore, Apple added some new tag fields, security code autofill, strong password recommendation and so on.

PreRequisite

Make sure you enable Autofill Passwords on your device. Steps to enable
Go to Setting → Passwords & Accounts → Enable AutoFill Passwords.

Setting Up an App’s Associated Domains

The first step to enable autofill password is to set up an App’s Associated Domains. What does it mean?

As shown in Figure 1 and Figure 2 autofill password suggests me available password specific to Twitter when I try to login via website or application. The answer is password saved against the domain (mobile.twitter.com).

Figure 1 and Figure 2

A domain is a website. Often you will want to associate your website with your app because they are often different versions of the same app or are related and want to share data. To associate a website with an app, you will need to have a file on your website and an entitlement in your app.

An associated domain matches the Associated Domains Entitlement in your app with an apple-app-site-association file on your website.

It’s important to establish an association between domains and your iOS app if you want to share credentials between application and your website. There are two steps to configured domains.

Step 1 Add the Associated Domains Entitlement

To set up the entitlement in your app, open the project’s Capabilities tab and enable Associated Domains. This step adds the Associated Domains Entitlement to your app as well as the associated domains feature to your app ID.

Each domain you specify uses the following format:
<service>:<fully qualified domain>[:port number]. Twitter should have one in its associated domain entrieswebcredentials:mobile.twitter.com

I deployed my website on Heroku which has domain (damp-inlet-56444.herokuapp.com). Note don't write https:// in the domain. So my app associated domain will be like thiswebcredentials:damp-inlet-56444.herokuapp.com

Step 2 Add the Apple App Site Association File

Next, add the Apple App Site Association file to your website.

Create a file named apple-app-site-association (without an extension). Update the file to contain the JSON representation of a dictionary listing the app identifiers associated with your domain for the webcredentials service.

Use the following format for the app identifiers:
<Team Identifier>.<Bundle Identifier>
D3KQX62K1A.com.example.DemoApp

{
"webcredentials": {
"apps": [ "D3KQX62K1A.com.example.DemoApp",
"D3KQX62K1A.com.example.DemoAdminApp" ]
}
}

Replace D3KQX62K1A with your paid developer account teamId. Also, make sure your provisional profile is created with teamId. Replace com.example.DemoApp with your bundle Id.

Place this file either in your site’s well-known directory or directly in its root directory. In my case it is https://damp-inlet-56444.herokuapp.com/apple-app-site-association

To validate your apple-app-site-association file you can use Branch.io Apple App Site Association Validator. As shown in Figure 3, I validated my apple-app-site-association file and my domain is passed it means server-side developer did its part.

Now when your app is installed on an iOS device, the system attempts to download and verify the association file from the domains listed in your entitlement . For each domain, iOS appends /apple-app-site-association (or /.well-known/apple-app-site-association) to its name. With this new URL, the system downloads the contents and ensures the file includes the app’s application identifier. If running application bundle identifier is not listed in apple-app-site-association file autofill password will not work.

In our case when app installs the first time it checks the domains in the entitlements file which is damp-inlet-56444.herokuapp.com, iOS creates url from domain https://damp-inlet-56444.herokuapp.com/apple-app-site-association and tries to download a file.

Figure 3

In short → App through your signed entitlement says what website or websites it affiliated with. On app installs /update iOS tries to download apple-app-site-association file from the all domains listed in the entitlement file (Note : domains should be https).

In response to that request your website return a JSON response in the form of this file. iOS then list all of the apps that I am associated with and if the app points to the website and the website points to right back the app we have secure two way link

Password Saving

iOS 12 offers to save credentials when a user logs into your app with a new account. This way users can then use these credentials in your app and website on all of their devices.

Let’s talk about how to ensure users are prompted to save and update passwords in your app. Here is how saving works:

  1. First auto fill infers that we are in a login scenario.
  2. Then auto fill checks the eligibility of your app: if there is an association between your app and domain on the web. Without this association saving password will not be offered.
  3. Next, it finds the username and password fields so that it knows which data to save in the new credential.
  4. Then it detects that sign in action has occurred.
  5. Prompt the user save or update the password based on if this is a brand new credentials that not yet in the keychain or if the user is updating an existing credentials.

As shown in Figure 4, we have userNameTextField and passwordTextField and when user taps on login Button it checks if credentials match. Then it proceeds to the home screen super simple. Now let’s talk about two steps you need to work next to save password in the iCloud keychain

Figure 4

Step 1 Tagging Fields

As shown below in the Figures we tagged userNameTextField and passwordTextField . By doing this iOS will able to perform few things

  1. iOS will show the QuickType bar on all devices running iOS 11+ when at least one password is saved in the keychain.
  2. Inferred login scenario
  3. When it automatically saving userName and Password to the keychain it used these tag to 100% sure which field is username and which is password
UserName Field Tag
Password Field Tag

Run the application and you will see Password icon is appearing in QuickType Bar means tagging is working fine

Step 2 Pushing New Controller to the Navigation Stack
Run the application when you tap on Login and land to Home Screen by pushing Home Screen to the navigation stack. At this point only iOS 12+ detects login action and it shows the prompt as shown in Figure 6.

Figure 6

By tapping on Save Password button It saved the password in iCLoud keychain. You can see this password by going Setting → Passwords & Accounts → Website & App Passwords and as shown in Figure it lists down all the passwords in the keychain

Figure 7

You can see the password detail by tapping on the list

Figure 8

Password AutoFill Suggestion

As shown in Figure 9 when we again landed into the login screen and tap on the userName textfield and make it first responder, iOS detects text field has content Type userName and performs the following actions:

  1. Read the domain in the entailment and find the domain in our case which is damp-inlet-56444.herokuapp.com
  2. Check any password against this domain exists in the keychain (Passwords section). In our case previously we saved the password. So it found one password and suggested the userName in QuickTypeBar to autofill password in one-tap:
Figure 9

As shown in Figure 10 when I tap on suggested password it automatically filled the fields using their tags:

Let’s say user changed the password somewhere else and in our case, we changed the password locally from 123 to 1234.

Now when you login with the updated password but with the same userName, iOS will show the update Password prompt instead of Save password 👊

Automatic Strong Passwords

Autofill even suggests username to ease the signup process. With an automatic strong password, account creation is only a few taps away. So users are more likely to sign up and used your services. Here is how password saving works:

  1. When your app presents a view controller auto fill infers its type in this case it's a signup view controller (Infer the view controller type ).
  2. It will then check the eligibility of your app based on the associated domain to figure out it can save the password. If that’s the case auto fill will then detect relevant signup form element, the username, password.
  3. Once the username becomes the first responder, autofill suggests a username (iOS 12+).
  4. The user proceeds with the suggested username and eventually, the password field becomes the first responder. Autofill inserts a strong password into the password field. At this point, the user only needs to proceed with the suggested password and signup. Autofill cares about saving the password. In many cases, this happens automatically without any adoption requirement in your apps.

However, in order to ensure your app's compatibility with automatic string password there is a certain number of steps you should take. Let’s talk about them.

Step 1. Tagging Fields

Tagging UserName

Note: Password type we use New Password which is very important and also checking Secure Text Entry is optional.

Tagging Password Field

As shown in Figure 10 when you run the application and make the password first responder you will get this error:

Figure 10

Respect the error and enable iCloud keychain in iPhone by following the following steps. How to enable iCloud keychain:

  1. Go to the Setting
  2. Tap on UserName (Apple Id)
  3. Tap on iCloud
  4. Tap on keychain
  5. Enable iCloud Keychain

As shown in Figure 11 when username become first responder it suggests the userName:

Figure 11

As shown in Figure 12, iOS+ suggested password. When the user taps on Use Strong password, it saved this password on iCloud Keychain as well, which will share by all devices. So when the user opens this application on another phone it will be appearing in autofill password lists:

Figure 12

Format of Generated Password Format

The password generated by default contains uppercase, digits, hyphens , lowercase characters and 20 characters long

If your application have different password policy you can customize these rules as well. Apple provide very interactive online Password Rules Validation Tool to create custom and validate custom password rules logic

As shown below in the Figure 13 I added $ an additional requirement in password creation logic:

Figure 13

In addition to create custom rules in Password Rules Validation Tool. It also gives you possible sample upto 10,000. You can use these sample in your uni test as well as shown in Figure 14

Figure 14

Now copy that rules and paste in Password Rule field. One thing to note: Password Rule field is available when your content type is New Password.

Security Code AutoFill

If the system can parse a security code from an SMS message, the QuickType bar shows the code for up to three minutes after it has been received. If a security code arrives while the text input view is selected, the system pushes the incoming code to the QuickType bar.

To enable security code autofill on a UITextField we need to set the textContentType property to .oneTimeCode. Here is the example:

As shown in Figure 15, code coming from sms is showing in QuickType Bar. When tapping this code, the system will populate the text field with this code:

Figure 15

Note: If you use a custom input view for a security code input text field, iOS cannot display the necessary AutoFill UI.

Saving Password in iOS 11

Now Select Target and Change the Deployment target from iOS 12 to 11 and if you build the application you will get the error. You can resolve this error as shown in Figure 16. Also, delete all the userName and passwords in the iCLoud keychain against the domain. Run the application and iPhone having iOS 11.

Figure 16

Run the application and login with the same username and password previously used. You will not get any prompt to save the password in iCloud keychain. This is because this feature is only available on iOS 12. The question is How to achieve this in iOS 11 and the answer is you have to manually save password using SecAddSharedWebCredential api please refer to this link.

As shown in Figure 17, I saved the password manually using code through SecAddSharedWebCredential api.

Figure 17

As shown in Figure 18, when the code runs in device having iOS 12, it prompted me whether I want to save the password or not. Since I don’t have any device having iOS 11, so this might be changed. But you got the idea.

Figure 18

Access Password in iCLoud keychain

As shown in Figure 19 when accessing keychain, it first asks permission of the user whether it allows the application to access the password against this domain and userName.

Figure 19

As shown in Figure 20 when tapping on Not Now or OK it will invoke closure. If user tap Ok as in my case we get the userName and password with the code shown. This is the code I copied from this link. We get the error If user tap NotNow or in user iPhone Autofill is disabled:

Figure 20

Summary

Password autofill is a feature that simplifies login and account creation tasks for iOS apps and web pages available from iOS 11.

In iOS 12 Apple added some new features which include strong password and username suggestion for making signup process with just a few taps.

Previously developer has to do a lot of effort to save the password in iCloud keychain. With iOS 12 Apple takes this responsibility and automatically prompt to save a password in iCloud keychain. Now you learned all the features and the configuration to make this working in your iOS application with examples.

Useful links

If you wish to learn more, check these useful links from other developers and Apple guidelines:

  • Username, Password and OTP autofill for iOS Apps for faster login (guide):

Thanks for reading!

--

--