I want to know how to enable the autocomplete for a login form in Capacitor (or if it's possible). I'm using Ionic React. It works if access the page in Safari on iOS and even if you pin it to the home screen. But if you bundle the web app in Capacitor, the autocomplete is not there. Here's the code for the login form:
<form onSubmit={e => loginAndCloseModal({e, emailValue, passwordValue})}>
<IonList>
<IonItem>
<IonLabel position="stacked">Email</IonLabel>
<IonInput autocomplete="username" name="email" value={emailValue} onIonChange={e => setEmail(e.target.value)}></IonInput>
</IonItem>
<IonItem>
<IonLabel position="stacked">Password</IonLabel>
<IonInput autocomplete="current-password" name="password" type="password" value={passwordValue} onIonChange={e => setPassword(e.target.value)}></IonInput>
</IonItem>
{ errorMessage &&
<IonItem>
<IonNote color="danger">{errorMessage}</IonNote>
</IonItem> }
</IonList>
<IonButton class="login-button" expand="block" type="submit" disabled={authLoading}>Login</IonButton>
</form>
I've also tried setting autocomplete="on"
as well and it didn't work. Apple's documentation recommends using the values posted above: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element
Here's a screenshot of the login page on the web:
Here's a version of the login form in Capacitor:
Notice the passwords option in the above the keyboard is gone. Why is that?
Here's the relevant dependencies of my project:
"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",
"@ionic/react": "^4.11.2",
"@ionic/react-router": "^4.11.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
I'm using iOS version 12.4.2
EDIT:
I've done some more research. There this documentation from Apple. The relevant section is this:
Enable Password AutoFill
Password AutoFill uses heuristics to determine when the user logs in or creates new passwords, and automatically provides the password QuickType bar. These heuristics give users some Password AutoFill support in most apps, even if those apps haven't been updated to support AutoFill. However, to provide the best user experience and ensure your app fully supports Password AutoFill, perform the following steps:
Set up your app's associated domains. To learn how to set up your app's associated domains, see Setting Up an App's Associated Domains.
Set the correct AutoFill type on relevant text fields. For an iOS app, see Enabling Password AutoFill on a Text Input View. For a web app, see Enabling Password AutoFill on an HTML Input Element.
I did 2 from above when I first asked this question, but not 1. However after doing number 1 it's still not working.
First, log into the Apple Developer site. Navigate to the “Certificates, Identifiers, & Profiles” section and select your app's identifier. Note the App ID prefix
and Bundle ID
, and under Capabilities, toggle “Associated Domains” then save.
Then, create a file on your web server called apple-app-site-association
. This file will be configured in JSON format, but it is not allowed to have a.json or any other extension .
Paste the following content inside the file and edit the marked places.
Replace XXXXXXXXXX
with the App ID prefix and com.example
with the Bundle ID of the app.
{ "webcredentials": { "apps": [ "XXXXXXXXXX.com.example" // Replace this ] }, "applinks": { "apps": [], // needs to be empty "details": [ { "appID": "XXXXXXXXXX.com.example", // This too "paths": [ "*" ] } ] } }
After that, make sure this file is accessible via the route https://example.com/.well-known/apple-app-site-association .
Also make sure that your server uses https
It is also necessary to specify the content type for this file. It needs to be application/pkcs7-mime
. This can be done, for example, using Website Headers. At the hosting provider Render.com it looks like this, for example:
/.well-known/apple-app-site-association
Content-Type
application/pkcs7-mime
ios/
folder in XCode. You can do this manually or by using the command npx cap open ios
. There you click on App
in the left side bar and then again on App
under Targets
. Then select the Signing & Capabilities
tab.applinks:example.com
for Deep Link support and webcredentials:example.com
for auto-populating passwords. Replace example.com
with the domain name of your website.Edit: I have also added the
Autofill Credential Provider
capability.
If nothing has changed, then everything should work now. Otherwise, here are a few helpful links that have helped me:
I found a workaround here: https://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576
Basically don't wrap any of your input fields in an ion-item tag, use div instead (for example).
The corresponding WebKit bug report is this: https://bugs.webkit.org/show_bug.cgi?id=203299
I've tried everything as well, name=username or name=current-password, autocomplete="current-password" and autocomplete="username", autocomplete="on", etc. I can get the Password button on the keyboard to display only in the Password field, allow me to select a prior saved account (User Name, Password, Web Site), but it only fills in the password not the username field.
So try to go into setting Password & Accounts, turn on AutoFill Password "Green", then Website & App Passwords, and input account info.
But I have two outstanding issues, 1.) will not prompt me for username autocomplete in the username field. 2.) has no domain for my app to related the account to my app. This technically odd... the issue seems to be within the Ionic Framework; Ionic 4.
References:
https://ionicframework.com/docs/api/input
System:
ionic (Ionic CLI): 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework: @ionic/angular 4.7.1
@angular-devkit/build-angular: 0.13.9
@angular-devkit/schematics: 7.3.9
@angular/cli: 7.3.9
@ionic/angular-toolkit: 1.5.1
IOS:
12.1
I had the same issue, seems to work if you just keep the IonInput, and not wrap it within an IonItem.
after search along I found this way to autofill password functionality in ionic 5 / capacitor.
first, need to must set up your app's associated domains. check this link: https://developer.apple.com/documentation/xcode/supporting-associated-domains
after that use this npm package for IOS. https://www.npmjs.com/package/capacitor-ios-autofill-save-password
its help save password functionality.
A guide has been written for implementing autofill of credentials with Capacitor: https://capacitorjs.com/docs/guides/autofill-credentials
This also covers troubleshooting common mistakes and errors.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.