How to get iOS 12 Autofill to ask to save password in React Native app? How to get iOS 12 Autofill to ask to save password in React Native app? reactjs reactjs

How to get iOS 12 Autofill to ask to save password in React Native app?


Got it working! The following was what I did to get it working.

Steps

  1. In the app, in code the username and password fields are as below (notice the textContentType)
<TextInput placeholder={'Enter username'} autoCapitalize={'none'} autoCorrect={false} textContentType={'username'}/><TextInput placeholder={'Enter password'} autoCapitalize={'none'} autoCorrect={false} secureTextEntry={true} textContentType={'password'}/>
  1. Enable Associated Domains as an entitlement in the mobile provision
  2. In XCode, set the Associated Domains to point to the site which will host the apple-app-site-association file.
webcredentials:www.example.com

Do not include the https part of the URL, and do not include the end which would be /apple-app-site-association

  1. Place the apple-app-site-association file in the root directory "/" of your website and make sure it's publicly available. You can check this in any browser by entering your websites full url with the ending like so:
https://www.example.com/apple-app-site-association 

You can try this out on the YouTube URL and Amazon URL as well to see their apple-app-site-association files as an example.

  1. Delete your previous builds from the phone and re-install the new builds with these changes and Apple should make the connection almost immediately. Your first successful new login with fresh credentials should then be prompted with the iOS 'Save Password' pop up. You're done!

Now my users can login with autofill, and the best part is that iOS offers to autofill using touch ID, face ID or passcode depending on the user's phone's setup. So they can login using touch ID or even face ID with no extra work needed in the RN app to get this working. Better yet, if they save it to iCloud, they can move to another device and still be able to login to the app with the same credentials if they want to.

The mistakes I made:

I made a few mistakes, hopefully you can avoid these by reading the following.

  1. The website that hosts the apple-app-site-association has to adhere to Apple's guidelines fully. I made the mistake of initially using a temporary site hosted on AWS. This AWS URL provided both a http and https. Apple did not like this. When I switched over to a website that only hosted https it worked fine. This is critical for the 'Save Password' to work, otherwise Apple doesn't have a key to save your credentials to (it uses your website domain as the key to save the credentials to in the Apple keychain).
  2. The apple-app-site-association syntax matters. If even one of the special symbols is off, it won't work. In my original file above take a close look at the double quotes encapsulating the app id:
{    "webcredentials": {        "apps": [            “ZT978FY6AB.com.company.my.app”,        ]    }}

They aren't the standard double quotes and this was resulting in a file that couldn't be parsed by Apple. When in doubt, copy the one that Apple provides in their documentation page and then modify it's contents as necessary. Changing it to the normal double quotes like below fixed that:

{    "webcredentials": {        "apps": [            "ZT978FY6AB.com.company.my.app",        ]    }}
  1. In the RN side of things all you need is the textContentType={'username'} and textContentType={'password'}. My mistake was thinking that 'newPassword' was needed to prompt the 'Save Password' dialog. Nope. 'newPassword' is used by autofill to suggest strong passwords to new users. In essence, only use 'newPassword' on forms where the user is doing a sign up. Not for login forms.

Something to clarify, this solution works for apps that are just apps. No website with a login required, no bringing over credentials from a website into the app needed, and no webview login setups necessary. This was not apparent when I was going through documentation about autofill. The website that hosts the apple-app-site-association does not need to have any login or anything of the kind, it can just be a plain website with a bit of information (possibly about the app or the company that makes the app).