App Development

Password AutoFill in iOS 11

Image of a fingerprint superimposed on the return key of a laptop keyboard.

Passwords are everywhere, and they can act as a source of frustration and app abandonment when users are presented with login screens. The Safari web browser on iOS and macOS includes password saving, and the user can choose to sync those passwords with all of their devices via iCloud. In iOS 11, Apple is introducing new APIs that allow third-party apps to fill in user credentials automatically.

Preparing your App for AutoFill

AutoFill can work automatically in some apps based on heuristics in iOS 11, but there are simple techniques available to guarantee that your app will work with AutoFill. Showing the password button is as simple as changing one setting on your text fields, while associating your specific app password requires a web file. Let’s walk through both scenarios.

Setting up your text fields

You can configure your text fields for AutoFill in code or using interface builder. There are two new constants for UITextContentType that we’ll use. Here’s how you do it in code:

usernameField.textContentType = .username
passwordField.textContentType = .password

Once you have that, iOS will display a button above the keyboard that lets users select a password from their saved list. This also works for login flows that have multiple screens. Next, let’s take it further and associate our website with our apps so that iOS can suggest the correct password.

Ensuring that iOS Suggests the Correct Password

By default, iOS 11 will not try to guess the correct password to show to the user. By following the steps in this section, you can inform iOS which password belongs to your app by associating it with your website, and that password will be suggested to the user.

Associating your app with your website requires a file called apple-app-site-association. This is the same file that’s used for deep-linking, which makes it easy to add AutoFill to an app that already supports deep-linking. If your app doesn’t have deep-linking, you’ll need to enable Associated Domains in your Xcode project.

On your server, add an apple-app-site-association file, or extend your current one, if present. It should contain a webcredentials section that specifies your app. Here’s an example:

{
	"webcredentials": {
		"apps": [E5336VM85F.com.example.YourApp]
	}
}

E5336VM85F.com.example.YourApp is an example App ID. You can obtain the ID for your app by signing into the developer portal. Apple recommends adding this file to the /.well-known directory, but you may also use the root. The full path will look like this:

https://example.com/.well-known/apple-app-site-association

That https is important. iOS will only look for the file if it’s protected by https.

At this point, you should be ready to test. Build and run your app on a device running iOS 11 (this functionality is not available in the simulator). When you activate one of your login text fields, you should see the suggestion in the QuickType bar above the keyboard.

If you’re having trouble, here are a couple of debugging tips:

  • Double-check to make sure that you have the password saved on the device. You can verify this by going to “Accounts & Passwords” in the Settings app. If you don’t see a saved password for your website, login with Safari and choose to save the password when prompted. You can also choose to add a password directly from that Settings page. Then, return to your app.
  • If your password is saved but the keyboard doesn’t have the suggestion, check the device logs for messages by the process swcd. This is the system process that will log errors for this workflow.

Once you have those done, your app will be ready for Password AutoFill in iOS 11! For more information about Password AutoFill in iOS 11, check out Apple’s WWDC session. Details on the apple-app-site-association file and universal links can be found at this link.

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article