fix(desktop): autofill identifier-first sign-ins

Author: Sg312

apps/desktop/src/main/browser-credentials/fill.test.ts

@@ -195,6 +195,50 @@ describe('performing a fill', () => {
     })
   })
 
+  it('fills the email step of a two-step sign-in without sending the password', async () => {
+    const context = setup()
+    context.coordinator.noteFormState(context.contents as unknown as WebContents, {
+      origin: ORIGIN,
+      hasLoginForm: true,
+      hasPasswordField: false,
+    })
+    await context.coordinator.showChooser(WINDOW, { x: 10, y: 20 })
+    const template = vi.mocked(Menu.buildFromTemplate).mock.calls.at(-1)?.[0] as Array<{
+      click: () => void
+    }>
+
+    template[0].click()
+    await settle()
+
+    // The page has nowhere to put a password, so it does not get one.
+    expect(context.contents.send).toHaveBeenCalledWith('browser-credentials:fill', {
+      origin: ORIGIN,
+      username: 'ada',
+      password: undefined,
+    })
+  })
+
+  it('sends the password to a shell that never reported whether a field exists', async () => {
+    const context = setup()
+    // Older preloads omit the flag; assuming a password field keeps them working.
+    context.coordinator.noteFormState(context.contents as unknown as WebContents, {
+      origin: ORIGIN,
+      hasLoginForm: true,
+    })
+    await context.coordinator.showChooser(WINDOW, { x: 10, y: 20 })
+    const template = vi.mocked(Menu.buildFromTemplate).mock.calls.at(-1)?.[0] as Array<{
+      click: () => void
+    }>
+
+    template[0].click()
+    await settle()
+
+    expect(context.contents.send).toHaveBeenCalledWith(
+      'browser-credentials:fill',
+      expect.objectContaining({ password: 'hunter2' })
+    )
+  })
+
   it('refuses after the page navigated between choosing and clicking', async () => {
     const context = setup()
     const template = await openChooser(context)

apps/desktop/src/main/browser-credentials/fill.ts

@@ -26,6 +26,15 @@ const logger = createLogger('BrowserCredentialFill')
 interface FormState {
   origin: string
   hasLoginForm: boolean
+  /**
+   * Whether the page currently has somewhere to put a password.
+   *
+   * False on the first step of an identifier-first sign-in, which asks for an
+   * email and only reveals the password field after it is submitted. Those
+   * steps are still worth filling — the username is what they want — so the
+   * password simply is not sent to a page that has nowhere to put it.
+   */
+  hasPasswordField: boolean
   /** Bumped on every navigation, so a stale authorization cannot be replayed. */
   generation: number
 }
@@ -41,6 +50,8 @@ export interface FillCoordinatorDeps {
 export interface FormStateReport {
   origin: string
   hasLoginForm: boolean
+  /** Absent from shells that predate identifier-first support; assumed true. */
+  hasPasswordField?: boolean
 }
 
 export class FillCoordinator {
@@ -67,6 +78,7 @@ export class FillCoordinator {
       this.states.set(contents, {
         origin,
         hasLoginForm: report.hasLoginForm,
+        hasPasswordField: report.hasPasswordField ?? true,
         generation: this.generationFor(contents),
       })
     }
@@ -166,7 +178,9 @@ export class FillCoordinator {
     contents.send('browser-credentials:fill', {
       origin: state.origin,
       username: credential.username,
-      password: credential.password,
+      // Withheld on an identifier-first step: the page has no password field,
+      // so sending it would put plaintext in a document that cannot use it.
+      password: state.hasPasswordField ? credential.password : undefined,
     })
     // Counts and outcomes only — never the origin, username, or password.
     logger.info('Filled a saved credential at the user\u2019s request')

apps/desktop/src/preload/browser/index.ts

@@ -23,7 +23,8 @@ const RESCAN_DEBOUNCE_MS = 250
 
 interface DetectedForm {
   username: HTMLInputElement | null
-  password: HTMLInputElement
+  /** Absent on an identifier-first step, which asks for the email alone. */
+  password: HTMLInputElement | null
 }
 
 /** Held only in this isolated world; never serialized to main or the page. */
@@ -74,15 +75,46 @@ function findUsernameField(password: HTMLInputElement): HTMLInputElement | null
   return preceding.at(-1) ?? candidates[0] ?? null
 }
 
-function reportFormState(): void {
+/**
+ * The identifier field of a sign-in step that has no password field yet.
+ *
+ * Two-step sign-in — email, Continue, then the password on the next screen —
+ * is now the norm at Google, Okta, and most workplace tools. Requiring a
+ * password field would mean the key icon never appears on the step where the
+ * user actually needs it. Only the page's own declaration counts here: an
+ * `autocomplete` token naming a username or email, or an email input. That is
+ * narrow enough to leave newsletter boxes and search fields alone.
+ */
+function findIdentifierField(): HTMLInputElement | null {
+  for (const field of document.querySelectorAll('input')) {
+    if (!isFillable(field)) continue
+    const hint = String(field.getAttribute('autocomplete') || '').toLowerCase()
+    if (hint === 'username' || hint === 'email') return field
+    if (String(field.type || '').toLowerCase() === 'email') return field
+  }
+  return null
+}
+
+function detectForm(): DetectedForm | null {
   const password = findPasswordField()
-  detected = password ? { password, username: findUsernameField(password) } : null
+  if (password) return { password, username: findUsernameField(password) }
+  const username = findIdentifierField()
+  return username ? { password: null, username } : null
+}
+
+function reportFormState(): void {
+  detected = detectForm()
 
   const origin = window.location.origin
-  const fingerprint = `${origin}|${detected !== null}`
+  const hasPasswordField = detected?.password != null
+  const fingerprint = `${origin}|${detected !== null}|${hasPasswordField}`
   if (fingerprint === lastReported) return
   lastReported = fingerprint
-  ipcRenderer.send(FORM_STATE_CHANNEL, { origin, hasLoginForm: detected !== null })
+  ipcRenderer.send(FORM_STATE_CHANNEL, {
+    origin,
+    hasLoginForm: detected !== null,
+    hasPasswordField,
+  })
 }
 
 function scheduleRescan(): void {
@@ -111,18 +143,21 @@ function setFieldValue(field: HTMLInputElement, value: string): void {
 
 ipcRenderer.on(
   FILL_CHANNEL,
-  (_event, payload: { origin: string; username: string; password: string }) => {
+  (_event, payload: { origin: string; username: string; password?: string }) => {
     // Last line of defence against a navigation between the user's choice and
     // this message arriving: the main process binds the fill to an origin, and
     // the live document has to still agree.
     if (!payload || payload.origin !== window.location.origin || !detected) return
     if (detected.username && payload.username) {
       setFieldValue(detected.username, payload.username)
     }
-    setFieldValue(detected.password, payload.password)
+    if (detected.password && payload.password) {
+      setFieldValue(detected.password, payload.password)
+    }
     // Never submitted. Autofill and submission stay separate so the user can
-    // confirm the site and the account before anything is sent.
-    detected.password.focus()
+    // confirm the site and the account before anything is sent. Focus lands on
+    // whichever field the user still has to deal with.
+    ;(detected.password ?? detected.username)?.focus()
   }
 )