"Credential storing" functionality of iOS not working

[born2dev]

Dear UI5-Team,

my application uses sap.m.Dialog and sap.m.Input to have the user enter their credentials.

On an iPhone 8 + Safari I tried to store the credentials with the help of the "credential storing" functionality of iOS. Both the username and the password are correctly stored; I checked it under settings -> accounts.

However on recalling my application and using this "credential storing" functionality, the password is placed into the username field and the password field stays empty.

On macOS (Mojave) + Safari it works.
OpenUI5: 1.60.12

[LidiyaGeorgieva]

Hi @born2dev ,

This seems to me like issue in the iOS.
Could you please isolate it in jsBin.
It will be really useful if you make two examples:

• one with openui5 controls
• one with native html

King Regards,
Lidiya

[hschaefer123]

Hi Lidiya,
i am running currently into same issues on iOS.

To be able to control the new iOS features, it it neccessary to set autocomplete attribute on sap.m.input! If not set, iOS tries to figure out username, password, etc. from naming, but this can go wrong!

For further info see:
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

Right know there is a autocomplete property only in conjunction with suggestions, but this will be missunderstood.

My current workaround is:

onInit: function () {
			// delegate input autocompletion for passwords
			var oPwd = this.byId("new-password"),
				oPwdConfirmation = this.byId("confirm-new-password");

			oPwd.addEventDelegate({
				onAfterRendering: function () {
					oPwd.$("inner").attr("autocomplete", "new-password");
					//oPwd.$("inner").attr("name", "abc");
				}
			});

			oPwdConfirmation.addEventDelegate({
				onAfterRendering: function () {
					oPwdConfirmation.$("inner").attr("autocomplete", "new-password");
				}
			});
		}

I am also using the sap.m.Wizard for an onboarding szenario which kills usability on iOS, if you use a suggested password. After that, you can not change the pw anymore, because the dialog is showing up, but directly hidden for scroll issues with wizard control. You can only see this, if you use an external keyboard on ipad that the ios helper is flickering around.

Maybe someone can put a password field into the wizard sample to test and fix this feature in conjunction with iOS password suggestions.

Right know, if you have choosen a suggested password, you are no more able to change it to a new value, because the corresponding dialog will always be hidden for the used eventing inside wizard (i think it is the scrolling).

Regards Holger

[born2dev]

Hello @LidiaBobeva,

because the example consists of several files, I created it with Plunker:
https://plnkr.co/edit/yeT6W5VxhyYRdnS3kR1S?p=preview

The UI5 application is automatically loaded into the window at the right (takes a few seconds). Then press "login", please.

[born2dev]

Dear UI5-Team,
is there any update?

[HerzogIgzorn]

Hi born2dev,

thank you for your patience and the detailed description of this issue. I've created an internal incident and forwarded it to the responsible development team. Please refer to the following incident ID for further details:
1970495903

The status of this GitHub issue will be updated by the responsible processor.

Regards Sebastian

[stephania87]

Can we clarify the steps through https://jsbin.com/litiqeralo/edit?html,output (test URL http://output.jsbin.com/litiqeralo for mobile device)

• on iPhone X I can type user/pass and request the OS to save the credentials for this site
• then I can reload and start the dialog again
• if I start typing in the username input, I can select the credentials stored for this site
  ---> username goes in the correct box after selecting credentials

Thanks

[born2dev]

It's not working on iPhone 8

[stephania87]

I tested the same steps with iPhone 8 and the username part is filled correctly. Have you tested the same example I posted: https://jsbin.com/litiqeralo/edit?html,output (save a new jsbin to get the output URL for a test)
Which iOS version is yours?

[born2dev]

Because I myself don't have an iPhone I have to use an iPhone of one of my friends. Today I had the chance to test again. It's an iPhone 8 with iOS 13.1.2. I can hereby confirm that the "Credential storing" functionality works with both your jsbin sample and my Plunker sample.

However it still doesn't work with my real application. I need some time to deploy it and then I get back to you.

[born2dev]

I need some more time so don't close this message, please.

[born2dev]

Dear UI5-Team,
please try it with http://207.180.207.74:8080/ios-credentials-issue
Because I don't have an iPhone available at the moment I haven't tested it myself. So I carefully say the issue should occur.

[stephania87]

With your app the issue is reproducible.
Without the custom code, the issue is not present: https://jsbin.com/coqemecoxa/edit?html,output
*Tested on iPhone X/Safari

Issues:

1. Home.view.xml --> do not place layout controls in a SimpleForm. You can run Support Assistant to get more detailed report on the issues in the layout: https://openui5.hana.ondemand.com/#/topic/57ccd7d7103640e3a187ed55e1d2c163

2. Test excluding the Library.js call on beforeOpen of the dialog, as it links RX.min.js file

[born2dev]

Thanks for your suggestions. However, to be honest, I don't know what to do.

a)
What do you mean by "without the custom code the issue is not present"?
What is the "custom code"? Everything in my application is required.

b)
Home.view.xml: okay, I can remove the layout controls from within the SimpleForm.
But does this influence the dialog box which itself doesn't have a SimpleForm?

c)
Test excluding the Library.js call: I use this throttle functionality of the RX library
to avoid that ONE button press leads to SEVERAL event handler calls.
Is this issue already known to the UI5-Team? If there is a solution, I could get rid of the
RX library of my whole application.

[stephania87]

Custom code is anything you added on top of the default functionality of controls, e.g. code in event handlers. By custom code here I refer to the external libraries which mess with controls.
In the current case, the test is if a form with user/pass inputs, without the external libraries, causes the same issue - password to appear in user input element. If the issue is not present, try to isolate the issue with rendered HTML and the external libraries in order to report the issue to the provider of the external libraries.

I am not sure what issue is resolved with rx library, provide a link to a discussion where it is described, including an example. Better in a separate thread

The layout issue in the XML is not the source of your issue, but it is better to resolve it.

[born2dev]

I removed all fields except username and password. I also removed the Rx library. After I have deployed it, the issue is still there.
http://207.180.207.74:8080/ios-credentials-issue/

[stephania87]

I was wrong about RX library

The app does not work - only the password is returned in the currently focused input.
autoFillControlsByID (Apple sources) has an object with Control ID and the password only, missing the Control ID with the username
The extracted HTML does not work https://jsbin.com/kuxawiguje/edit?html,output 😕

The extracted UI5 code works though, and in autoFillControlsByID I can see both user/pass data https://jsbin.com/sozufanuvi/edit?html,output
The extracted HTML works as well https://jsbin.com/qavediyeqe/edit?html,output

[born2dev]

The label "author action" is set. What do I have to do now? If the cause is in my UI5 or JavaScript source text, I need to know what I have to change.

[stephania87]

The point of the thread is to investigate why autopopulation of user/pass on iPhone is not working.
In the best case, someone with experience will know the issue and solve the problem, in the standard case:
Taken steps are to isolate the issue to 2 HTML only examples

• We excluded the interception by the RX libraries
• We produced two HTML chunks produced by the same Open UI5 libraries, without SAPUI5 on the page
• Test variations of the extracted HTML on different devices
  Example1:
  https://jsbin.com/wejuqayaso/edit?html,output
  -- On iPhone 8 on the second attempt, only user is added
  -- on iPhone 11 only password is added in the username place
  Example2:
  https://jsbin.com/xopemuvecu/edit?html,output
  -- on iPhone8 credentials are added
  -- on iPhone11 only password appears in username field

Example3: H2 is changed to H1 in the originally not working example
https://jsbin.com/hifolikufo/edit?html,output
-- iPhone11 works
-- iPhone8 adds only user name on second attempt

Example4: https://jsbin.com/qavediyeqe/edit?html,output

• Works on iPhone8
• works on iPhone11

What is next? I ask in Apple community via forums https://forums.developer.apple.com/message/398626#398626

If you debug and see something else, post an update

[born2dev]

In order that the users of my UI5 application accept the application, it is very important to get this "Credential storing" functionality of iOS working! Unfortunately there has been no response so far from Apple to the question you posted in the Apple community forum. What to do now?

[stephania87]

For the time being, you can illustrate the issue with the isolated HTML examples to your end-users, and provide them the URL of the question. Test if for the list of desired devices+OS changing the title level in the logon helps (customHeader and sap.m.Title with level property set to H1) - https://sapui5.hana.ondemand.com/#/api/sap.m.Dialog%23aggregations

You can also run a parallel question for the same.

[Shtilianova]

Since there is no response from the author for more than year I'm closing the ticket.