Configure Password Autofill on a React Native Expo app

password_autofill_expo_how_to.md

Password Autofill on a React Native Expo app

Developing an app to accompany our website, worried that we would lose people in the transition if they couldn't remember their password, we were looking to make our app do Password AutoFill, a feature in iOS.

A talk from WWDC introducing the feature: https://developer.apple.com/videos/play/wwdc2017/206/

It works well, but there were a few bumps in the road making it work for React Native on Expo, so here are some notes to help out.

Apple's docs are here: https://developer.apple.com/documentation/security/password_autofill and they say something like this:

Enable Password AutoFill

To provide the best user experience and ensure your app fully supports Password AutoFill, perform the following steps:

1. Set up your app’s associated domains. See Setting Up an App’s Associated Domains.:

• Add the Associated Domains Entitlement
• Add the Apple App Site Association File to your website

2. Set the correct AutoFill type on relevant text fields.

Here are some notes on my experience with those steps:

Add the Associated Domains Entitlement

This is where you add a tag to your app saying it is associated with your website. And this is the hardest part.

1. Add the associatedDomains config to your app.json

The Expo docs reference this, but they don't say what the format of the array should be:

    /*
      An array that contains Associated Domains for the standalone app.
    */
    "associatedDomains": ARRAY,

But based on the apple docs, it's not too hard to guess that it should look something like this:

"ios": {
  "bundleIdentifier": "com.mysite.mysite-app-ios",
  "associatedDomains": ["webcredentials:www.mysite.com"]
},

When I uploaded a new IPA to AppStore Connect with the new config at this point, I got an error:

ERROR ITMS-90046: "Invalid Code Signing Entitlements. Your application bundle's signature contains code signing entitlements that are not supported on iOS. Specifically, value '*' for key 'com.apple.developer.associated-domains' in 'Payload/Exponent.app/Exponent' is not supported."

So the other things necessary are:

2. Enable Associated Domains entitlement to allow your app to use the feature

Do that here: https://developer.apple.com/account/ios/identifier/bundle

If you don't do this, then Application Loader will complain that you have configured associated domains, but it's not allowed for your app.

3. Re-sign your Expo IPA

When you change the entitlements after you already did a build/release, you need to generate new credentials to sign with. If you allow expo to manage the credentials, you basically need to run exp build:ios -c

I found I had to remove the existing certificate and provisioning profile, because something was complaining about duplicates. You can find them here: https://developer.apple.com/account/ios/profile/ and here: https://developer.apple.com/account/ios/certificate/

Kudos to @wli for this guide, which is more complicated than I needed, but really helped: https://gist.github.com/wli/ec2999046a5b0483e9598e40e1616b74

Add the Apple App Site Association File to your website

This is literally a step on your website to create a simple file telling ios that the specified app is allowed to see the credentials for that site. The instructions on the apple site are fine.

You need the Bundle ID and a Team ID. Bundle ID is already in app.json, so if you're publishing an app, you know it. I don't remember ever seeing our Team ID before though.

Find your team id here: https://developer.apple.com/account/#/membership

Set the correct AutoFill type on relevant text fields

This is pretty straightforward - there's a property on TextInput:

https://facebook.github.io/react-native/docs/textinput#textcontenttype

For iOS 11+ you can set textContentType to username or password to enable autofill of login details from the device keychain.

I set mine to "username" and "password", although I think apple's heuristics were already guessing correctly so it wasn't strictly necessary for my app. Probably better to do it and be explicit.

When I released all this it worked first time - the password associated with our website was suggested for the app. It doesn't work in the simulator or when testing locally, which makes sense because the bundle id doesn't match.