[HOLD for payment 2021-12-15] Unable to use 1Password option for autofill on login

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to staging.expensify.cash
2. Right click on the email field
3. Click on the 1Password option

Expected Result:

Option to select existing accounts should be displayed

Actual Result:

Nothing happens when clicking on the 1Password option

Workaround:

No, unable to use the 1Password extension.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.75-5

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @mallenexpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1625156109326100?thread_ts=1625155719.325000&cid=C01GTK53T8Q

Be able to right click on the Phone or Email box and have a menu option that allows for selecting 1Password. OR, be able to see and click a 1Password icon on the far right of the box.
Ideally, once 1P is used for entering the email address, the Password and Two Factor Code on the following page will be autofilled as well.

[MelvinBot]

Triggered auto assignment to @flodnv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[anthony-hull]

This is because the password forms on this page don't meet best practices for user password forms:
https://web.dev/sign-in-form-best-practices/
I believe that it won't detect the form because of this.
When I add the password field after the username lastpass detects the inputs and adds the autofill features. So I think it's a detection issue.
It would be good to know is this happens on Android and firefox as they use heuristics for detection.
I'll test 1Password later to see if it behaves the same.

Can I ask if you've experienced 1Password working with split forms before (slip forms where username and password input appear on different pages or stages? Once we follow best practices there is still a chance they don't implement support for them. An example of split forms is amazon.com etc.

Secondly there is another issue that will appear after this one is fix: I don't think it would be able to chose the right password for you when it does trigger as the login is split across two pages. The password manager doesn't have the context it needs to match a user:pass combo.

I saw another symptom of the same issue before when setting a password, it tries to save the password without a username because it doesn't know what the username is in that context.

If you've implemented an "email first" sign-in flow

The saving issue is with chrome password manager and last pass that I've experienced.

For the initial issue I propose further investigating the limitations of detection in the major password managers. Hopefully once the best practices are implemented the split form will work. Otherwise we might need to change the form depending on the limitation of which one we decide to support. which brings me to the next question.
Which managers do you want to support?

Firefox, Chrome, Edge, iOS, Android, Safari, 1Password, LastPass.... the list goes on. I don't see a browserlist query in the project.

For my second issue:
I propose adding a hidden username form field in the form to let the manager know what password to fill.
I propose also to create another issue to further audit all the password forms in the application to meet best practices e.g. not using placeholders, don't make the user replete themselves (once password managers work correctly).

[MelvinBot]

Triggered auto assignment to @kevinksullivan (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

cc: @iwiznia I think this is an important issue and @anthony-hull has a good proposal.

[iwiznia]

Thanks for bumping the issue @parasharrajat!
Seems Kevin missed this issue and should've been exported a while ago. Asking someone else to export it and then an engineer will get assigned to review the proposals.

[parasharrajat]

It just needs a hidden username input and all password managers should work. If chrome can detect the form then all others will. They follow what chrome does.

[laurenreidexpensify]

https://www.upwork.com/jobs/~01b7f83dea2310bcf3 posted to Upwork