How to autofill password on iOS?

i got a app on applestore, it use ionic 4 & capacitor. But i can’t save id password in the first time login and update it.
I try

It would be great to be able to get associated domains to work properly in Ionic, I have spent weeks of development time over the past couple of years to get them to work but am yet to succeed.

The question generally gets ignored by the Ionic team.

1 Like

Oh. thank you! I also spent weeks for it. Sadlly, to no avail.
I can see pretty much the same questions in some forum, but no as exact answer to it.
I have been thinking of matching swift + ionic. Because I was test with sample login form on ios native, it has worked.
But combining the two languages seems complicated and will take me time to learn to work with Swift. My current job is not allow me to do that

@ManhDo1107, I wrote about site association in the Capacitor docs. See if that helps.

@sjregan - if you have a forum post, tag me on it and I can take a look. thanks.

1 Like

Thanks for the link, it discusses ‘Deep Linking with Universal and App Links’ where the issue is for Autofill Credentials from Keychain on iOS.

It does not seem possible to get usernames and passwords to autofill from associated domain credentials, even when you have setup the apple-app-site-association and the associated webcredentials domain in the Xcode project.

I have confirmed the validity of the apple-app-site-association using online tools, I have confirmed through device console logs and server access logs that the swcd process is fetching the file and parsing the file.

It does not make a difference whether native HTML elements are used, or Ionic elements, whether they are Angular reactive forms or not, nothing seems to work.

So if you have an example working app, or advice on how to make it work it would be much appreciated.

1 Like

@netkow, Oh thanks for the link, But i’ve read it before. As noted above, I have taken the steps " Create Site Association File" & " Add Associated Domain" for my app.
But it not working for me! I can’t understand why.

So if you have an example app with form login can autofills password on ios or detail solution, let me know.
Thank you very much for your reply !

@sjregan You can tag me on the post of you at ionicteam github? Thanks you !

I found this Capacitor issue where they use type="password" to trigger keychain:

<ion-input required autocomplete clearInput type="password" inputmode="password"></ion-input>

Give that a try. There’s also a known WebKit bug which may be related.

Thanks for the tips.

I have tried variations of the ‘autocomplete’ and ‘inputmode’ attributes, additionally I am already familiar with that webkit bug and previously changed my code to ensure the ion-input was not in a shadow-dom element.

Also using plain HTML elements does not work either.

Before I implemented the work around for the shadow-dom issue, the password accessory bar did not display. After the change the password accessory bar does display, however it does not offer the passwords for the associated domain.

@netkow I have tried it before. But it doesn’t is problem.
I hope you can give me a complete example of autofills in ios. That would be a great thing to me and @sjregan

Same issue here. We can’t share credentials between our web app and Capacitor app.

Web app flow

  1. Navigate to app in Safari (e.g. https://app.example.com)
  2. Click username field.
  3. It suggests credentials associated with the same domain.

Capacitor flow

  1. Open Capacitor app.
  2. Click username field.
  3. No credentials are suggested.
  4. Click the key icon and manually select the credentials from https://app.example.com.
  5. The details are filled in correctly.

iOS clearly undertands our form and that it can autofill it. The problem is that it won’t use credentials from our Associated Domains.

The iOS app has the Associated Domains entitlement like so webcredentials:app.example.com.

I’m not terribly surprised of this issue, since Capacitor serves our app at capacitor://localhost and iOS’s Keychain naturally won’t associate that with app.example.com out of the box. I was hoping that the Associated Domains would sort it.

@netkow Should we expect autofill to work in this scenario?

3 Likes

@netkow Any update on this? Thanks.

4 Likes

@ManhDo1107 @sjregan @nahden
I’ve created a Capacitor plugin that call a hidden iOS native login form then submit the form.
So that it prompts a dialog for saving password to iOS keychain like the native way.
Here is the plugin:

Any update on this? Still seems like a relevant problem. I find myself unable to associate my Android app to my websites domain. I Attempted the following guides:

Everything seems configured correctly. When I use Google’s Password manager I get the option to save my password. However when I check it, it saves the password under localhost (which makes sense given the app is actually hosted from localhost), but I would expect the password to be stored under my domain. This also caused my already stored passwords (from the actual websites domain) not to show up. I can open the password manager and manually find and fill them in, but that’s not the intended use.

Haven’t started with iOS yet, but what I can read from the comments here that also doesn’t seem to work :open_mouth:

@netkow Any update on this? Thanks

1 Like

I made it work for me. I documented my approach under following link on stackoverflow. Maybe it helps one or the other.

Thank you for providing details, good to know that it is possible.

In your details you’ve said to set the header for the content-type to application/pkcs7-mime, you have set this header but have not encrypted the JSON file, is that correct?

Yes. I read somewhere that it is no longer necessary. With all this, saved passwords from my website are automatically suggested, but no suggestions are shown for other input fields that have the name=“given-name” attribute, for example.
I would be grateful if anyone has any information on this.

Thanks, that was my understanding as well.

Would you mind sharing your package.json and the HTML of your login form please? It would be really helpful to me so I can try and figure out why it doesn’t work for me.

Unfortunately if you set the content type to application/pkcs7-mime and don’t encrypt the file the validation tools don’t work. Also the validation tools for me complain about invalid HTTP status when all my tests confirm a 200 response code so it’s super frustrating!

@valentingavran does keychain recommend you every single saved credential or only the credentials associated to the linked website?

I have followed all the steps, but keychain keeps showing me all my stored credentials instead of only those that belong to the associated website.

I’m unsure if this is intentional behavior from keychain or if there is still something wrong with my configuration.

I don’t use the Ionic framework, instead I only use Capacitor in combination with Vue.js and Vuetify.

The forms basically look like this in my project (if you remove all Vue specific bindings and styles):

<v-form autocomplete="on">
    <v-text-field name="email" />
    <v-text-field name="current-password" :type="passwordVisible ? 'text' : 'password'" />
    <v-btn type="submit">Sign in</v-btn>
</v-form>

There is nothing special here.

I also get the error that my apple-app-site-association is not encrypted. But as I said, for me it was not necessary that I encrypt it, because I read somewhere that it is not required anymore.

Edit: On the following Apple Developer page you can find the information that it is no longer necessary to sign the file. It says:

If your app runs in iOS 9 or later and you use HTTPS to serve the apple-app-site-association file, you can create a plain text file that uses the application/json MIME type and you don’t need to sign it. If you support Handoff and Shared Web Credentials in iOS 8, you still need to sign the file as described in Shared Web Credentials Reference .