Autocomplete for password inputType issue

[gclements-chwy]

Hi,

I think the input tag in SingleOtpInput needs autocomplete="off" (or maybe autocomplete="new-password") when inputType is password. It looks like Chrome is filling in the first field in a 4 input otp-input no matter what I do. (Even wrapping in a <form autocomplete="off">.)

[gclements-chwy]

Actually, you can work around this by adding a ref to the otp-input component and adding:

this.$refs.otpInput.$el.children[0].setAttribute('autocomplete', 'new-password');
const inputs = this.$refs.otpInput.$el.querySelectorAll('.otp-input');
inputs.forEach(i => i.setAttribute('autocomplete', 'new-password'));

to mounted in the component containing the otp-input component.

[msadecki1-chwy]

@gclements-chwy what about autocomplete="one-time-code"? Theoretically, that should help the user agent identify when it should suggest auto-filling with the code last received via SMS. It also won't try to populate with any stored passwords.

[gclements-chwy]

@msadecki1-chwy I think one-time-code is a hint to the browser that it can suggest new a password. I think new-password is correct. See: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password

[msadecki1-chwy]

@gclements-chwy well the autocomplete attribute was designed specifically to aid user agents in storing and retrieving common form values (https://www.w3.org/TR/html52/sec-forms.html#autofill), but unfortunately, Chrome is notorious for thinking its smarter than the developer, even the one who knows what their doing, and applies its own heuristics to make autocomplete "better." The reason why new-password works is because if the user is specifying a new password, e.g. after having put in their current password, there is no autocomplete value because they've never filled it out before; it's "new". If Chrome wasn't trying to be so smart, it would honor autocomplete="off" which, as the HTML spec defines:

The "off" keyword indicates either that the control’s input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the user agent to prefill the value for him;

This also has accessibility implications because the accessibility API, and accessibility plugins, can use this value to inform the user what type of info is expected in the form field, which can be especially helpful for users with cognitive disabilities, or even any user filling out a page in a language not familiar to them. Screen readers may also provide this information to the user in case the author didn't provide a label, or a meaningful label, for the input:
https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose
https://www.w3.org/WAI/WCAG21/Techniques/html/H98

This is why we really can't really chose a value just because it has the desired behavior in a particular browser by circumstance only. If this is truly a one-time-code, like one for two-factor auth, then I would one-time-code would be appropriate, but we really shouldn't use new-password if its not a new-password field. If the use case here is truly a PIN number (unique from the users password) we're at an impasse, because there is no autocomplete value "pin" (although there should be, something which would have to be brought up to WHATWG or W3C. If the type attribute password is being used, Chrome will ignore any autocomplete value and pre-populate with any stored password for the domain...

[gclements-chwy]

@msadecki1-chwy I agree with all that. Unfortunately what the spec says and what browsers implement (and don't want to change since it is now expected behavior) are two different things. The link I posted above seems to say that you should use autocomplete="new-password" even though I agree autocomplete="off" in my mind makes the most sense. For now we are reaching into the otp-input and adding the attribute autocomplete="new-password" on any input fields which seems to work for us.

[MohammedAyman2018]

Hi folks,
I know it's not solved yet. I added this to my parent component and did what I want.

mounted () {
  let modalInputs = document.querySelectorAll("#OtpForm input");
  for (let i = 0; i < modalInputs.length; i++) {
    modalInputs[i].value = '';
    modalInputs[i].autocomplete = 'new-password';
  }
}

Hope this help anyone.