Auth/PM-8113 - 2FA Components Consolidation and UI Refresh #12087

JaredSnider-Bitwarden · 2024-11-21T17:39:28Z

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-8113
Associated Server PR: bitwarden/server#5120

📔 Objective

To consolidate all the cross client 2FA components into single implementation components delegating all client specific logic into services while updating the UIs to match the new design.

This PR is unfortunately quite large, but a ton of the file changes are renames or moves.

📸 Screenshots

To avoid slowing down the PR loading massively, each of the below videos are linked using a thumbnail which downloads the videos instead of directly rendering them inline.

Web

Web - Standard MP Login Scenarios

Email	Authenticator	Duo	WebAuthn	Yubikey	Select Other Method + Recovery Code Demo

Web - SSO Scenarios

Note: remember me does not currently work with SSO, but that is being addressed separately.

SSO + MP Decryption + Standard 2FA Flow works	SSO + MP Decryption + Require 2FA Policy - JIT works	SSO + TDE + Require 2FA Policy - JIT works	SSO + TDE + Standard 2FA Flow works

Desktop

Desktop - Standard MP Login Scenarios

Email	Authenticator	Duo	WebAuthn	Yubikey	Select Other Method + Recovery Code Demo

Extension

Extension - Chrome - Standard MP Login Scenarios

Note: WebAuthn is now done inline in Chrome instead of in a new tab like we have to do for other Browsers until we rebuild the WebAuthn flows with better support.

Email	Authenticator	Duo	WebAuthn	Yubikey	Select Other Method + Recovery Code Demo

Extension - Firefox - Standard MP Login Scenarios

Email	Authenticator	Duo	WebAuthn	Yubikey	Select Other Method + Recovery Code Demo

⏰ Reminders before review

Contributor guidelines followed
All formatters and local linters executed and passed
Written new unit and / or integration tests where applicable
Protected functional changes with optionality (feature flags)
Used internationalization (i18n) for all UI strings
CI builds passed
Communicated to DevOps any deployment requirements
Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

👍 (:+1:) or similar for great changes
📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
❓ (:question:) for questions
🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
🎨 (:art:) for suggestions / improvements
❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
⛏ (:pick:) for minor or nitpick changes

…of UnauthenticatedExtensionUIRefresh flag

…ed import is used a dialog.

…s-ui-refresh + merge conflict fixes

codecov · 2024-11-22T19:02:13Z

Codecov Report

Attention: Patch coverage is 46.81979% with 301 lines in your changes missing coverage. Please review.

Project coverage is 35.42%. Comparing base (f798760) to head (1c8c9f4).
Report is 8 commits behind head on main.

Files with missing lines	Patch %	Lines
...gular/two-factor-auth/two-factor-auth.component.ts	39.23%	96 Missing and 31 partials ⚠️
...uth-webauthn/two-factor-auth-webauthn.component.ts	6.89%	26 Missing and 1 partial ⚠️
apps/web/src/connectors/webauthn.ts	0.00%	26 Missing ⚠️
...ctor-auth-email/two-factor-auth-email.component.ts	12.00%	22 Missing ⚠️
...o-factor-auth-duo/two-factor-auth-duo.component.ts	37.50%	16 Missing and 4 partials ⚠️
apps/web/src/connectors/webauthn-fallback.ts	0.00%	12 Missing ⚠️
...ar/two-factor-auth/two-factor-options.component.ts	45.00%	10 Missing and 1 partial ⚠️
apps/browser/src/popup/services/services.module.ts	0.00%	5 Missing ⚠️
...-auth/default-two-factor-auth-component.service.ts	0.00%	5 Missing ⚠️
libs/auth/src/angular/two-factor-auth/index.ts	0.00%	5 Missing ⚠️
... and 26 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12087      +/-   ##
==========================================
+ Coverage   35.28%   35.42%   +0.13%     
==========================================
  Files        3127     3151      +24     
  Lines       92612    92715     +103     
  Branches    16809    16829      +20     
==========================================
+ Hits        32677    32842     +165     
+ Misses      57495    57411      -84     
- Partials     2440     2462      +22

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

github-actions · 2024-11-22T19:06:54Z

Checkmarx One – Scan Summary & Details – b8586bf5-983f-40b3-8218-97fea1285230

Great job, no security vulnerabilities found in this Pull Request

…onse

…s-ui-refresh

…ead of libs/angular/src/auth

…en top level page component and child components

…ess logic

…tor-auth and move all logic into single component - WIP

…s-ui-refresh + merge confliction resolution

…nt imports on other clients.

…back

…nger be used.

…ulLoginNavigate (3) after successful login we always loginEmailService.clearValues()

…cks.

…dling

…s-ui-refresh

JaredSnider-Bitwarden · 2025-02-13T01:46:37Z

@rr-bw , I've added TDE offboarding support to the flows.

Here's my tests:
Web:

Extension:

Desktop:

coroiu

No platform changes, approving

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

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

apps/browser/src/auth/services/extension-two-factor-auth-component.service.ts

rr-bw · 2025-02-15T04:35:47Z

libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts

+    ItemModule,
+    IconModule,
+  ],
+  providers: [],
 })
 export class TwoFactorOptionsComponent implements OnInit {
  @Output() onProviderSelected = new EventEmitter<TwoFactorProviderType>();
  @Output() onRecoverSelected = new EventEmitter();


I don't think the onProviderSelected and onRecoverSelected outputs are actually being used in the new flow. Also, I'd think you can remove the concept of "recover" entirely from this component (and the TwoFactorOptionsDialogResult enum) since the recovery code button is now being shown as an option directly on the 2FA screen. If I'm correct, address also the reference to TwoFactorOptionsDialogResult in selectOtherTwoFactorMethod() on TwoFactorAuthComponent.

Great catch.
4f25d11

Video of testing after changes:
https://github.com/user-attachments/assets/ce40c74c-9db2-4433-be1b-57014d41ed40

libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts

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

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

…rgin bottom

…ectOtherTwofactorMethod to selectOtherTwoFactorMethod

rr-bw · 2025-02-17T22:20:32Z

apps/browser/src/_locales/en/messages.json

+  },  
+  "selectAnotherMethod": {
+    "message": "Select another method",
+    "desccription": "Select another two-step login method"


Suggested change

"desccription": "Select another two-step login method"

"description": "Select another two-step login method"

Oops! Thank you for catching that!
4376f0e

rr-bw · 2025-02-17T22:30:05Z

apps/desktop/src/locales/en/messages.json

  "sendVerificationCodeEmailAgain": {
    "message": "Send verification code email again"
  },
  "useAnotherTwoStepMethod": {
    "message": "Use another two-step login method"
  },
+  "selectAnotherMethod": {
+    "message": "Select another method",
+    "desccription": "Select another two-step login method"


Suggested change

"desccription": "Select another two-step login method"

"description": "Select another two-step login method"

rr-bw · 2025-02-17T22:35:06Z

apps/web/src/locales/en/messages.json

  "sendVerificationCodeEmailAgain": {
    "message": "Send verification code email again"
  },
  "useAnotherTwoStepMethod": {
    "message": "Use another two-step login method"
  },
+  "selectAnotherMethod": {
+    "message": "Select another method",
+    "desccription": "Select another two-step login method"


Suggested change

"desccription": "Select another two-step login method"

"description": "Select another two-step login method"

rr-bw · 2025-02-19T08:00:07Z

libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-security-key.icon.ts

+        <path class="tw-fill-art-primary"" fill-rule="evenodd"
+            d="M13.281 25.298h-3.68V23.81h3.68v1.488ZM19.907 25.298h-3.68V23.81h3.68v1.488Z"
+            clip-rule="evenodd" />
+        <path stroke="#2CDDE9" stroke-width=".784"


art-accent instead of hardcoded value
https://components.bitwarden.com/?path=/docs/component-library-icon--docs

rr-bw · 2025-02-19T08:01:26Z

libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-security-key.icon.ts

+            <path class="tw-fill-art-accent"
+                d="M67.118 46.886a1.062 1.062 0 0 0-.138-.531 1.037 1.037 0 0 0-.381-.386 1.006 1.006 0 0 0-1.037.018 1.059 1.059 0 0 0-.324 1.46c.099.156.237.283.4.366v1.716a.48.48 0 0 0 .126.347.461.461 0 0 0 .333.147.446.446 0 0 0 .333-.147.482.482 0 0 0 .125-.347V47.81c.168-.086.31-.219.409-.382.099-.163.152-.35.154-.543Zm5.37-6.916h-.565a.337.337 0 0 1-.312-.215.358.358 0 0 1-.026-.133v-.255a5.896 5.896 0 0 0-1.374-3.901 5.645 5.645 0 0 0-3.567-1.972 5.4 5.4 0 0 0-2.268.263c-.73.248-1.4.65-1.97 1.181a5.634 5.634 0 0 0-1.332 1.896 5.75 5.75 0 0 0-.468 2.286v.413c0 .008-.03.434-.392.44h-.509a1.686 1.686 0 0 0-1.203.514c-.32.328-.498.772-.497 1.234v10.37c0 .463.178.907.497 1.234.318.328.75.515 1.203.518h12.783c.452-.003.884-.189 1.202-.517.319-.328.497-.772.497-1.234V41.721a1.776 1.776 0 0 0-.495-1.235 1.71 1.71 0 0 0-.552-.38 1.665 1.665 0 0 0-.653-.136h.001Zm-10.637-.85a4.442 4.442 0 0 1 .41-1.877 4.346 4.346 0 0 1 1.16-1.515 4.218 4.218 0 0 1 1.685-.855 4.17 4.17 0 0 1 1.881-.029 4.335 4.335 0 0 1 2.436 1.596c.61.8.934 1.79.918 2.806v.376a.358.358 0 0 1-.1.246.336.336 0 0 1-.24.102h-7.63a.468.468 0 0 1-.352-.115.51.51 0 0 1-.169-.336v-.399h.001Zm11.091 12.97a.477.477 0 0 1-.133.332.45.45 0 0 1-.322.139H59.705a.445.445 0 0 1-.323-.139.46.46 0 0 1-.132-.331V41.72a.474.474 0 0 1 .132-.331.456.456 0 0 1 .321-.138h12.784c.121 0 .237.05.322.138a.473.473 0 0 1 .133.33v10.37Z" />
+        </g>
+        <path class="tw-fill-art-primary"" fill-rule="evenodd"


Suggested change

<path class="tw-fill-art-primary"" fill-rule="evenodd"

<path class="tw-fill-art-primary" fill-rule="evenodd"

rr-bw · 2025-02-19T08:03:16Z

libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-webauthn.icon.ts

+        clip-rule="evenodd" />
+    <path class="tw-fill-art-accent"
+        d="M100.357 80.991a.382.382 0 0 0-.382-.382H73.651a.382.382 0 0 0 0 .765h26.324c.211 0 .382-.171.382-.383ZM65.693 77.56c-2.04-3.686-5.74-6.133-9.95-6.133-.895 0-1.766.11-2.602.319a.382.382 0 0 1-.184-.743 11.478 11.478 0 0 1 2.785-.341c4.52 0 8.46 2.627 10.618 6.528a14.09 14.09 0 0 1 1.563 4.503.382.382 0 1 1-.752.126 13.324 13.324 0 0 0-1.478-4.258Z" />
+    <path class="tw-fill-art-primary" fill-rule="evenodd" stroke="#020F66" stroke-width=".355"


art-primary instead of hardcoded value
https://components.bitwarden.com/?path=/docs/component-library-icon--docs

rr-bw · 2025-02-19T08:12:50Z

apps/desktop/src/app/app-routing.module.ts

-  ...twofactorRefactorSwap(
-    TwoFactorComponent,
+  ...unauthUiRefreshSwap(
+    TwoFactorComponentV1,
    AnonLayoutWrapperComponent,
    {
      path: "2fa",
    },
    {
      path: "2fa",
      component: AnonLayoutWrapperComponent,


Can you check if we can avoid re-declaring AnonLayoutWrapperComponent here? (line 87 and 93)

Good catch, we can remove the inner component property but not the outer one: 1c8c9f4

rr-bw · 2025-02-19T08:20:06Z

...ular/two-factor-auth/child-components/two-factor-auth-duo/two-factor-auth-duo.component.html

Do we need this empty file?

No, I've removed it here: ac0b80f

apps/web/src/app/shared/loose-components.module.ts

…stroke value.

…ary AnonLayoutWrapperComponent component property.

sonarqubecloud · 2025-02-19T15:05:55Z

Quality Gate passed

Issues
13 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

JaredSnider-Bitwarden added 4 commits November 19, 2024 13:46

PM-8113 - Deprecate TwoFactorComponentRefactor feature flag in favor …

0959069

…of UnauthenticatedExtensionUIRefresh flag

PM-8113 - Rename all existing 2FA components as V1.

4d06957

PM-8113 - TwoFactorAuthComp - Add comment explaining that tagged unus…

411385e

…ed import is used a dialog.

Merge remote-tracking branch 'origin/main' into auth/pm-8113/2fa-comp…

1709ffd

…s-ui-refresh + merge conflict fixes

JaredSnider-Bitwarden added 24 commits December 3, 2024 15:02

PM-8113 - 2FA Auth Comp - deprecate captcha

2ac5348

PM-8113 - LoginStrategySvc - add todo for deprecation of captcha resp…

fd8923a

…onse

PM-8113 - TwoFactorAuth tests - remove captcha

21af124

PM-8113 - TwoFactorAuthComp HTML - remove captcha

84d817e

PM-8113 - Web Two Factor Auth - update deps

d49b1b6

Merge remote-tracking branch 'origin/main' into auth/pm-8113/2fa-comp…

bca8fae

…s-ui-refresh

PM-8113 - Move all new two-factor-auth components into libs/auth inst…

430cff6

…ead of libs/angular/src/auth

PM-8113 - Add new child-components folder to help differentiate betwe…

7167861

…en top level page component and child components

PM-8113 - Add todo for browser TwoFactorAuthEmailComponent

6a97b0c

PM-8113 - TwoFactorAuth - progress on consolidation

fd9b0cf

PM-8113 - TwoFactorAuth - add TODO to ensure I don't miss web on succ…

f838694

…ess logic

PM-8113 - TwoFactorAuth - Deprecate browser implementation of two-fac…

0b3cd49

…tor-auth and move all logic into single component - WIP

Merge remote-tracking branch 'origin/main' into auth/pm-8113/2fa-comp…

c9ced8a

…s-ui-refresh + merge confliction resolution

PM-8113 - Bring across 2FA session timeout to new 2FA orchestrator comp

df42717

PM-8113 - Export TwoFactorAuth from libs/auth

c28c8cb

PM-8113 - Fix 2FA Auth Comp tests by adding new service deps.

8d8f595

PM-8113 - Fix TwoFactorAuthExpiredComp imports + TwoFactorAuthCompone…

e1f558c

…nt imports on other clients.

PM-8113 - 2FA Auth Comp - Progress on removing onSuccessfulLogin call…

5989239

…back

PM-8113 - 2FA Auth - update deps to private as inheritance will no lo…

0caf9d8

…nger be used.

PM-8113 - TwoFactorAuthComp - Refactor init a bit.

15bff43

PM-8113 - TwoFactorAuthComp - More naming refactors

e70c126

PM-8113 - TwoFactorAuth - (1) more refactoring (2) removed onSuccessf…

3b154fa

…ulLoginNavigate (3) after successful login we always loginEmailService.clearValues()

PM-8113 - TwoFactorAuthComp Tests - clean up tests for removed callba…

d9c05e8

…cks.

PM-8113 - TwoFactorAuthComponent - refactor default success route han…

9bee399

…dling

JaredSnider-Bitwarden requested a review from coroiu February 10, 2025 16:29

JaredSnider-Bitwarden added 2 commits February 10, 2025 11:44

Merge branch 'main' into auth/pm-8113/2fa-comps-ui-refresh

a71a699

Merge branch 'main' into auth/pm-8113/2fa-comps-ui-refresh

c4b28eb

coroiu previously approved these changes Feb 11, 2025

View reviewed changes

JaredSnider-Bitwarden added 2 commits February 12, 2025 20:24

PM-8113 - TwoFactorAuth - add missing TDE offboarding logic.

dbde31b

Merge remote-tracking branch 'origin/main' into auth/pm-8113/2fa-comp…

d21f04e

…s-ui-refresh

JaredSnider-Bitwarden dismissed coroiu’s stale review via d21f04e February 13, 2025 01:27

JaredSnider-Bitwarden requested a review from coroiu February 13, 2025 01:53

coroiu previously approved these changes Feb 13, 2025

View reviewed changes

PM-8113 - TwoFactorAuthComponent tests - fix tests

84323f3

JaredSnider-Bitwarden dismissed coroiu’s stale review via 84323f3 February 13, 2025 14:47

coroiu previously approved these changes Feb 13, 2025

View reviewed changes

rr-bw requested changes Feb 15, 2025

View reviewed changes

JaredSnider-Bitwarden and others added 2 commits February 18, 2025 15:00

Merge branch 'main' into auth/pm-8113/2fa-comps-ui-refresh

88761f0

PM-8113 - 2FA Auth Comp HTML - per PR feedback, remove unnecessary ma…

f43b33d

…rgin bottom

JaredSnider-Bitwarden dismissed coroiu’s stale review via f43b33d February 18, 2025 20:16

JaredSnider-Bitwarden added 4 commits February 18, 2025 15:19

PM-8113 - 2FA Comp - per PR feedback, remove inSsoFlow as it isn't used.

35a14c8

PM-8113 - TwoFactorOptionsComp - Clean up no longer needed emitters.

4f25d11

PM-8113 - TwoFactorOptions - per PR feedback, clean up any usage

d1a0d97

PM-8113 - TwoFactorAuthComp - per PR feedback, rename method from sel…

ac3f7e8

…ectOtherTwofactorMethod to selectOtherTwoFactorMethod

rr-bw requested changes Feb 19, 2025

View reviewed changes

JaredSnider-Bitwarden added 7 commits February 19, 2025 09:02

PM-8113 - Per PR feedback, fix translations misspelling

4376f0e

PM-8113 - TwoFactorAuthSecurityKeyIcon - fix hardcoded value

f3c87e6

PM-8113 - TwoFactorAuthSecurityKeyIcon - fix extra "

bdf38c2

PM-8113 - TwoFactorAuthDuo - Per PR feedback, remove empty template.

ac0b80f

PM-8113 - LooseComponentsModule - re-add accidentally removed component

213245b

PM-8113 - TwoFactorAuthWebAuthnIcon - per PR feedback, fix hardcoded …

f05596b

…stroke value.

PM-8113 - Desktop AppRoutingModule - per PR feedback, remove unnecess…

1c8c9f4

…ary AnonLayoutWrapperComponent component property.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auth/PM-8113 - 2FA Components Consolidation and UI Refresh #12087

Auth/PM-8113 - 2FA Components Consolidation and UI Refresh #12087

JaredSnider-Bitwarden commented Nov 21, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading

github-actions bot commented Nov 22, 2024 •

edited

Loading

JaredSnider-Bitwarden commented Feb 13, 2025 •

edited

Loading

coroiu left a comment

rr-bw Feb 15, 2025

JaredSnider-Bitwarden Feb 18, 2025

rr-bw Feb 17, 2025

JaredSnider-Bitwarden Feb 19, 2025 •

edited

Loading

rr-bw Feb 17, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 17, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 19, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 19, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 19, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 19, 2025

JaredSnider-Bitwarden Feb 19, 2025

rr-bw Feb 19, 2025

JaredSnider-Bitwarden Feb 19, 2025

sonarqubecloud bot commented Feb 19, 2025

	"desccription": "Select another two-step login method"
	"description": "Select another two-step login method"

	<path class="tw-fill-art-primary"" fill-rule="evenodd"
	<path class="tw-fill-art-primary" fill-rule="evenodd"

Auth/PM-8113 - 2FA Components Consolidation and UI Refresh #12087

Are you sure you want to change the base?

Auth/PM-8113 - 2FA Components Consolidation and UI Refresh #12087

Conversation

JaredSnider-Bitwarden commented Nov 21, 2024 • edited Loading

🎟️ Tracking

📔 Objective

📸 Screenshots

Web

Web - Standard MP Login Scenarios

Web - SSO Scenarios

Desktop

Desktop - Standard MP Login Scenarios

Extension

Extension - Chrome - Standard MP Login Scenarios

Extension - Firefox - Standard MP Login Scenarios

⏰ Reminders before review

🦮 Reviewer guidelines

codecov bot commented Nov 22, 2024 • edited Loading

Codecov Report

github-actions bot commented Nov 22, 2024 • edited Loading

Great job, no security vulnerabilities found in this Pull Request

JaredSnider-Bitwarden commented Feb 13, 2025 • edited Loading

coroiu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JaredSnider-Bitwarden Feb 19, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Feb 19, 2025

Quality Gate passed

JaredSnider-Bitwarden commented Nov 21, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading

github-actions bot commented Nov 22, 2024 •

edited

Loading

JaredSnider-Bitwarden commented Feb 13, 2025 •

edited

Loading

JaredSnider-Bitwarden Feb 19, 2025 •

edited

Loading