How to autofill password on iOS?

Because of security concerns, I imagine that only passwords for your website are suggested. If you haven’t linked a website, then just a passwords button should appear above your keyboard, allowing the user to manually select a password from all of them.

Thank you! The package.json would also be greatly appreciated if you have the time.

{
  "scripts": {
   ...
  },
  "dependencies": {
    "@capacitor/cli": "^3.0.1",
    "@capacitor/core": "^3.0.1",
    "@capacitor/ios": "^3.0.1",
    "@capacitor/splash-screen": "^1.0.1",
    "@capacitor/storage": "^1.0.1",
    "vue": "^2.6.12",
    "vuetify": "^2.5.3",
    "vuex": "^3.6.2",
    "vue-router": "^3.5.1",
    ...
  },
  "devDependencies": {
   ...
  }
}

Info: I just saw in my XCode project, that I have also added the Autofill Credential Provider capability. Perhaps that is the crucial point.

@valentingavran Thanks again, much appreciated.

I think the question @dbrils was asking, was does your app do

A:

OR

B:

2 Likes

Oh sorry, I had misunderstood @dbrils.

My app shows me the passwords like in the picture “A”.

No problem, perhaps my question wasn’t clear.

I’ve now also added the Autofill Credential Provider capability to my project. But building the app from xcode and running it on my physical iPhone 6s still does not show the situation described in picture A. I only get the keychain button as shown in picture B.

Perhaps it needs to be distributed to the app store first before you actually get credential suggestions based on the associated domain(s)? Or does it work with xcode builds as well?

Edit: my apple-app-site-association looks like this;

And my xcode signed app has the exact same App Prefix/Team Id and bundle identifier. I’ve also correctly configured the capabilities in xcode:

1 Like

@dbrils unfortunately, I do not know what the problem is. But I do know that the app does not have to be published in the App Store first. Haven’t published it yet either.

1 Like

Hello,
I’m trying to do the same thing on an app but it doesn’t work at the moment.

Here is what I have done:

  1. Add capabilities (in xCode/developer.apple.com): AutoFill Credential Provider + Associated Domains
  2. Add domains in the list of Associated Domains: webcredentials:myWebsiteDomain.ext
  3. Add a new file named “apple-app-site-association” with this content:
{
  "webcredentials": {
    "apps": [
      "MyAppIdPrefix.MyAppBundle"
    ]
  }
}
  1. Place this file at the root of the site (I tried also in the folder “.well-known”).
  2. Add autocomplete attribute for the “username” and the “current-password”.
  3. Delete the app on the device.
  4. run ionic cap run ios --open and then launch the RUN tool in xCode to install the app on the device again.

But when I click on the input, nothing appears from the device.

Note 1: I use tag instead of
Note 2: The name of the input is “email” and “password”

A. Could you tell me if you finally achieve to use this with your app?
B. Could you tell me what’s wrong? Maybe I have to generate a new certificate or something else.

Thank you for your help :slight_smile:
Loïc

Hello,

Are we still facing issues with the AutoFill feature not automatically suggesting the associated domain? I am using CapacitorJS with React input fields and despite following @valentingavran 's guide, along with the autocomplete suggestions on form elements, I can’t in any way get AutoFill to appear.

An update from Ionic or other devs in this thread would be great. If there’s a solution out there I would love to see it.

Thanks

1 Like

Nope, still no solution causing much embarrassment for us in front of clients.

2 Likes

The platforms already handles this, no need for extra plugins. After first time login the OS should display a popup stating if you would like to save the credentials to the device.
Screen Shot 2022-01-20 at 10.11.38 AM

if you’d like more complexity, there is this: Keychain | Ionic Documentation

Thanks for the reply, I was hoping for information on how to get it working on iOS not Android.

1 Like

Ionic 6 App with Angular 13 and capacitor plugins: Still facing this issue on both device types. Especially on android. The “Save Password?”-Modal of the OS is either appearing to late (after a navigation event is triggered (navigate to another route)) or is completely not appearing. Besides this, the firebase auth plugin has also problems to persist the login credentials correctly. So the effect is, that the user have to re-authenticate about every 5th session… very embarrassing…

Has anybody a working solution with code snippets?

Open Settings , swipe down and tap Passwords & Accounts then Tap AutoFill Passwords , then tap the toggle next to AutoFill Passwords
Now you’ll also want to have iCloud Keychain turned on if you don’t already (Settings → your name → iCloud → Keychain)
Now you’ll be able to save and AutoFill passwords on the web and in apps, look for the prompt at the bottom of your iPhone when tapping on a password field.

1 Like

Autofill for iOS is a pretty weird place, and we haven’t done a great job at having docs on how to enable it and it depends on your web setup. I’ll post some suggestions below and we’ll look into better supporting it at a deeper level in a future release.

Use proper HTML properties

For iOS, you need to specify the autocomplete property on <input> tags. For a one-time SMS code, your input tag would look something like this:

<input id="single-factor-code-text-field" autocomplete="one-time-code"/>

If you’re using a <form> element, you should also set it as <form autocomplete=on"> to enable autocomplete for the fields contained within.

Below is a list of values that Apple supports.

Credential Autocomplete Values
User Name username
Password current-password
New Password new-password
One-Time Code one-time-code

See this page on Apple’s docs for more information.

Ionic Framework Addendum

If you’re using Ionic Framework with Capacitor, check out the autocomplete docs on <ion-input>

Domain Entitlement

If you’ve set the server.url value in your Capacitor config, you’ll need to associate your domain with Apple. You’ll need to set this value in your Info.plist and follow this associated domain guide to link your domain and your application.

I’ll add “Add Autofill docs” to my list of things to do. We’re planning a big Capacitor documentation refresh to fill in knowledge gaps like this.

Thanks Thomas.

Are you stating that it is possible to get iOS to provide auto-fill suggestions for passwords from associated domains within Capacitor or Covdova when using Ionic within an iOS app?

I have followed all the advice given and I am still unable to get it to work.

What would be really helpful for everyone in this thread is a link to a git repository with a working example.

Would you mind explaining what you mean regarding the server.url in Capacitor config, this documentation says the following:

Load an external URL in the Web View.
This is intended for use with live-reload servers.

So this isn’t to be used within production apps.

It should be possible, but at this moment in time, I don’t have a working example to provide. We also don’t have any documentation besides what I posted above. I definitely want to fix that in the near future. It can be super frustrating to run into problems like this, I totally get it. Regardless, Autofill docs are on the roadmap for a Capacitor documentation refresh we’re planning on doing very soon; so there will be a working example in the near future. I’ll post in this thread as well as soon as I have an example I can share.

We recommend that server.url shouldn’t be used in production apps for several reasons, that is correct. However, some developers do modify this value and it can affect autofill.

Thanks.

I’ve created a repository and a fake website login on an associated domain to demonstrate the issue.

2 Likes

Hi,

I encounter same issue, could you please explain on how we can configure serveur.url ?

Thank you

Hi @thomasvidas ,

Any movement here? Looks like there is a provided example from @sjregan that could help with getting to the root of the problem. i have a similar issue in here, related to this feature. for us, the password autofill does show up, but it is being saved under Localhost instead of our website domain…

in short, could you please advise on the status of this issue?