BEEEP/Auth/PM-35338 - Auto Submit on OTP Paste

[JaredSnider-Bitwarden]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-35338

📔 Objective

To add auto submit behavior on paste for the following scenarios:

1. 2FA via Email
2. 2FA via authenticator
3. New device verification
4. User verification dialog for users without a MP - ex: vault export for a TDE user without a password.

Detailed Changes

Components — 2FA (Email & Authenticator)

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-email.component.ts

1. Added @Output() submitOnPaste = new EventEmitter<void>() — signals the parent to trigger form submission when a paste is detected.
2. Added onPaste(event: ClipboardEvent) — extracts the pasted text, calls event.preventDefault() to suppress the browser's default insertion, sets tokenFormControl directly via setValue(), then emits submitOnPaste.

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-email.component.html

1. Added (paste)="onPaste($event)" to the token input so paste events are intercepted before the browser inserts the text.

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-authenticator/two-factor-auth-authenticator.component.ts

1. Added @Output() submitOnPaste = new EventEmitter<void>() and onPaste() — identical pattern to the email component; covers the TOTP copy-paste from a password manager scenario.

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-authenticator/two-factor-auth-authenticator.component.html

1. Added (paste)="onPaste($event)" to the token input.

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html

1. Added (submitOnPaste)="continueButton?.nativeElement?.click()" on both <app-two-factor-auth-email> and <app-two-factor-auth-authenticator> — clicks the continue button programmatically rather than calling submit() directly, so the submission goes through the bitSubmit pipeline and loading/disabled state is managed correctly. This mirrors the existing handleEnterKeyPress pattern.

Components — New Device Verification

libs/auth/src/angular/new-device-verification/new-device-verification.component.ts

1. Added onPaste(event: ClipboardEvent) — extracts pasted text, sets the code form control via setValue(), and calls void this.submit() directly. No parent wiring is needed because this component owns both the input and the submit action.

libs/auth/src/angular/new-device-verification/new-device-verification.component.html

1. Added (paste)="onPaste($event)" to the OTP input field.

Components — User Verification OTP

libs/auth/src/angular/user-verification/user-verification-form-input.component.ts

1. Added @Output() pasteSubmit = new EventEmitter<void>() — emitted when a paste should trigger form submission.
2. Added onPaste(event: ClipboardEvent) guarded by verificationType === "server" && userVerificationOptions.server.otp — only fires auto-submit for passwordless users shown the OTP input; master password, PIN, and biometrics inputs are unaffected. Sets the internal string FormControl directly so the ControlValueAccessor chain (processSecretChanges → onChange) updates the parent dialog's secret FormControl synchronously before pasteSubmit emits.

libs/auth/src/angular/user-verification/user-verification-form-input.component.html

1. Added (paste)="onPaste($event)" to the server-side OTP text input only (inside the *ngIf="userVerificationOptions.server.otp" block).

libs/auth/src/angular/user-verification/user-verification-dialog.component.ts

1. Added @ViewChild(FormGroupDirective) private formGroupDirective to get a reference to the form's Angular directive.
2. Added submitFromPaste() — calls formGroupDirective.onSubmit(new Event("submit")) to trigger submission through the bitSubmit pipeline (loading state, disabled state), identical to a button click. Calling submit() directly was avoided because it bypasses bitSubmit's ngSubmit subscription.

libs/auth/src/angular/user-verification/user-verification-dialog.component.html

1. Added (pasteSubmit)="submitFromPaste()" on <app-user-verification-form-input> — the dialog is the only consumer of this output; other components that embed UserVerificationFormInputComponent directly are not affected.

📸 Screenshots

2FA via Email

BEEEP.-.2FA.Auth.-.email.-.auto.submit.on.paste.mov

2FA via authenticator

BEEEP.-.2FA.Auth.-.authenticator.-.auto.submit.on.paste.mov

New device verification

BEEEP.-.NDV.-.auto.submit.on.paste.mov

User verification dialog for users without a MP - ex: vault export for a TDE user without a password.

BEEEP.-.UserVerificationDialog.vault.export.-.auto.submit.on.paste.mov

[github-actions]

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

Reviewed auto-submit-on-paste behavior added to four OTP entry flows: 2FA email, 2FA authenticator, new device verification, and the user verification dialog OTP. All four paths correctly route submission through the bitSubmit pipeline — 2FA via continueButton.click() (mirroring the existing handleEnterKeyPress pattern), new-device-verification via viewChild(FormGroupDirective).onSubmit(), and user-verification-dialog via @ViewChild(FormGroupDirective).onSubmit(). Previously raised feedback about bitSubmit bypass in new-device-verification.component.ts is fully resolved on this revision. Paste handlers consistently use event.preventDefault(), trim input, short-circuit on empty values, and the user-verification handler is correctly gated on verificationType === "server" && userVerificationOptions.server.otp.

Code Review Details

No findings.

[codecov]

Codecov Report

❌ Patch coverage is 5.55556% with 34 lines in your changes missing coverage. Please review.
✅ Project coverage is 47.08%. Comparing base (b480007) to head (6662f75).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...-verification/new-device-verification.component.ts	0.00%	9 Missing ⚠️
...fication/user-verification-form-input.component.ts	0.00%	8 Missing ⚠️
...ticator/two-factor-auth-authenticator.component.ts	12.50%	7 Missing ⚠️
...ctor-auth-email/two-factor-auth-email.component.ts	12.50%	7 Missing ⚠️
...verification/user-verification-dialog.component.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #20250      +/-   ##
==========================================
- Coverage   47.09%   47.08%   -0.02%     
==========================================
  Files        3948     3948              
  Lines      119684   119714      +30     
  Branches    18344    18358      +14     
==========================================
- Hits        56370    56365       -5     
- Misses      59080    59115      +35     
  Partials     4234     4234              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Checkmarx One – Scan Summary & Details – b4914f78-1848-4e1c-819f-29455176a3a0

Great job! No new security vulnerabilities introduced in this pull request

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud