capacitor
capacitor copied to clipboard
ionic-team
feat: add Android autocomplete support
Feature Request
Description
Autocomplete is not working in Ionic apps with Capacitor (see: https://github.com/ionic-team/ionic-framework/issues/23695). After investigating with the Chromium team in https://bugs.chromium.org/p/chromium/issues/detail?id=1238338, it looks like autocomplete support was removed from the Android webview in favor of developers implementing Android autofill (https://developer.android.com/guide/topics/text/autofill) in their apps.
It would be great if Capacitor could add support for Android autofill otherwise users will not be able to autofill emails, credit cards, etc in Capacitor apps.
Platform(s)
Android
Preferred Solution
The preferred solution is for Capacitor to implement Android autofill.
Alternatives
The alternative is to leave this up to developers to implement on a per-application basis.
Very intrigued on how this feature would look like. For our use case, not having Password Managers working on native Capacitor apps is a bit of a PITA.
Is this feature planned? I would also be very interested in this topic, as we would also like to use the Android Autofill Framework in one of our projects.
I'm looking for a solution as well, please advise.
btw for iOS we can use this plugin: https://github.com/cuongpl/capacitor-ios-autofill-save-password
it pops up the ‘save password’ dialog.
We need something similar for android.
I do not work on the Capacitor team, so I do not have any updates regarding this Capacitor feature. Someone from the Capacitor team will update this thread when they have any news to share.
Sorry for the lack of updates here, I lead Ionic's Native Engineering teams and I am digging in. More soon.
This is getting a deeper investigation, updates as they are available.
Any updates on this?, this is an absolutely required feature for all apps, If there are any workarounds for this please let me know
liamdebeasi
Did you manage to find a workaround for this issue?
Use capacitor in app browser package On your mobile app login screen open capacitor browser window with your website's login page and carry on login & registration there, complete whole process in the browser only and upto the end when auth is either successful or failed, in case of success copy the auth token generated to clipboard and close the window make sure to listen to event of window closing from your mobile app's login page once this event of window closing is fired check the contents of your clipboard, if there's a valid auth token inside that it worked, otherwise report as login/register failed. This solution works perfectly just make sure to clear the clipboard at the end :) The credentials popup appears perfectly in the in-app browser tab have fun!
this whole thing is not even ionic's problem, android removed credentials autofill feature inside webviews, and the whole ionic app is inside a webview, that's why it's not working, but my above workaround gets things done
liamdebeasi
Did you manage to find a workaround for this issue?
We implemented it with java in the android project according to the google documentation (https://developer.android.com/guide/topics/text/autofill-services)
liamdebeasi
Did you manage to find a workaround for this issue?
We implemented it with java in the android project according to the google documentation (https://developer.android.com/guide/topics/text/autofill-services)
i did try that but for some reasons couldn't get it working can you please share the code? it would be great help
liamdebeasi
Did you manage to find a workaround for this issue?
We implemented it with java in the android project according to the google documentation (https://developer.android.com/guide/topics/text/autofill-services)
Very interesting. Could you share snippets of your code? As far as I understand you would have to write a capacitor plugin in order to call java methods from within the app.
Hello there
I don't see the problem in Android or the autofill services. Autofill works fine in a normal WebView, the problem occurs only, if the web app is bundled in a capacitor app.
I created two projects to demonstrate the problem.
https://github.com/shanselm-ergon/autofill-android-webview-demo This is a simple Android app, which shows an HTML file in a WebView. If an autofill service is configured in the Android settings, this form is automatically filled with the information provided by the service (see the README.md in the repo for reproduction).
https://github.com/shanselm-ergon/autofill-capacitor-demo This is a simple Capacitor app, which does basically the same as the example above. The embedded web app is the same as above. If you start to fill the form, no autofill suggestions are given (see the README.md in the repo for reproduction).
If the autofill debug options are turned on on the device, a difference in the log outputs can be noted. I don't no why, but the service won't return any autofill data.
In our case, it is not an option to create our own autofill service, we don't want to build up a new data base, we want to use an existing one.
Any help would be appreciated, this would really be a nice feature.
Right now we are folding this into our work on Capacitor 5 given the scope of the fix. We're still finalizing what Capacitor 5 will include and am aiming for a Q2 release.
I can confirm that autocomplete doesn't work on Android 8 and newer, still works on Android 5.1-7. Nothing we can do about it since Google has removed it from the WebView.
On Android 8+, autocomplete has been replaced with autofill, but autofill requires a secure context to work.
So, for making autofill work on Android 8+, the apps have to use https and a custom domain, it won't work from http://localhost, which is the default url used by Capacitor apps, won't work from https://localhost neither as it's not considering localhost secure despite it's using https.
We have updated the Capacitor autofill docs to reflect that information. https://capacitorjs.com/docs/guides/autofill-credentials
For doing that, the app developers have to add this to their Capacitor config file:
"server": {
"androidScheme": "https",
"hostname": "my-app.com" // this is an example, use your own hostname value
}
Note that changing the scheme and/or hostname will cause web data loss since the web data is tied to the url (localStorage, IndexedDB, etc.)
What giralte-ionic has mentioned about this being included in Capacitor 5 means that new Capacitor 5 apps will use https by default, no other change will be made in Capacitor 5 as what is need is a configuration change on the user apps to be served form a "secure context".
We have updated the Capacitor autofill docs to reflect that information. https://capacitorjs.com/docs/guides/autofill-credentials
For doing that, the app developers have to add this to their Capacitor config file:
"server": { "androidScheme": "https", "hostname": "my-app.com" // this is an example, use your own hostname value }
I can confirm that the "androidScheme": "https" entry in Capacitor config file solves the issue. I wrongly thought that the android:scheme in AndroidManifest.xml was enough.
Thank you for your explanations, I can also confirm, that the suggested settings fix autofill on android.
@jcesarmobile about the change to https as default for the Android scheme, how about iOS? Currently https can not be set as iosScheme, as described in the docs: https://capacitorjs.com/docs/config . Will this behaviour also change in Capacitor 5, or is only the Android default affected?
Please, don't ping me.
Using https is not possible on iOS since the WKWebView reserves http/https and some others.
Apple considers custom schemes secure, if some web API doesn't consider custom schemes such as capacitor:// secure you can report it to Apple and they usually fix it.