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.

@maxgfr have you already figured it out how to disable it?

@amcvitty Is it possible to get the event when autofilled? Like after autofilling log the user in or something simular?

@maxgfr have you already figured it out how to disable it?

@maxgfr have you figured out how to disable it?

@unknownerror321 , @sophialittlejohn Not yet 🤣

If, after doing it all correctly, it still doesn't do it for you: restarting your iPhone might work.

Does this also prompt the user to save the password?

Following these steps still doesn't make it work for me :(

Please make sure u include the App ID Prefix (ABCDE12345) before the domain and that the file is saved under /.well-known folder on the server (https:///.well-known/apple-app-site-association)

"webcredentials": {
"apps": [ "ABCDE12345.com.example.app" ]
},

see:
https://developer.apple.com/documentation/xcode/supporting-associated-domains

https://stackoverflow.com/questions/69122512/do-i-need-teamid-prefix-for-webcredentials-in-the-apple-app-site-association-fil

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:

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.

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/

This part isn't relevant for EAS Build (eas build -p ios) users thanks to auto capability signing -- all entitlements are automatically setup before building and the credentials are regenerated.

so, what about eas users ?
I hope I can implement this password autofill feature to my eas build apps