iOS 11 - Autofill Passwords

In this tutorial, we will discuss about AutoFill password feature available in iOS.

Remembering passwords that we create in multiple applications is not only hard but also has risk to forget sooner or later. Then we have to use Forgot Password feature to set a reset your password. 

Auto-filling passwords is available in Web for a long time. Though iOS Safari provided this feature of auto populating passwords for mobile websites, the native applications are left behind and users have to take responsibility for their passwords.

Starting from iOS 11,  Apple provide an exciting feature where native apps can use this auto-filling passwords in applications.

Which means, user from iOS 11 don't have to necessarily remember their passwords using in their apps.

What we should do?

We would be using UITextInputTraits protocol, and set the ‘textContentType' property.

UITextInputTraits protocol defines features associated with the keyboard input to a text object.

Setting the property will enable a 'Key' icon in QuickType bar. Tapping on the icon will show the saved password list.

How to do?

Create a text field, and set the ‘textContentType' property.

To apply the setting in code,

nameTextField.textContentType = .username

passwordTextField.textContentType = ,password

To set the content type in storyboard,

To Test the feature

Run your application. When you tap on the text filed and keyboard shows up, you will notice the QuickTypebar will display a “Key" icon. Tapping on that key icon will show the saved user name options to choose.

Though we are able to retrieve all the username details for these text field, it would be even more better if we could narrow down to show only the username associated with our app domain name. 

Assuming the native application has a web page and user has logged in to the website using iOS Safari and saved the password. 

To do this, we have to do few more steps. 

We need to link our app to the website. 

Tap on project target. Select Capabilities. Select Associated Domains. Turn on Associated Domains.

Tap on the + button and add your company domain.

Now the app is aware about its website. Lets inform the website about the app.

Create a json file with the name, apple-app-site-association.

Add the below format of content and update your data as required

{

    “webcredentials” : {

        “apps” : ["TeamID.AppBunleID"]

    }

}

In above jSon, replace your 'Team ID' and 'App Bundle ID' with appropriate values. This file should be placed in your web site root folder.

Now the website knows the application and it can verify its authenticity. Once the above steps are done correctly, we can show the saved exact user name on the website to the native app.

You can now run the app and you could see the difference in the Quick Type bar. The user name associated with that website will be now shown to the user. 

Conculsion
Apple has provided a better approach to sync passwords from Safari to Native apps. Adding this feature to your apps will help the users for convenience login. You can refer more about this Auto Fill feature in WWDC session.