[$32000] Desktop - Autofill doesn't work during login or when adding a debit card

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue was found when executing #9294

Action Performed:

1. Open app
2. Use autofill on the login screen
3. Navigate to Settings>Payments>Add Debit card
4. Use autofill

Expected Result:

Autofill should works during login
Autofill should works while adding new Debit card

Actual Result:

No autofill for fields at login page
No autofill for all fields while adding new Debit card

Workaround:

unknown

Platform:

Where is this issue occurring?

• Desktop App

Version Number: Version 1.1.86-1

Reproducible in staging?: y

Reproducible in production?: y

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos:

Bug5663625_Screen_Recording_2022-07-26_at_15.58.04.mp4

Upwork job URL: https://www.upwork.com/jobs/~01a9e983bc39d24141

Issue reported by: Applause internal team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[marcochavezf]

I also noticed the password manager is not triggered when I enter the email in the desktop app and here's a discussion about a possible solution to enable autofill.

I think it's worth to make this issue External to see if we get a proposal to enable autofill on desktop. But feel free to close it if there's no possible solution.

[melvin-bot]

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

[michaelhaxhiu]

Posted to upwork - https://www.upwork.com/jobs/~01a9e983bc39d24141

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[melvin-bot]

Triggered auto assignment to @iwiznia (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[parasharrajat]

The electron does not support autofill natively. This is a userland feature and saving username and passed is a security concern.

[marcochavezf]

The electron does not support autofill natively. This is a userland feature and saving username and passed is a security concern.

Ah yeah, definitively saving usernames and passwords in the electron app is not a good idea, but shouldn't password managers (like 1Password) detect the username/email field to autofill it automatically in macOS apps?

[parasharrajat]

Yes! the motive of this issue should be to set up the app to support native autofill services.

[iwiznia]

Still waiting for proposals. I think we need to increase price, no?

[michaelhaxhiu]

Yep, true. I got the reminder to double price on Friday last week but didn't have time to action it. Doubling now.

[ntdiary]

I have made some internal changes in my repo, nothing major changes in the usage. (uses web components. Encryption has not been added)

Expensify code:

diff --git a/package.json b/package.json
index 53c0ccf7c2..e1ed67d3d7 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "test:e2e": "node ./e2e/testRunner.js"
   },
   "dependencies": {
+    "@electron-autofill/renderer": "latest",
     "@expensify/react-native-web": "0.18.9",
     "@formatjs/intl-getcanonicallocales": "^1.5.8",
     "@formatjs/intl-locale": "^2.4.21",
diff --git a/src/components/Form.js b/src/components/Form.js
index b7b5f72edb..25fab1e0a6 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -10,6 +10,7 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import * as ComponentUtils from '../libs/ComponentUtils';

 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -106,6 +107,8 @@ class Form extends React.Component {
             return;
         }

+        // todo: trigger auto save
+        // Autofill.save()
         // Call submit handler
         this.props.onSubmit(this.state.inputValues);
     }
@@ -218,7 +221,7 @@ class Form extends React.Component {
                     contentContainerStyle={styles.flexGrow1}
                     keyboardShouldPersistTaps="handled"
                 >
-                    <View style={[this.props.style]}>
+                    <View style={[this.props.style]} accessibilityRole={ComponentUtils.ACCESSIBILITY_ROLE_FORM}>
                         {this.childrenWrapperWithProps(this.props.children)}
                         {this.props.isSubmitButtonVisible && (
                         <FormAlertWithSubmitButton
diff --git a/src/libs/Autofill/index.desktop.js b/src/libs/Autofill/index.desktop.js
new file mode 100644
index 0000000000..927af0bc1a
--- /dev/null
+++ b/src/libs/Autofill/index.desktop.js
@@ -0,0 +1,3 @@
+import ElectronAutofill from '@electron-autofill/renderer';
+
+export default ElectronAutofill;
diff --git a/src/libs/Autofill/index.js b/src/libs/Autofill/index.js
new file mode 100644
index 0000000000..ed86b5eb40
--- /dev/null
+++ b/src/libs/Autofill/index.js
@@ -0,0 +1,8 @@
+const Autofill = {
+    setup() {
+    },
+    save() {
+    },
+};
+
+export default Autofill;
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index 2e100bb78b..0df2c4da44 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -123,10 +123,12 @@ class DebitCardPage extends Component {
                 >
                     <TextInput
                         inputID="nameOnCard"
+                        name="nameOnCard"
                         label={this.props.translate('addDebitCardPage.nameOnCard')}
                     />
                     <TextInput
                         inputID="cardNumber"
+                        name="cardNumber"
                         label={this.props.translate('addDebitCardPage.debitCardNumber')}
                         containerStyles={[styles.mt4]}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
@@ -135,6 +137,7 @@ class DebitCardPage extends Component {
                         <View style={[styles.flex1, styles.mr2]}>
                             <TextInput
                                 inputID="expirationDate"
+                                name="expirationDate"
                                 label={this.props.translate('addDebitCardPage.expiration')}
                                 placeholder={this.props.translate('addDebitCardPage.expirationDate')}
                                 keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
@@ -143,6 +146,7 @@ class DebitCardPage extends Component {
                         <View style={[styles.flex1]}>
                             <TextInput
                                 inputID="securityCode"
+                                name="securityCode"
                                 label={this.props.translate('addDebitCardPage.cvv')}
                                 maxLength={4}
                                 keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
@@ -174,6 +178,7 @@ class DebitCardPage extends Component {
                     <View style={[styles.mt4]}>
                         <TextInput
                             inputID="password"
+                            name="password"
                             label={this.props.translate('addDebitCardPage.expensifyPassword')}
                             textContentType="password"
                             autoCompleteType={ComponentUtils.PASSWORD_AUTOCOMPLETE_TYPE}
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index f2e2c35584..696d1c4325 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -24,6 +24,7 @@ import * as ErrorUtils from '../../libs/ErrorUtils';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import OfflineIndicator from '../../components/OfflineIndicator';
+import Autofill from '../../libs/Autofill';

 const propTypes = {
     /* Onyx Props */
@@ -138,6 +139,7 @@ class PasswordForm extends React.Component {
             formError: null,
         });

+        Autofill.save();
         Session.signIn(this.state.password, this.state.twoFactorAuthCode);
     }

diff --git a/src/setup/platformSetup/index.desktop.js b/src/setup/platformSetup/index.desktop.js
index a1585065e1..8cfefb3a70 100644
--- a/src/setup/platformSetup/index.desktop.js
+++ b/src/setup/platformSetup/index.desktop.js
@@ -1,10 +1,14 @@
 import {AppRegistry} from 'react-native';
+import Autofill from '../../libs/Autofill';
 import Config from '../../CONFIG';
 import LocalNotification from '../../libs/Notification/LocalNotification';
 import * as KeyboardShortcuts from '../../libs/actions/KeyboardShortcuts';
 import DateUtils from '../../libs/DateUtils';
 import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';

+// setup with some configuration
+Autofill.setup();
+
 export default function () {
     AppRegistry.runApplication(Config.APP_NAME, {
         rootTag: document.getElementById('root'),

please let me know if you have any questions. 🙂

[parasharrajat]

Quick feedback:
@ntdiary Although I agree with your motive for creating a framework-agnostic solution, it will be complicated for the team to maintain. Most folks in the team, work on React so we prefer to react.

In the end, this is a solution for our app first.

---

BTW, I will discuss this internally too.

[parasharrajat]

These are currently being reviewed.

[ntdiary]

@parasharrajat Thanks for your feedback. 😄
Maybe I pay too much attention to a universal solution, and think I can always maintain this library.
I'll also consider whether I can write it with react if possible.

[parasharrajat]

Started an internal discussion. https://expensify.slack.com/archives/C02NK2DQWUX/p1667498373237429

[parasharrajat]

Waiting on the discussion before I share the next update here. It might take a day.

[parasharrajat]

I tried to save a simple text on the keychain service login and get it back which worked but I can't find it in the keychain access app anywhere. (I saved and retrieved the data in one go without closing the app). Thoughts?

[azimgd]

Using keytar ? On osx ?

[parasharrajat]

Yeah, keytar on Mac in the main process.

---

Question: Can we utilize the iCloud chain to save/get the passwords? This should allow us to share the autofill login creads across devices.

[azimgd]

Could you try sorting by "Date Modified" ? Depending on implementation it most likely saves as "New Expensify / Chromium Safe Storage"

[azimgd]

Can we utilize the iCloud chain to save/get the passwords?

It should theoretically be possible, but most likely would require us to generate our own build of chromium:

• https://chromium.googlesource.com/chromium/src/+/lkgr/crypto/apple_keychain_ios.mm#31 (here is a demonstration how attributes are set on ios)
• https://developer.apple.com/documentation/security/ksecattrsynchronizable?language=objc (api to be used for AppleSecKeychainItemRef attribute)

[parasharrajat]

require us to generate our own build of chromium:

Not necessarily. We can code our own custom node module. But it is fine if this is complicated.

[parasharrajat]

Still in discussion. Soon we will have some updates.

[ntdiary]

Update

I'm also adding a react version that will have similar changes to our app as my previous proposal. 🙂
https://github.com/ntdiary/App/pull/1/files (just a demo, still needs to be improved)

If there are still concerns, I can continue to optimize both proposals and make the code conform to our specifications.

video:

react.mp4

[parasharrajat]

I would say let's hold off doing any further analysis on this issue until we have a conclusion on the discussion. Thanks.

[michaelhaxhiu]

Please don't spend any further time providing proposals for this GH. I will provide an update as soon as I can.

[iwiznia]

Not overdue, Hax will post an update here shortly.

[michaelhaxhiu]

Will have something by tomorrow to share here.

[michaelhaxhiu]

Hey everyone. In recent weeks, we’ve discovered that there’s an opportunity to enhance and improve our password security to a higher degree by moving to a passwordless design. This new design is quickly underway and being led by internal engineers.

We do things dynamically at Expensify, meaning sometimes we pivot or change direction when better ideas come to fruition. Unfortunately this password-related job has become obsolete due to our future plans. But we still want to maintain fairness and compensate the contributors who were most actively involved. We really appreciate your pragmatism and time, and invite your continued involvement in other hard-to-solve jobs.

We did a careful review on our side and are going to pay 25% of the total job bounty to the following contributors:

• $8000 to @azimgd
• $8000 to @ntdiary
• $8000 to @parasharrajat

We feel this payout is the most fair approach since the solution was explored at length in the “proposal phase” of this job. When you have a moment please apply to the following upwork job - https://www.upwork.com/jobs/~01a9e983bc39d24141. Then I'll pay & close this job, so we can shift our #focus to other high priority jobs.

Thanks all!

[parasharrajat]

I would suggest publishing your solution as an open-source library. They might be useful to the community.

[michaelhaxhiu]

Fantastic idea to add @parasharrajat. It could be valuable to your portfolios of work in the future!

[ntdiary]

have applied, very much looking forward to this new passwordless design. 😄

[michaelhaxhiu]

@ntdiary and @azimgd are paid!

And lastly, @parasharrajat will get paid when he's ready. He asked for a few days to rotate his bank account in upwork and will message me when he's ready - 👍.

[michaelhaxhiu]

I'm going to close this GH down to ensure we are focused on the right thing. @parasharrajat see my last post above to close the loop for your payment.