1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 07:43:35 +00:00

feat(2FA-UI-Refresh): [Auth/PM-8113] - 2FA Components Consolidation and UI Refresh (#12087)

* PM-8113 - Deprecate TwoFactorComponentRefactor feature flag in favor of UnauthenticatedExtensionUIRefresh flag

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

* PM-8113 - TwoFactorAuthComp - Add comment explaining that tagged unused import is used a dialog.

* PM-8113 - 2FA Auth Comp - deprecate captcha

* PM-8113 - LoginStrategySvc - add todo for deprecation of captcha response

* PM-8113 - TwoFactorAuth tests - remove captcha

* PM-8113  - TwoFactorAuthComp HTML - remove captcha

* PM-8113  - Web Two Factor Auth - update deps

* PM-8113 - Move all new two-factor-auth components into libs/auth instead of libs/angular/src/auth

* PM-8113 - Add new child-components folder to help differentiate between top level page component and child components

* PM-8113 - Add todo for browser TwoFactorAuthEmailComponent

* PM-8113 - TwoFactorAuth - progress on consolidation

* PM-8113 - TwoFactorAuth - add TODO to ensure I don't miss web on success logic

* PM-8113 - TwoFactorAuth - Deprecate browser implementation of two-factor-auth and move all logic into single component - WIP

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

* PM-8113 - Export TwoFactorAuth from libs/auth

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

* PM-8113 - Fix TwoFactorAuthExpiredComp imports + TwoFactorAuthComponent imports on other clients.

* PM-8113 - 2FA Auth Comp - Progress on removing onSuccessfulLogin callback

* PM-8113 - 2FA Auth - update deps to private as inheritance will no longer be used.

* PM-8113 - TwoFactorAuthComp - Refactor init a bit.

* PM-8113  - TwoFactorAuthComp - More naming refactors

* PM-8113  - TwoFactorAuth - (1) more refactoring (2) removed onSuccessfulLoginNavigate (3) after successful login we always loginEmailService.clearValues()

* PM-8113 - TwoFactorAuthComp Tests - clean up tests for removed callbacks.

* PM-8113 - TwoFactorAuthComponent - refactor default success route handling

* PM-8113 - TwoFactorAuthComp - More refactoring

* PM-8113 - TwoFactorAuthComp - more refactors

* PM-8113 - TwoFactorAuth - Remove unused service dep

* PM-8113 - TwoFactorAuthComp - Refactor out unused button action text and move checks for continue button visibility into component

* PM-8113 - TwoFactorAuthComponent - Add type for providerData

* PM-8113 - TwoFactorAuthComponent - Add todo

* PM-8113 - TwoFactorAuthComponent - Add client type

* PM-8113 - TwoFactorAuth - implement browser specific SSO + 2FA logic

* PM-8113 - TwoFactorService Abstraction - refactor to use proper functions + mark methods as abstract properly + add null return to getProviders

* PM-8113 - Refactor 2FA Guard logic out of ngOnInit and into own tested guard. Updated all routes.

* PM-8113 - TwoFactorAuthComponent - WIP on webauthn init.

* PM-8113 - TwoFactorAuthComponent - pull webauthn fallback response handling into primary init with checks based on client for if it should be processed.

* PM-8113 - TwoFactorAuthComponent - move linux popup width extension logic into ExtensionTwoFactorAuthComponentService

* PM-8113 - WebTwoFactorAuthComponentService - add explicit override for web's determineLegacyKeyMigrationAction method.

* PM-8113 - Implement new TwoFactorAuthComponentService .openPopoutIfApprovedForEmail2fa to replace extension specific init logic.

* PM-8113 - TwoFactorAuthComponent - misc cleanup

* PM-8113 - TwoFactorAuthComponent - more clean up

* PM-8113 - TwoFactorAuthComponent - WIP on removing TDE callbacks

* PM-8113 - TwoFactorAuthComponent - finish refactoring out all callbacks

* PM-8113 - TwoFactorAuthComponent - remove now unused method

* PM-8113 - TwoFactorAuthComponent - refactor routes.

* PM-8113 - TwoFactorAuthComponent - add TODO

* PM-8113 - TwoFactorAuthComp - isTrustedDeviceEncEnabled - add undefined check for optional window close. + Add todo

* PM-8113 - TwoFactorAuthComponent tests - updated to pass

* PM-8113 - (1) Consolidate TwoFactorAuthEmail component into new service architecture (2) Move openPopoutIfApprovedForEmail2fa to new TwoFactorAuthEmailComponentService

* PM-8113 - Refactor libs/auth/2fa into barrel files.

* PM-8113 - Move TwoFactorAuthEmail content to own folder.

* PM-8113 - Move 2FA Duo to own comp folder.

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - Add comment

* PM-8113 - TwoFactorAuthEmailComponentService - add docs

* PM-8113  - TwoFactorAuthDuoComponentService - define top level abstraction and each clients implementation of the duo2faResultListener

* PM-8113 - TwoFactorAuthDuoCompService - add client specific handling for launchDuoFrameless

* PM-8113 - Delete no longer used client specific two factor auth duo components.

* PM-8113 - Register TwoFactorAuthDuoComponentService implementation in each client.

* PM-8113 - TwoFactorAuthComp - add destroy ref to fix warnings.

* PM-8113 - Remove accidentally checked in dev change

* PM-8113 - TwoFactorAuthComp - (1) Add loading state (2) Add missing  CheckboxModule import

* PM-8113 - TwoFactorAuthDuoComponent - update takeUntilDestroyed to pass in destroy context as you can't use takeUntilDestroyed in ngOnInit without it.

* PM-8113 - TwoFactorAuthWebAuthnComponent - remove no longer necessary webauthn new tab check as webauthn seems to work without it

* PM-8113 - TwoFactorAuthWebAuthnComp - refactor names and add todo

* PM-8113 - (1) Move WebAuthn 2FA comp to own folder (2) build out client service for new tab logic

* PM-8113 - Register TwoFactorAuthWebAuthnComponentServices

* PM-8113 - Tweak TwoFactorAuthWebAuthnComponentService and add to TwoFactorAuthWebAuthnComponent

* PM-8113 - WebTwoFactorAuthDuoComponentService - fix type issue

* PM-8113 - ExtensionTwoFactorAuthDuoComponentService - attempt to fix type issue.

* PM-8113 - Remove ts-strict-ignore

* PM-8113 - TwoFactorAuthWebAuthnComponent - satisfy strict typescript reqs.

* PM-8113 - TwoFactorAuthComponent - some progress on strict TS conversion

* PM-8113 - TwoFactorAuthComp - fixed all strict typescript issues.

* PM-8113 - TwoFactorAuthComp - remove no longer necessary webauthn code

* PM-8113 - ExtensionTwoFactorAuthComponentService - handleSso2faFlowSuccess - add more context

* PM-8113 - TwoFactorAuthComp - TDE should use same success handler method

* PM-8113 - Fix SSO + 2FA result handling by closing proper popout window

* PM-8113 - Add todo

* PM-8113 - Webauthn 2FA - As webauthn popout doesn't persist SSO state, have to genercize success logic (which should be a good thing but requires confirmation testing).

* PM-8113 - Per main changes, remove deprecated I18nPipe from 2fa comps that use it.

* PM-8113 - Remove more incorrect i18nPipes

* PM-8113 - TwoFactorAuth + Webauthn - Refactor logic

* PM-8113 - TwoFactorAuth - build submitting loading logic

* PM-8113 - TwoFactorAuth - remove loading as submitting.

* PM-8113 - TwoFactorAuth - update to latest authN session timeout logic

* PM-8113 - AuthPopoutWindow - Add new single action popout for email 2FA so we can close it programmatically

* PM-8113 - Update  ExtensionTwoFactorAuthComponentService to close email 2FA single action popouts.

* PM-8113 - Fix build after merge conflict issue

* PM-8113 - 2FA - Duo & Email comps - strict typescript adherence.

* PM-8113 - TwoFactorAuth - Clean up unused stuff and get tests passing

* PM-8113 - Clean up used service method + TODO as I've confirmed it works for other flows.

* PM-8113 - TODO: test all comp services

* PM-8113 - TwoFactorAuthComponent Tests - fix tests by removing mock of removed method.

* PM-8113 - Revert changes to login strategies to avoid scope creep for the sake of typescript strictness.

* PM-8113 - ExtensionTwoFactorAuthComponentService tests

* PM-8113 - Test ExtensionTwoFactorAuthDuoComponentService

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - add tests

* PM-8113 - Test ExtensionTwoFactorAuthWebAuthnComponentService

* PM-8113 - Add 2fa icons (icons need tweaking still)

* PM-8113 - TwoFactorAuthComponent - add setAnonLayoutDataByTwoFactorProviderType and handle email case as POC

* PM-8113 - TwoFactorEmailComp - work on converting to new design

* PM-8113 - Update icons with proper svg with scaling via viewbox

* PM-8113 - Update icons to use proper classes

* PM-8113 - 2FA Auth Comp - Progress on implementing design changes

* PM-8113 - TwoFactorOptionsComponent - add todos

* PM-8113 - 2fa Email Comp - add style changes per discussion with design

* PM-8113 - TwoFactorAuthComponent - use2faRecoveryCode - build out method per discussion with design

* PM-8113 - TwoFactorAuthComp - fix comp tests

* PM-8113 - TwoFactorAuthComp - progress on adding 2fa provider page icons and subtitles

* PM-8113 - Browser Translations - update duoTwoFactorRequiredPageSubtitle to match design discussion

* PM-8113 - TwoFactorAuthComp - more work on getting page title / icons working

* PM-8113 - Add todo

* PM-8113 - TwoFactorAuthDuoComponent Html - remove text that was moved to page subtitle.

* PM-8113 - 2FA Auth Comp - Duo icon works

* PM-8113 - (1) Add Yubico logo icon (2) Rename Yubikey icon to security key icon

* PM-8113 - TwoFactorAuthComp - remove icon from launch duo button per figma

* PM-8113 - Mark old two-factor-options component as v1.

* PM-8113 - Web - TwoFactorOptionsComponentV1 - Fix import

* PM-8113 - Fix more imports

* PM-8113 - Adjust translations based on meeting with Design

* PM-8113 - TwoFactorOptionsComponent - deprecate recovery code functionality

* PM-8113 - TwoFactorOptionsComponent - remove icon disable logic and unused imports

* PM-8113 - 2FA Options Comp rewritten to match figma

* PM-8113 - TwoFactorOptions - (1) Sort providers like setup screen (2) Add responsive scaling

* PM-8113 - Webauthn 2FA - WIP on updating connectors to latest style

* PM-8113 - Webauthn connector - clean up commented out code and restore block style

* PM-8113 - TwoFactorAuthWebAuthn - Add loading state for iframe until webauthn ready

* PM-8113 - Webauthn Iframe - update translation per figma

* PM-8113 - TwoFactorAuthComp - per figma, put webauthn after checkbox.

* PM-8113 - WebAuthn Fallback connector - UI refreshed

* PM-8113 - Two Factor Options - Implement wrapping

* PM-8113 - TwoFactorAuthAuthenticator - Remove text per figma

* PM-8113 - TwoFactorAuthYubikey - Clean up design per figma

* PM-8113 - Refactor all 2FA flows to use either reactive forms or programmatic submission so we get the benefit of onSubmit form validation like we have elsewhere.

* PM-8113 - 2FA Auth Comp - for form validated 2FA methods, add enter support.

* PM-8113 - TwoFactorAuthComp - Add loginSuccessHandlerService

* PM-8113 - DesktopTwoFactorAuthDuoComponentService - add tests

* PM-8113 - WebTwoFactorAuthDuoComponentService test file - WIP on tests

* PM-8113 - WebTwoFactorAuthDuoComponentService - test listenForDuo2faResult

* PM-8113 - TwoFactorAuthComp - (1) remove unused deps (2) get tests passing

* PM-8113 - Add required to inputs

* PM-8113 - TwoFactorAuth - Save off 2FA providers map so we can only show the select another 2FA method if the user actually has more than 1 configured 2FA method.

* PM-8113 - Webauthn iframe styling must be adjusted per client so adjust desktop and browser extension

* PM-8113 - TwoFactorAuthComp - Integrate latest ssoLoginService changes

* PM-8113 - Desktop & Browser routing modules - add new page title per figma

* PM-8113 - WebAuthn - added optional awaiting security key interaction button state to improve UX.

* PM-8113 - TwoFactorAuthComp - refactor to avoid reactive race condition with retrieval of active user id.

* PM-8113 - ExtensionTwoFactorAuthEmailComponentService - force close the popup since it has stopped closing when the popup opens.

* PM-8113 - TwoFactorAuth - refactor enter key press to exempt non-applicable flows from enter key handling

* PM-8113 - Refactor ExtensionTwoFactorAuthComponentService methods to solve issues with submission

* PM-8113 - TwoFactorAuth - fix programmatic submit of form

* PM-8113 - Fix ExtensionTwoFactorAuthComponentService tests

* PM-8113 - Extension - Webauthn iframe - remove -10px margin

* PM-8113 - Extension Routing module - 2FA screens need back button

* PM-8113 - Get Duo working in extension

* PM-8113 - TwoFactorOptions - tweak styling of row styling to better work for extension

* PM-8113 - TwoFactorWebauthnComp - new tab button styling per figma

* PM-8113 - 2FA Comp - Update logic for hiding / showing the remember me checkbox

* PM-8113 - TwoFactorAuthWebAuthnComp - new tab flow - fix remember me

* PM-8113 - Per PR feedback, add TODO for better provider and module structure for auth component client logic services.

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

* PM-8113 - TwoFactorAuthComponent tests - fix tests

* PM-8113 - 2FA Auth Comp HTML - per PR feedback, remove unnecessary margin bottom

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

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

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

* PM-8113 - TwoFactorAuthComp - per PR feedback, rename method from selectOtherTwofactorMethod to selectOtherTwoFactorMethod

* PM-8113 - Per PR feedback, fix translations misspelling

* PM-8113 - TwoFactorAuthSecurityKeyIcon - fix hardcoded value

* PM-8113 - TwoFactorAuthSecurityKeyIcon - fix extra "

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

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

* PM-8113 - TwoFactorAuthWebAuthnIcon - per PR feedback, fix hardcoded stroke value.

* PM-8113 - Desktop AppRoutingModule - per PR feedback, remove unnecessary AnonLayoutWrapperComponent component property.

* PM-8113 - Update apps/browser/src/auth/services/extension-two-factor-auth-duo-component.service.spec.ts to fix misspelling

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

* PM-8113 - TwoFactorAuthComp - Per PR feedback, add trim to token value

* PM-8113 - TwoFactorService - add typescript strict

* PM-8113 - TwoFactorService - per PR feedback, add jsdocs

* PM-8113 - Per PR feedback, fix misspelling

* PM-8113 - Webauthn fallback - per PR feedback fix stroke

* PM-8113 - Update apps/web/src/connectors/webauthn-fallback.html

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

* PM-8113 - Update libs/auth/src/angular/icons/two-factor-auth/two-factor-auth-webauthn.icon.ts

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>

---------

Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com>
This commit is contained in:
Jared Snider
2025-02-24 09:59:14 -05:00
committed by GitHub
parent 886cf48e77
commit acbff6953c
112 changed files with 3225 additions and 1925 deletions

View File

@@ -885,6 +885,21 @@
"logInToBitwarden": {
"message": "Log in to Bitwarden"
},
"enterTheCodeSentToYourEmail": {
"message": "Enter the code sent to your email"
},
"enterTheCodeFromYourAuthenticatorApp": {
"message": "Enter the code from your authenticator app"
},
"pressYourYubiKeyToAuthenticate": {
"message": "Press your YubiKey to authenticate"
},
"duoTwoFactorRequiredPageSubtitle": {
"message": "Duo two-step login is required for your account. Follow the steps below to finish logging in."
},
"followTheStepsBelowToFinishLoggingIn": {
"message": "Follow the steps below to finish logging in."
},
"restartRegistration": {
"message": "Restart registration"
},
@@ -1374,12 +1389,22 @@
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
},
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
@@ -1392,9 +1417,18 @@
"webAuthnNewTabOpen": {
"message": "Open new tab"
},
"openInNewTab": {
"message": "Open in new tab"
},
"webAuthnAuthenticate": {
"message": "Authenticate WebAuthn"
},
"readSecurityKey": {
"message": "Read security key"
},
"awaitingSecurityKeyInteraction": {
"message": "Awaiting security key interaction..."
},
"loginUnavailable": {
"message": "Login unavailable"
},
@@ -1407,6 +1441,9 @@
"twoStepOptions": {
"message": "Two-step login options"
},
"selectTwoStepLoginMethod": {
"message": "Select two-step login method"
},
"recoveryCodeDesc": {
"message": "Lost access to all of your two-factor providers? Use your recovery code to turn off all two-factor providers from your account."
},

View File

@@ -1,118 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { Subject, Subscription, filter, firstValueFrom, takeUntil } from "rxjs";
import { TwoFactorAuthDuoComponent as TwoFactorAuthDuoBaseComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-duo.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ToastService } from "@bitwarden/components";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
@Component({
standalone: true,
selector: "app-two-factor-auth-duo",
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.html",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
FormsModule,
],
})
export class TwoFactorAuthDuoComponent
extends TwoFactorAuthDuoBaseComponent
implements OnInit, OnDestroy
{
private destroy$ = new Subject<void>();
duoResultSubscription: Subscription;
constructor(
protected i18nService: I18nService,
protected platformUtilsService: PlatformUtilsService,
private browserMessagingApi: ZonedMessageListenerService,
private environmentService: EnvironmentService,
toastService: ToastService,
) {
super(i18nService, platformUtilsService, toastService);
}
async ngOnInit(): Promise<void> {
await super.ngOnInit();
}
async ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
protected override setupDuoResultListener() {
if (!this.duoResultSubscription) {
this.duoResultSubscription = this.browserMessagingApi
.messageListener$()
.pipe(
filter((msg: any) => msg.command === "duoResult"),
takeUntil(this.destroy$),
)
.subscribe((msg: { command: string; code: string; state: string }) => {
this.token.emit(msg.code + "|" + msg.state);
});
}
}
override async launchDuoFrameless() {
if (this.duoFramelessUrl === null) {
this.toastService.showToast({
variant: "error",
title: null,
message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
});
return;
}
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(this.duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
}

View File

@@ -1,65 +0,0 @@
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, OnInit, inject } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { TwoFactorAuthEmailComponent as TwoFactorAuthEmailBaseComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-email.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { DialogService } from "../../../../../libs/components/src/dialog";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
@Component({
standalone: true,
selector: "app-two-factor-auth-email",
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.html",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
FormsModule,
],
})
export class TwoFactorAuthEmailComponent extends TwoFactorAuthEmailBaseComponent implements OnInit {
private dialogService = inject(DialogService);
async ngOnInit(): Promise<void> {
if (BrowserPopupUtils.inPopup(window)) {
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "warning" },
content: { key: "popup2faCloseMessage" },
type: "warning",
});
if (confirmed) {
await BrowserPopupUtils.openCurrentPagePopout(window);
return;
}
}
await super.ngOnInit();
}
}

View File

@@ -1,170 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { CommonModule } from "@angular/common";
import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { TwoFactorAuthAuthenticatorComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
import { TwoFactorAuthWebAuthnComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-webauthn.component";
import { TwoFactorAuthYubikeyComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-auth.component";
import { TwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-auth/two-factor-options.component";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { SyncService } from "@bitwarden/common/platform/sync";
import {
ButtonModule,
FormFieldModule,
AsyncActionsModule,
CheckboxModule,
DialogModule,
LinkModule,
TypographyModule,
DialogService,
ToastService,
} from "@bitwarden/components";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "../../../../../libs/auth/src/common/abstractions";
import { BrowserApi } from "../../platform/browser/browser-api";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
import { TwoFactorAuthDuoComponent } from "./two-factor-auth-duo.component";
import { TwoFactorAuthEmailComponent } from "./two-factor-auth-email.component";
@Component({
standalone: true,
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
selector: "app-two-factor-auth",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
RouterLink,
CheckboxModule,
TwoFactorOptionsComponent,
TwoFactorAuthEmailComponent,
TwoFactorAuthAuthenticatorComponent,
TwoFactorAuthYubikeyComponent,
TwoFactorAuthDuoComponent,
TwoFactorAuthWebAuthnComponent,
],
providers: [I18nPipe],
})
export class TwoFactorAuthComponent
extends BaseTwoFactorAuthComponent
implements OnInit, OnDestroy
{
constructor(
protected loginStrategyService: LoginStrategyServiceAbstraction,
protected router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
dialogService: DialogService,
protected route: ActivatedRoute,
logService: LogService,
protected twoFactorService: TwoFactorService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
protected ssoLoginService: SsoLoginServiceAbstraction,
protected configService: ConfigService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
formBuilder: FormBuilder,
@Inject(WINDOW) protected win: Window,
private syncService: SyncService,
private messagingService: MessagingService,
toastService: ToastService,
) {
super(
loginStrategyService,
router,
i18nService,
platformUtilsService,
environmentService,
dialogService,
route,
logService,
twoFactorService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
formBuilder,
win,
toastService,
);
this.onSuccessfulLoginTdeNavigate = async () => {
this.win.close();
};
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
}
async ngOnInit(): Promise<void> {
await super.ngOnInit();
if (this.route.snapshot.paramMap.has("webAuthnResponse")) {
// WebAuthn fallback response
this.selectedProviderType = TwoFactorProviderType.WebAuthn;
this.token = this.route.snapshot.paramMap.get("webAuthnResponse");
this.onSuccessfulLogin = async () => {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.syncService.fullSync(true);
this.messagingService.send("reloadPopup");
window.close();
};
this.remember = this.route.snapshot.paramMap.get("remember") === "true";
await this.submit();
return;
}
if (await BrowserPopupUtils.inPopout(this.win)) {
this.selectedProviderType = TwoFactorProviderType.Email;
}
// WebAuthn prompt appears inside the popup on linux, and requires a larger popup width
// than usual to avoid cutting off the dialog.
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
document.body.classList.add("linux-webauthn");
}
}
async ngOnDestroy() {
if (this.selectedProviderType === TwoFactorProviderType.WebAuthn && (await this.isLinux())) {
document.body.classList.remove("linux-webauthn");
}
}
async isLinux() {
return (await BrowserApi.getPlatformInfo()).os === "linux";
}
}

View File

@@ -1,7 +1,7 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options.component";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import {
TwoFactorProviderDetails,
TwoFactorService,
@@ -12,9 +12,9 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options.component.html",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponent {
constructor(
twoFactorService: TwoFactorService,
router: Router,

View File

@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from "@angular/router";
import { Subject, Subscription, firstValueFrom } from "rxjs";
import { filter, first, takeUntil } from "rxjs/operators";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import {
LoginStrategyServiceAbstraction,
@@ -37,9 +37,9 @@ import { closeTwoFactorAuthWebAuthnPopout } from "./utils/auth-popout-window";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
templateUrl: "two-factor-v1.component.html",
})
export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit, OnDestroy {
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
inPopout = BrowserPopupUtils.inPopout(window);

View File

@@ -10,6 +10,10 @@ import {
openTwoFactorAuthWebAuthnPopout,
closeTwoFactorAuthWebAuthnPopout,
closeSsoAuthResultPopout,
openTwoFactorAuthEmailPopout,
closeTwoFactorAuthEmailPopout,
openTwoFactorAuthDuoPopout,
closeTwoFactorAuthDuoPopout,
} from "./auth-popout-window";
describe("AuthPopoutWindow", () => {
@@ -124,4 +128,40 @@ describe("AuthPopoutWindow", () => {
expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuthWebAuthn);
});
});
describe("openTwoFactorAuthEmailPopout", () => {
it("opens a window that facilitates two factor authentication via email", async () => {
await openTwoFactorAuthEmailPopout();
expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/2fa", {
singleActionKey: AuthPopoutType.twoFactorAuthEmail,
});
});
});
describe("closeTwoFactorAuthEmailPopout", () => {
it("closes the two-factor authentication email window", async () => {
await closeTwoFactorAuthEmailPopout();
expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuthEmail);
});
});
describe("openTwoFactorAuthDuoPopout", () => {
it("opens a window that facilitates two factor authentication via Duo", async () => {
await openTwoFactorAuthDuoPopout();
expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/2fa", {
singleActionKey: AuthPopoutType.twoFactorAuthDuo,
});
});
});
describe("closeTwoFactorAuthDuoPopout", () => {
it("closes the two-factor authentication Duo window", async () => {
await closeTwoFactorAuthDuoPopout();
expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuthDuo);
});
});
});

View File

@@ -7,7 +7,10 @@ const AuthPopoutType = {
unlockExtension: "auth_unlockExtension",
ssoAuthResult: "auth_ssoAuthResult",
twoFactorAuthWebAuthn: "auth_twoFactorAuthWebAuthn",
twoFactorAuthEmail: "auth_twoFactorAuthEmail",
twoFactorAuthDuo: "auth_twoFactorAuthDuo",
} as const;
const extensionUnlockUrls = new Set([
chrome.runtime.getURL("popup/index.html#/lock"),
chrome.runtime.getURL("popup/index.html#/home"),
@@ -87,12 +90,44 @@ async function openTwoFactorAuthWebAuthnPopout(twoFactorAuthWebAuthnData: {
}
/**
* Closes the two-factor authentication popout window.
* Closes the two-factor authentication WebAuthn popout window.
*/
async function closeTwoFactorAuthWebAuthnPopout() {
await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.twoFactorAuthWebAuthn);
}
/**
* Opens a popout that facilitates two-factor authentication via email.
*/
async function openTwoFactorAuthEmailPopout() {
await BrowserPopupUtils.openPopout("popup/index.html#/2fa", {
singleActionKey: AuthPopoutType.twoFactorAuthEmail,
});
}
/**
* Closes the two-factor authentication email popout window.
*/
async function closeTwoFactorAuthEmailPopout() {
await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.twoFactorAuthEmail);
}
/**
* Opens the two-factor authentication Duo popout.
*/
async function openTwoFactorAuthDuoPopout() {
await BrowserPopupUtils.openPopout("popup/index.html#/2fa", {
singleActionKey: AuthPopoutType.twoFactorAuthDuo,
});
}
/**
* Closes the two-factor authentication Duo popout.
*/
async function closeTwoFactorAuthDuoPopout() {
await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.twoFactorAuthDuo);
}
export {
AuthPopoutType,
openUnlockPopout,
@@ -101,4 +136,8 @@ export {
closeSsoAuthResultPopout,
openTwoFactorAuthWebAuthnPopout,
closeTwoFactorAuthWebAuthnPopout,
openTwoFactorAuthEmailPopout,
closeTwoFactorAuthEmailPopout,
openTwoFactorAuthDuoPopout,
closeTwoFactorAuthDuoPopout,
};

View File

@@ -0,0 +1,189 @@
import { MockProxy, mock } from "jest-mock-extended";
// Must mock modules before importing
jest.mock("../popup/utils/auth-popout-window", () => {
const originalModule = jest.requireActual("../popup/utils/auth-popout-window");
return {
...originalModule, // avoid losing the original module's exports
closeSsoAuthResultPopout: jest.fn(),
closeTwoFactorAuthWebAuthnPopout: jest.fn(),
closeTwoFactorAuthEmailPopout: jest.fn(),
closeTwoFactorAuthDuoPopout: jest.fn(),
};
});
jest.mock("../../platform/popup/browser-popup-utils", () => ({
inSingleActionPopout: jest.fn(),
}));
import { DuoLaunchAction } from "@bitwarden/auth/angular";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { BrowserApi } from "../../platform/browser/browser-api";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
import {
AuthPopoutType,
closeSsoAuthResultPopout,
closeTwoFactorAuthDuoPopout,
closeTwoFactorAuthEmailPopout,
closeTwoFactorAuthWebAuthnPopout,
} from "../popup/utils/auth-popout-window";
import { ExtensionTwoFactorAuthComponentService } from "./extension-two-factor-auth-component.service";
describe("ExtensionTwoFactorAuthComponentService", () => {
let extensionTwoFactorAuthComponentService: ExtensionTwoFactorAuthComponentService;
let window: MockProxy<Window>;
beforeEach(() => {
jest.clearAllMocks();
window = mock<Window>();
document.body.className = ""; // Reset any added classes between tests.
extensionTwoFactorAuthComponentService = new ExtensionTwoFactorAuthComponentService(window);
});
describe("shouldCheckForWebAuthnQueryParamResponse", () => {
it("should return true for the extension", () => {
expect(
extensionTwoFactorAuthComponentService.shouldCheckForWebAuthnQueryParamResponse(),
).toBe(true);
});
});
describe("extendPopupWidthIfRequired", () => {
it("should add linux-webauthn class to body if selected2faProviderType is WebAuthn and isLinux is true", async () => {
jest
.spyOn(extensionTwoFactorAuthComponentService as unknown as any, "isLinux")
.mockResolvedValue(true);
await extensionTwoFactorAuthComponentService.extendPopupWidthIfRequired(
TwoFactorProviderType.WebAuthn,
);
expect(document.body.classList).toContain("linux-webauthn");
});
it("should not add linux-webauthn class to body if selected2faProviderType is WebAuthn and isLinux is false", async () => {
jest
.spyOn(extensionTwoFactorAuthComponentService as unknown as any, "isLinux")
.mockResolvedValue(false);
await extensionTwoFactorAuthComponentService.extendPopupWidthIfRequired(
TwoFactorProviderType.WebAuthn,
);
expect(document.body.classList).not.toContain("linux-webauthn");
});
it.each([
[true, TwoFactorProviderType.Email],
[false, TwoFactorProviderType.Email],
])(
"should not add linux-webauthn class to body if selected2faProviderType is not WebAuthn and isLinux is %s",
async (isLinux, selected2faProviderType) => {
jest
.spyOn(extensionTwoFactorAuthComponentService as unknown as any, "isLinux")
.mockResolvedValue(isLinux);
await extensionTwoFactorAuthComponentService.extendPopupWidthIfRequired(
selected2faProviderType,
);
expect(document.body.classList).not.toContain("linux-webauthn");
},
);
});
describe("removePopupWidthExtension", () => {
it("should remove linux-webauthn class from body", () => {
document.body.classList.add("linux-webauthn");
extensionTwoFactorAuthComponentService.removePopupWidthExtension();
expect(document.body.classList).not.toContain("linux-webauthn");
});
});
describe("closeSingleActionPopouts", () => {
it("should call closeSsoAuthResultPopout if in SSO auth result popout", async () => {
const inSingleActionPopoutSpy = jest
.spyOn(BrowserPopupUtils, "inSingleActionPopout")
.mockImplementation((_, key) => {
return key === AuthPopoutType.ssoAuthResult;
});
await extensionTwoFactorAuthComponentService.closeSingleActionPopouts();
expect(inSingleActionPopoutSpy).toHaveBeenCalledTimes(1);
expect(closeSsoAuthResultPopout).toHaveBeenCalled();
});
it("should call closeTwoFactorAuthWebAuthnPopout if in two factor auth webauthn popout", async () => {
const inSingleActionPopoutSpy = jest
.spyOn(BrowserPopupUtils, "inSingleActionPopout")
.mockImplementation((_, key) => {
return key === AuthPopoutType.twoFactorAuthWebAuthn;
});
await extensionTwoFactorAuthComponentService.closeSingleActionPopouts();
expect(inSingleActionPopoutSpy).toHaveBeenCalledTimes(2);
expect(closeTwoFactorAuthWebAuthnPopout).toHaveBeenCalled();
});
it("should call closeTwoFactorAuthEmailPopout if in two factor auth email popout", async () => {
const inSingleActionPopoutSpy = jest
.spyOn(BrowserPopupUtils, "inSingleActionPopout")
.mockImplementation((_, key) => {
return key === AuthPopoutType.twoFactorAuthEmail;
});
await extensionTwoFactorAuthComponentService.closeSingleActionPopouts();
expect(inSingleActionPopoutSpy).toHaveBeenCalledTimes(3);
expect(closeTwoFactorAuthEmailPopout).toHaveBeenCalled();
});
it("should call closeTwoFactorAuthDuoPopout if in two factor auth duo popout", async () => {
const inSingleActionPopoutSpy = jest
.spyOn(BrowserPopupUtils, "inSingleActionPopout")
.mockImplementation((_, key) => {
return key === AuthPopoutType.twoFactorAuthDuo;
});
await extensionTwoFactorAuthComponentService.closeSingleActionPopouts();
expect(inSingleActionPopoutSpy).toHaveBeenCalledTimes(4);
expect(closeTwoFactorAuthDuoPopout).toHaveBeenCalled();
});
});
describe("reloadOpenWindows", () => {
it("should call reload open windows (exempting current)", async () => {
const reloadOpenWindowsSpy = jest.spyOn(BrowserApi, "reloadOpenWindows").mockImplementation();
extensionTwoFactorAuthComponentService.reloadOpenWindows();
expect(reloadOpenWindowsSpy).toHaveBeenCalledWith(true);
});
});
describe("determineDuoLaunchAction", () => {
it("should return DIRECT_LAUNCH if in two factor auth duo popout", () => {
jest.spyOn(BrowserPopupUtils, "inSingleActionPopout").mockImplementation((_, key) => {
return key === AuthPopoutType.twoFactorAuthDuo;
});
expect(extensionTwoFactorAuthComponentService.determineDuoLaunchAction()).toBe(
DuoLaunchAction.DIRECT_LAUNCH,
);
});
it("should return SINGLE_ACTION_POPOUT if not in two factor auth duo popout", () => {
jest.spyOn(BrowserPopupUtils, "inSingleActionPopout").mockImplementation(() => false);
expect(extensionTwoFactorAuthComponentService.determineDuoLaunchAction()).toBe(
DuoLaunchAction.SINGLE_ACTION_POPOUT,
);
});
});
});

View File

@@ -0,0 +1,115 @@
import {
DefaultTwoFactorAuthComponentService,
DuoLaunchAction,
TwoFactorAuthComponentService,
} from "@bitwarden/auth/angular";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { BrowserApi } from "../../platform/browser/browser-api";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
import {
AuthPopoutType,
closeSsoAuthResultPopout,
closeTwoFactorAuthDuoPopout,
closeTwoFactorAuthEmailPopout,
closeTwoFactorAuthWebAuthnPopout,
} from "../popup/utils/auth-popout-window";
export class ExtensionTwoFactorAuthComponentService
extends DefaultTwoFactorAuthComponentService
implements TwoFactorAuthComponentService
{
constructor(private window: Window) {
super();
}
shouldCheckForWebAuthnQueryParamResponse(): boolean {
return true;
}
async extendPopupWidthIfRequired(selected2faProviderType: TwoFactorProviderType): Promise<void> {
// WebAuthn prompt appears inside the popup on linux, and requires a larger popup width
// than usual to avoid cutting off the dialog.
const isLinux = await this.isLinux();
if (selected2faProviderType === TwoFactorProviderType.WebAuthn && isLinux) {
document.body.classList.add("linux-webauthn");
}
}
removePopupWidthExtension(): void {
document.body.classList.remove("linux-webauthn");
}
reloadOpenWindows(): void {
// Force sidebars (FF && Opera) to reload while exempting current window
// because we are just going to close the current window if it is in a popout
// or navigate forward if it is in the popup
BrowserApi.reloadOpenWindows(true);
}
async closeSingleActionPopouts(): Promise<boolean> {
// If we are in a single action popout, we don't need the popout anymore because the intent
// is for the user to be left on the web vault screen which tells them to continue in
// the browser extension (sidebar or popup). We don't want the user to be left with a
// floating, popped out extension which could be lost behind another window or minimized.
// Currently, the popped out window thinks it is active and wouldn't time out which
// leads to the security concern. So, we close the popped out extension to avoid this.
const inSsoAuthResultPopout = BrowserPopupUtils.inSingleActionPopout(
this.window,
AuthPopoutType.ssoAuthResult,
);
if (inSsoAuthResultPopout) {
await closeSsoAuthResultPopout();
return true;
}
const inTwoFactorAuthWebAuthnPopout = BrowserPopupUtils.inSingleActionPopout(
this.window,
AuthPopoutType.twoFactorAuthWebAuthn,
);
if (inTwoFactorAuthWebAuthnPopout) {
await closeTwoFactorAuthWebAuthnPopout();
return true;
}
const inTwoFactorAuthEmailPopout = BrowserPopupUtils.inSingleActionPopout(
this.window,
AuthPopoutType.twoFactorAuthEmail,
);
if (inTwoFactorAuthEmailPopout) {
await closeTwoFactorAuthEmailPopout();
return true;
}
const inTwoFactorAuthDuoPopout = BrowserPopupUtils.inSingleActionPopout(
this.window,
AuthPopoutType.twoFactorAuthDuo,
);
if (inTwoFactorAuthDuoPopout) {
await closeTwoFactorAuthDuoPopout();
return true;
}
return false;
}
private async isLinux(): Promise<boolean> {
const platformInfo = await BrowserApi.getPlatformInfo();
return platformInfo.os === "linux";
}
determineDuoLaunchAction(): DuoLaunchAction {
const inTwoFactorAuthDuoPopout = BrowserPopupUtils.inSingleActionPopout(
this.window,
AuthPopoutType.twoFactorAuthDuo,
);
if (inTwoFactorAuthDuoPopout) {
return DuoLaunchAction.DIRECT_LAUNCH;
}
return DuoLaunchAction.SINGLE_ACTION_POPOUT;
}
}

View File

@@ -0,0 +1,93 @@
import { MockProxy, mock } from "jest-mock-extended";
import { BehaviorSubject, firstValueFrom } from "rxjs";
import {
Environment,
EnvironmentService,
} from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
import I18nService from "../../platform/services/i18n.service";
import { ExtensionTwoFactorAuthDuoComponentService } from "./extension-two-factor-auth-duo-component.service";
describe("ExtensionTwoFactorAuthDuoComponentService", () => {
let extensionTwoFactorAuthDuoComponentService: ExtensionTwoFactorAuthDuoComponentService;
let browserMessagingApi: MockProxy<ZonedMessageListenerService>;
let environmentService: MockProxy<EnvironmentService>;
let i18nService: MockProxy<I18nService>;
let platformUtilsService: MockProxy<PlatformUtilsService>;
beforeEach(() => {
jest.clearAllMocks();
browserMessagingApi = mock<ZonedMessageListenerService>();
environmentService = mock<EnvironmentService>();
i18nService = mock<I18nService>();
platformUtilsService = mock<PlatformUtilsService>();
extensionTwoFactorAuthDuoComponentService = new ExtensionTwoFactorAuthDuoComponentService(
browserMessagingApi,
environmentService,
i18nService,
platformUtilsService,
);
});
describe("listenForDuo2faResult$", () => {
it("should return an observable that emits a duo 2FA result when a duo result message is received", async () => {
const message = {
command: "duoResult",
code: "123456",
state: "abcdef",
};
const expectedDuo2faResult = {
code: message.code,
state: message.state,
token: `${message.code}|${message.state}`,
};
const messageStream$ = new BehaviorSubject(message);
browserMessagingApi.messageListener$.mockReturnValue(messageStream$);
const duo2faResult = await firstValueFrom(
extensionTwoFactorAuthDuoComponentService.listenForDuo2faResult$(),
);
expect(duo2faResult).toEqual(expectedDuo2faResult);
});
});
describe("launchDuoFrameless", () => {
it("should launch the duo frameless url", async () => {
// Arrange
const duoFramelessUrl = "https://duoFramelessUrl";
const webVaultUrl = "https://webVaultUrl";
i18nService.t.mockImplementation((key) => key);
const launchUrl = `${webVaultUrl}/duo-redirect-connector.html?duoFramelessUrl=${encodeURIComponent(
duoFramelessUrl,
)}&handOffMessage=${encodeURIComponent(
JSON.stringify({
title: "youSuccessfullyLoggedIn",
message: "youMayCloseThisWindow",
isCountdown: false,
}),
)}`;
const mockEnvironment = {
getWebVaultUrl: () => webVaultUrl,
} as unknown as Environment;
const environmentBSubject = new BehaviorSubject(mockEnvironment);
environmentService.environment$ = environmentBSubject.asObservable();
// Act
await extensionTwoFactorAuthDuoComponentService.launchDuoFrameless(duoFramelessUrl);
// Assert
expect(platformUtilsService.launchUri).toHaveBeenCalledWith(launchUrl);
});
});
});

View File

@@ -0,0 +1,62 @@
import { filter, firstValueFrom, map, Observable } from "rxjs";
import { Duo2faResult, TwoFactorAuthDuoComponentService } from "@bitwarden/auth/angular";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { openTwoFactorAuthDuoPopout } from "../../auth/popup/utils/auth-popout-window";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
interface Message {
command: string;
code: string;
state: string;
}
export class ExtensionTwoFactorAuthDuoComponentService implements TwoFactorAuthDuoComponentService {
constructor(
private browserMessagingApi: ZonedMessageListenerService,
private environmentService: EnvironmentService,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
) {}
listenForDuo2faResult$(): Observable<Duo2faResult> {
return this.browserMessagingApi.messageListener$().pipe(
filter((msg): msg is Message => {
return (msg as Message).command === "duoResult";
}),
map((msg: Message) => {
return {
code: msg.code,
state: msg.state,
token: `${msg.code}|${msg.state}`,
} as Duo2faResult;
}),
);
}
async launchDuoFrameless(duoFramelessUrl: string): Promise<void> {
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
async openTwoFactorAuthDuoPopout(): Promise<void> {
await openTwoFactorAuthDuoPopout();
}
}

View File

@@ -0,0 +1,93 @@
import { MockProxy, mock } from "jest-mock-extended";
import { DialogService } from "@bitwarden/components";
// Must mock modules before importing
jest.mock("../popup/utils/auth-popout-window", () => {
const originalModule = jest.requireActual("../popup/utils/auth-popout-window");
return {
...originalModule, // avoid losing the original module's exports
openTwoFactorAuthEmailPopout: jest.fn(),
};
});
jest.mock("../../platform/popup/browser-popup-utils", () => ({
inPopup: jest.fn(),
}));
import { openTwoFactorAuthEmailPopout } from "../../auth/popup/utils/auth-popout-window";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
import { ExtensionTwoFactorAuthEmailComponentService } from "./extension-two-factor-auth-email-component.service";
describe("ExtensionTwoFactorAuthEmailComponentService", () => {
let extensionTwoFactorAuthEmailComponentService: ExtensionTwoFactorAuthEmailComponentService;
let dialogService: MockProxy<DialogService>;
let window: MockProxy<Window>;
beforeEach(() => {
jest.clearAllMocks();
dialogService = mock<DialogService>();
window = mock<Window>();
extensionTwoFactorAuthEmailComponentService = new ExtensionTwoFactorAuthEmailComponentService(
dialogService,
window,
);
});
describe("openPopoutIfApprovedForEmail2fa", () => {
it("should open a popout if the user confirms the warning to popout the extension when in the popup", async () => {
// Arrange
dialogService.openSimpleDialog.mockResolvedValue(true);
jest.spyOn(BrowserPopupUtils, "inPopup").mockReturnValue(true);
// Act
await extensionTwoFactorAuthEmailComponentService.openPopoutIfApprovedForEmail2fa();
// Assert
expect(dialogService.openSimpleDialog).toHaveBeenCalledWith({
title: { key: "warning" },
content: { key: "popup2faCloseMessage" },
type: "warning",
});
expect(openTwoFactorAuthEmailPopout).toHaveBeenCalled();
});
it("should not open a popout if the user cancels the warning to popout the extension when in the popup", async () => {
// Arrange
dialogService.openSimpleDialog.mockResolvedValue(false);
jest.spyOn(BrowserPopupUtils, "inPopup").mockReturnValue(true);
// Act
await extensionTwoFactorAuthEmailComponentService.openPopoutIfApprovedForEmail2fa();
// Assert
expect(dialogService.openSimpleDialog).toHaveBeenCalledWith({
title: { key: "warning" },
content: { key: "popup2faCloseMessage" },
type: "warning",
});
expect(openTwoFactorAuthEmailPopout).not.toHaveBeenCalled();
});
it("should not open a popout if not in the popup", async () => {
// Arrange
jest.spyOn(BrowserPopupUtils, "inPopup").mockReturnValue(false);
// Act
await extensionTwoFactorAuthEmailComponentService.openPopoutIfApprovedForEmail2fa();
// Assert
expect(dialogService.openSimpleDialog).not.toHaveBeenCalled();
expect(openTwoFactorAuthEmailPopout).not.toHaveBeenCalled();
});
});
});

View File

@@ -0,0 +1,35 @@
import {
DefaultTwoFactorAuthEmailComponentService,
TwoFactorAuthEmailComponentService,
} from "@bitwarden/auth/angular";
import { DialogService } from "@bitwarden/components";
import { openTwoFactorAuthEmailPopout } from "../../auth/popup/utils/auth-popout-window";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
// TODO: popup state persistence should eventually remove the need for this service
export class ExtensionTwoFactorAuthEmailComponentService
extends DefaultTwoFactorAuthEmailComponentService
implements TwoFactorAuthEmailComponentService
{
constructor(
private dialogService: DialogService,
private window: Window,
) {
super();
}
async openPopoutIfApprovedForEmail2fa(): Promise<void> {
if (BrowserPopupUtils.inPopup(this.window)) {
const confirmed = await this.dialogService.openSimpleDialog({
title: { key: "warning" },
content: { key: "popup2faCloseMessage" },
type: "warning",
});
if (confirmed) {
await openTwoFactorAuthEmailPopout();
this.window.close();
}
}
}
}

View File

@@ -0,0 +1,44 @@
import { MockProxy, mock } from "jest-mock-extended";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ExtensionTwoFactorAuthWebAuthnComponentService } from "./extension-two-factor-auth-webauthn-component.service";
describe("ExtensionTwoFactorAuthWebAuthnComponentService", () => {
let extensionTwoFactorAuthWebAuthnComponentService: ExtensionTwoFactorAuthWebAuthnComponentService;
let platformUtilsService: MockProxy<PlatformUtilsService>;
beforeEach(() => {
jest.clearAllMocks();
platformUtilsService = mock<PlatformUtilsService>();
extensionTwoFactorAuthWebAuthnComponentService =
new ExtensionTwoFactorAuthWebAuthnComponentService(platformUtilsService);
});
describe("shouldOpenWebAuthnInNewTab", () => {
it("should return false if the browser is Chrome", () => {
// Arrange
platformUtilsService.isChrome.mockReturnValue(true);
// Act
const result = extensionTwoFactorAuthWebAuthnComponentService.shouldOpenWebAuthnInNewTab();
// Assert
expect(result).toBe(false);
});
it("should return true if the browser is not Chrome", () => {
// Arrange
platformUtilsService.isChrome.mockReturnValue(false);
// Act
const result = extensionTwoFactorAuthWebAuthnComponentService.shouldOpenWebAuthnInNewTab();
// Assert
expect(result).toBe(true);
});
});
});

View File

@@ -0,0 +1,30 @@
import {
DefaultTwoFactorAuthWebAuthnComponentService,
TwoFactorAuthWebAuthnComponentService,
} from "@bitwarden/auth/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
export class ExtensionTwoFactorAuthWebAuthnComponentService
extends DefaultTwoFactorAuthWebAuthnComponentService
implements TwoFactorAuthWebAuthnComponentService
{
constructor(private platformUtilsService: PlatformUtilsService) {
super();
}
/**
* In the browser extension, we open webAuthn in a new web client tab sometimes due to inline
* WebAuthn Iframe's not working in some browsers. We open a 2FA popout upon successful
* completion of WebAuthn submission with query parameters to finish the 2FA process.
* @returns boolean
*/
shouldOpenWebAuthnInNewTab(): boolean {
const isChrome = this.platformUtilsService.isChrome();
if (isChrome) {
// Chrome now supports WebAuthn in the iframe in the extension now.
return false;
}
return true;
}
}

View File

@@ -18,19 +18,16 @@ import {
unauthGuardFn,
} from "@bitwarden/angular/auth/guards";
import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import { twofactorRefactorSwap } from "@bitwarden/angular/utils/two-factor-component-refactor-route-swap";
import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards";
import {
AnonLayoutWrapperComponent,
AnonLayoutWrapperData,
DevicesIcon,
DeviceVerificationIcon,
LockIcon,
LoginComponent,
LoginDecryptionOptionsComponent,
LoginSecondaryContentComponent,
LoginViaAuthRequestComponent,
NewDeviceVerificationComponent,
PasswordHintComponent,
RegistrationFinishComponent,
RegistrationLockAltIcon,
@@ -41,6 +38,10 @@ import {
SetPasswordJitComponent,
SsoComponent,
TwoFactorTimeoutIcon,
TwoFactorAuthComponent,
TwoFactorAuthGuard,
NewDeviceVerificationComponent,
DeviceVerificationIcon,
UserLockIcon,
VaultIcon,
} from "@bitwarden/auth/angular";
@@ -68,9 +69,8 @@ import { RemovePasswordComponent } from "../auth/popup/remove-password.component
import { SetPasswordComponent } from "../auth/popup/set-password.component";
import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
import { SsoComponentV1 } from "../auth/popup/sso-v1.component";
import { TwoFactorAuthComponent } from "../auth/popup/two-factor-auth.component";
import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.component";
import { TwoFactorComponent } from "../auth/popup/two-factor.component";
import { TwoFactorOptionsComponentV1 } from "../auth/popup/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/popup/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
import { Fido2Component } from "../autofill/popup/fido2/fido2.component";
import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
@@ -153,9 +153,9 @@ const routes: Routes = [
canActivate: [fido2AuthGuard],
data: { elevation: 1 } satisfies RouteDataProperties,
},
...twofactorRefactorSwap(
TwoFactorComponent,
AnonLayoutWrapperComponent,
...unauthUiRefreshSwap(
TwoFactorComponentV1,
ExtensionAnonLayoutWrapperComponent,
{
path: "2fa",
canActivate: [unauthGuardFn(unauthRouteOverrides)],
@@ -163,14 +163,20 @@ const routes: Routes = [
},
{
path: "2fa",
canActivate: [unauthGuardFn(unauthRouteOverrides)],
data: { elevation: 1 } satisfies RouteDataProperties,
canActivate: [unauthGuardFn(unauthRouteOverrides), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
],
data: {
elevation: 1,
pageTitle: {
key: "verifyIdentity",
},
showBackButton: true,
} satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
},
),
{
@@ -198,7 +204,7 @@ const routes: Routes = [
},
{
path: "2fa-options",
component: TwoFactorOptionsComponent,
component: TwoFactorOptionsComponentV1,
canActivate: [unauthGuardFn(unauthRouteOverrides)],
data: { elevation: 1 } satisfies RouteDataProperties,
},

View File

@@ -31,8 +31,8 @@ import { SetPasswordComponent } from "../auth/popup/set-password.component";
import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
import { VaultTimeoutInputComponent } from "../auth/popup/settings/vault-timeout-input.component";
import { SsoComponentV1 } from "../auth/popup/sso-v1.component";
import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.component";
import { TwoFactorComponent } from "../auth/popup/two-factor.component";
import { TwoFactorOptionsComponentV1 } from "../auth/popup/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/popup/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
@@ -105,8 +105,8 @@ import "../platform/popup/locales";
SetPasswordComponent,
SsoComponentV1,
TabsV2Component,
TwoFactorComponent,
TwoFactorOptionsComponent,
TwoFactorComponentV1,
TwoFactorOptionsComponentV1,
UpdateTempPasswordComponent,
UserVerificationComponent,
VaultTimeoutInputComponent,

View File

@@ -211,15 +211,13 @@ p.lead {
}
#web-authn-frame {
background: url("../images/loading.svg") 0 0 no-repeat;
width: 100%;
height: 310px;
margin-bottom: -10px;
height: 40px;
iframe {
width: 100%;
height: 100%;
border: none;
height: 100%;
width: 100%;
}
}

View File

@@ -19,12 +19,17 @@ import {
SafeInjectionToken,
SECURE_STORAGE,
SYSTEM_THEME_OBSERVABLE,
WINDOW,
} from "@bitwarden/angular/services/injection-tokens";
import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
import {
AnonLayoutWrapperDataService,
LoginComponentService,
LoginDecryptionOptionsService,
TwoFactorAuthComponentService,
TwoFactorAuthEmailComponentService,
TwoFactorAuthDuoComponentService,
TwoFactorAuthWebAuthnComponentService,
SsoComponentService,
} from "@bitwarden/auth/angular";
import {
@@ -129,6 +134,10 @@ import { ExtensionAnonLayoutWrapperDataService } from "../../auth/popup/extensio
import { ExtensionLoginComponentService } from "../../auth/popup/login/extension-login-component.service";
import { ExtensionSsoComponentService } from "../../auth/popup/login/extension-sso-component.service";
import { ExtensionLoginDecryptionOptionsService } from "../../auth/popup/login-decryption-options/extension-login-decryption-options.service";
import { ExtensionTwoFactorAuthComponentService } from "../../auth/services/extension-two-factor-auth-component.service";
import { ExtensionTwoFactorAuthDuoComponentService } from "../../auth/services/extension-two-factor-auth-duo-component.service";
import { ExtensionTwoFactorAuthEmailComponentService } from "../../auth/services/extension-two-factor-auth-email-component.service";
import { ExtensionTwoFactorAuthWebAuthnComponentService } from "../../auth/services/extension-two-factor-auth-webauthn-component.service";
import { AutofillService as AutofillServiceAbstraction } from "../../autofill/services/abstractions/autofill.service";
import AutofillService from "../../autofill/services/autofill.service";
import { InlineMenuFieldQualificationService } from "../../autofill/services/inline-menu-field-qualification.service";
@@ -137,6 +146,7 @@ import { ExtensionLockComponentService } from "../../key-management/lock/service
import { BrowserApi } from "../../platform/browser/browser-api";
import { runInsideAngular } from "../../platform/browser/run-inside-angular.operator";
/* eslint-disable no-restricted-imports */
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
import { ChromeMessageSender } from "../../platform/messaging/chrome-message.sender";
/* eslint-enable no-restricted-imports */
import { OffscreenDocumentService } from "../../platform/offscreen-document/abstractions/offscreen-document";
@@ -531,6 +541,32 @@ const safeProviders: SafeProvider[] = [
useClass: ExtensionLockComponentService,
deps: [],
}),
// TODO: PM-18182 - Refactor component services into lazy loaded modules
safeProvider({
provide: TwoFactorAuthComponentService,
useClass: ExtensionTwoFactorAuthComponentService,
deps: [WINDOW],
}),
safeProvider({
provide: TwoFactorAuthEmailComponentService,
useClass: ExtensionTwoFactorAuthEmailComponentService,
deps: [DialogService, WINDOW],
}),
safeProvider({
provide: TwoFactorAuthWebAuthnComponentService,
useClass: ExtensionTwoFactorAuthWebAuthnComponentService,
deps: [PlatformUtilsService],
}),
safeProvider({
provide: TwoFactorAuthDuoComponentService,
useClass: ExtensionTwoFactorAuthDuoComponentService,
deps: [
ZonedMessageListenerService,
EnvironmentService,
I18nServiceAbstraction,
PlatformUtilsService,
],
}),
safeProvider({
provide: Fido2UserVerificationService,
useClass: Fido2UserVerificationService,

View File

@@ -16,7 +16,6 @@ import {
unauthGuardFn,
} from "@bitwarden/angular/auth/guards";
import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import { twofactorRefactorSwap } from "@bitwarden/angular/utils/two-factor-component-refactor-route-swap";
import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards";
import {
AnonLayoutWrapperComponent,
@@ -39,6 +38,8 @@ import {
DevicesIcon,
SsoComponent,
TwoFactorTimeoutIcon,
TwoFactorAuthComponent,
TwoFactorAuthGuard,
NewDeviceVerificationComponent,
DeviceVerificationIcon,
} from "@bitwarden/auth/angular";
@@ -59,8 +60,7 @@ import { LoginViaAuthRequestComponentV1 } from "../auth/login/login-via-auth-req
import { RemovePasswordComponent } from "../auth/remove-password.component";
import { SetPasswordComponent } from "../auth/set-password.component";
import { SsoComponentV1 } from "../auth/sso-v1.component";
import { TwoFactorAuthComponent } from "../auth/two-factor-auth.component";
import { TwoFactorComponent } from "../auth/two-factor.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { VaultComponent } from "../vault/app/vault/vault.component";
@@ -82,22 +82,26 @@ const routes: Routes = [
children: [], // Children lets us have an empty component.
canActivate: [redirectGuard({ loggedIn: "/vault", loggedOut: "/login", locked: "/lock" })],
},
...twofactorRefactorSwap(
TwoFactorComponent,
...unauthUiRefreshSwap(
TwoFactorComponentV1,
AnonLayoutWrapperComponent,
{
path: "2fa",
},
{
path: "2fa",
component: AnonLayoutWrapperComponent,
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
canActivate: [unauthGuardFn()],
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
),
{

View File

@@ -18,8 +18,8 @@ import { LoginModule } from "../auth/login/login.module";
import { RemovePasswordComponent } from "../auth/remove-password.component";
import { SetPasswordComponent } from "../auth/set-password.component";
import { SsoComponentV1 } from "../auth/sso-v1.component";
import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
import { TwoFactorComponent } from "../auth/two-factor.component";
import { TwoFactorOptionsComponentV1 } from "../auth/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { PremiumComponent } from "../billing/app/accounts/premium.component";
import { SshAgentService } from "../platform/services/ssh-agent.service";
@@ -86,9 +86,9 @@ import { SendComponent } from "./tools/send/send.component";
SetPasswordComponent,
SettingsComponent,
ShareComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorComponent,
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
UpdateTempPasswordComponent,
VaultComponent,
VaultTimeoutInputComponent,

View File

@@ -26,6 +26,7 @@ import {
SetPasswordJitService,
SsoComponentService,
DefaultSsoComponentService,
TwoFactorAuthDuoComponentService,
} from "@bitwarden/auth/angular";
import {
InternalUserDecryptionOptionsServiceAbstraction,
@@ -103,6 +104,7 @@ import { LockComponentService } from "@bitwarden/key-management-ui";
import { DesktopLoginApprovalComponentService } from "../../auth/login/desktop-login-approval-component.service";
import { DesktopLoginComponentService } from "../../auth/login/desktop-login-component.service";
import { DesktopTwoFactorAuthDuoComponentService } from "../../auth/services/desktop-two-factor-auth-duo-component.service";
import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
import { DesktopAutofillService } from "../../autofill/services/desktop-autofill.service";
import { DesktopFido2UserInterfaceService } from "../../autofill/services/desktop-fido2-user-interface.service";
@@ -398,6 +400,16 @@ const safeProviders: SafeProvider[] = [
SsoUrlService,
],
}),
safeProvider({
provide: TwoFactorAuthDuoComponentService,
useClass: DesktopTwoFactorAuthDuoComponentService,
deps: [
MessageListener,
EnvironmentService,
I18nServiceAbstraction,
PlatformUtilsServiceAbstraction,
],
}),
safeProvider({
provide: SdkClientFactory,
useClass: flagEnabled("sdk") ? DefaultSdkClientFactory : NoopSdkClientFactory,

View File

@@ -0,0 +1,93 @@
import { MockProxy, mock } from "jest-mock-extended";
import { BehaviorSubject, firstValueFrom } from "rxjs";
import {
Environment,
EnvironmentService,
} from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { MessageListener } from "@bitwarden/common/platform/messaging";
import { DesktopTwoFactorAuthDuoComponentService } from "./desktop-two-factor-auth-duo-component.service";
describe("DesktopTwoFactorAuthDuoComponentService", () => {
let desktopTwoFactorAuthDuoComponentService: DesktopTwoFactorAuthDuoComponentService;
let messageListener: MockProxy<MessageListener>;
let environmentService: MockProxy<EnvironmentService>;
let i18nService: MockProxy<I18nService>;
let platformUtilsService: MockProxy<PlatformUtilsService>;
beforeEach(() => {
jest.clearAllMocks();
messageListener = mock<MessageListener>();
environmentService = mock<EnvironmentService>();
i18nService = mock<I18nService>();
platformUtilsService = mock<PlatformUtilsService>();
desktopTwoFactorAuthDuoComponentService = new DesktopTwoFactorAuthDuoComponentService(
messageListener,
environmentService,
i18nService,
platformUtilsService,
);
});
describe("listenForDuo2faResult$", () => {
it("should return an observable that emits a duo 2FA result when a duo result message is received", async () => {
const message: { code: string; state: string } = {
code: "123456",
state: "abcdef",
};
const expectedDuo2faResult = {
code: message.code,
state: message.state,
token: `${message.code}|${message.state}`,
};
const messages = new BehaviorSubject(message);
messageListener.messages$.mockReturnValue(messages);
const duo2faResult = await firstValueFrom(
desktopTwoFactorAuthDuoComponentService.listenForDuo2faResult$(),
);
expect(duo2faResult).toEqual(expectedDuo2faResult);
});
});
describe("launchDuoFrameless", () => {
it("should build and launch the duo frameless URL", async () => {
// Arrange
const duoFramelessUrl = "https://duoFramelessUrl";
const webVaultUrl = "https://webVaultUrl";
i18nService.t.mockImplementation((key) => key);
const handOffMessage = {
title: "youSuccessfullyLoggedIn",
message: "youMayCloseThisWindow",
isCountdown: false,
};
const mockEnvironment = {
getWebVaultUrl: () => webVaultUrl,
} as unknown as Environment;
const environmentBSubject = new BehaviorSubject(mockEnvironment);
environmentService.environment$ = environmentBSubject.asObservable();
// Act
await desktopTwoFactorAuthDuoComponentService.launchDuoFrameless(duoFramelessUrl);
// Assert
const launchUrl =
webVaultUrl +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(handOffMessage));
expect(platformUtilsService.launchUri).toHaveBeenCalledWith(launchUrl);
});
});
});

View File

@@ -0,0 +1,56 @@
import { firstValueFrom, map, Observable } from "rxjs";
import { TwoFactorAuthDuoComponentService, Duo2faResult } from "@bitwarden/auth/angular";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { CommandDefinition, MessageListener } from "@bitwarden/common/platform/messaging";
// TODO: PM-16209 We should create a Duo2faMessageListenerService that listens for messages from duo
// and this command definition should move to that file.
// We should explore consolidating the messaging approach across clients - i.e., we
// should use the same command definition across all clients. We use duoResult on extension for no real
// benefit.
export const DUO_2FA_RESULT_COMMAND = new CommandDefinition<{ code: string; state: string }>(
"duoCallback",
);
export class DesktopTwoFactorAuthDuoComponentService implements TwoFactorAuthDuoComponentService {
constructor(
private messageListener: MessageListener,
private environmentService: EnvironmentService,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
) {}
listenForDuo2faResult$(): Observable<Duo2faResult> {
return this.messageListener.messages$(DUO_2FA_RESULT_COMMAND).pipe(
map((msg) => {
return {
code: msg.code,
state: msg.state,
token: `${msg.code}|${msg.state}`,
} as Duo2faResult;
}),
);
}
async launchDuoFrameless(duoFramelessUrl: string): Promise<void> {
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
}

View File

@@ -1,117 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { firstValueFrom } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import {
AsyncActionsModule,
ButtonModule,
FormFieldModule,
LinkModule,
ToastService,
TypographyModule,
} from "@bitwarden/components";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthDuoComponent as TwoFactorAuthDuoBaseComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component";
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({
standalone: true,
selector: "app-two-factor-auth-duo",
templateUrl:
"../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.html",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
FormsModule,
],
providers: [I18nPipe],
})
export class TwoFactorAuthDuoComponent
extends TwoFactorAuthDuoBaseComponent
implements OnInit, OnDestroy
{
constructor(
protected i18nService: I18nService,
protected platformUtilsService: PlatformUtilsService,
private broadcasterService: BroadcasterService,
private ngZone: NgZone,
private environmentService: EnvironmentService,
toastService: ToastService,
) {
super(i18nService, platformUtilsService, toastService);
}
async ngOnInit(): Promise<void> {
await super.ngOnInit();
}
duoCallbackSubscriptionEnabled: boolean = false;
protected override setupDuoResultListener() {
if (!this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
await this.ngZone.run(async () => {
if (message.command === "duoCallback") {
this.token.emit(message.code + "|" + message.state);
}
});
});
this.duoCallbackSubscriptionEnabled = true;
}
}
override async launchDuoFrameless() {
if (this.duoFramelessUrl === null) {
this.toastService.showToast({
variant: "error",
title: null,
message: this.i18nService.t("duoHealthCheckResultsInNullAuthUrlError"),
});
return;
}
const duoHandOffMessage = {
title: this.i18nService.t("youSuccessfullyLoggedIn"),
message: this.i18nService.t("youMayCloseThisWindow"),
isCountdown: false,
};
// we're using the connector here as a way to set a cookie with translations
// before continuing to the duo frameless url
const env = await firstValueFrom(this.environmentService.environment$);
const launchUrl =
env.getWebVaultUrl() +
"/duo-redirect-connector.html" +
"?duoFramelessUrl=" +
encodeURIComponent(this.duoFramelessUrl) +
"&handOffMessage=" +
encodeURIComponent(JSON.stringify(duoHandOffMessage));
this.platformUtilsService.launchUri(launchUrl);
}
async ngOnDestroy() {
if (this.duoCallbackSubscriptionEnabled) {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
this.duoCallbackSubscriptionEnabled = false;
}
}
}

View File

@@ -1,74 +0,0 @@
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { RouterLink } from "@angular/router";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthAuthenticatorComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthEmailComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthWebAuthnComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthYubikeyComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorOptionsComponent } from "../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { JslibModule } from "../../../../libs/angular/src/jslib.module";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { CheckboxModule } from "../../../../libs/components/src/checkbox";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../libs/components/src/form-field";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { LinkModule } from "../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../libs/components/src/typography";
import { TwoFactorAuthDuoComponent } from "./two-factor-auth-duo.component";
@Component({
standalone: true,
templateUrl:
"../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
selector: "app-two-factor-auth",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
RouterLink,
CheckboxModule,
TwoFactorOptionsComponent,
TwoFactorAuthEmailComponent,
TwoFactorAuthAuthenticatorComponent,
TwoFactorAuthYubikeyComponent,
TwoFactorAuthDuoComponent,
TwoFactorAuthWebAuthnComponent,
],
})
export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {}

View File

@@ -1,7 +1,7 @@
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options.component";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponentV1 } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -9,9 +9,9 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options.component.html",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
constructor(
twoFactorService: TwoFactorService,
router: Router,

View File

@@ -4,7 +4,7 @@ import { Component, Inject, NgZone, OnDestroy, ViewChild, ViewContainerRef } fro
import { ActivatedRoute, Router } from "@angular/router";
import { firstValueFrom } from "rxjs";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import {
@@ -29,16 +29,16 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
import { ToastService } from "@bitwarden/components";
import { TwoFactorOptionsComponent } from "./two-factor-options.component";
import { TwoFactorOptionsComponentV1 } from "./two-factor-options-v1.component";
const BroadcasterSubscriptionId = "TwoFactorComponent";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
templateUrl: "two-factor-v1.component.html",
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDestroy {
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnDestroy {
@ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
twoFactorOptionsModal: ViewContainerRef;
@@ -106,7 +106,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
async anotherMethod() {
const [modal, childComponent] = await this.modalService.openViewRef(
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
this.twoFactorOptionsModal,
);

View File

@@ -652,6 +652,15 @@
"logInToBitwarden": {
"message": "Log in to Bitwarden"
},
"enterTheCodeSentToYourEmail": {
"message": "Enter the code sent to your email"
},
"enterTheCodeFromYourAuthenticatorApp": {
"message": "Enter the code from your authenticator app"
},
"pressYourYubiKeyToAuthenticate": {
"message": "Press your YubiKey to authenticate"
},
"logInWithPasskey": {
"message": "Log in with passkey"
},
@@ -825,6 +834,9 @@
"webauthnCancelOrTimeout": {
"message": "The authentication was cancelled or took too long. Please try again."
},
"openInNewTab": {
"message": "Open in new tab"
},
"invalidVerificationCode": {
"message": "Invalid verification code"
},
@@ -855,12 +867,22 @@
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
},
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
@@ -927,6 +949,9 @@
"twoStepOptions": {
"message": "Two-step login options"
},
"selectTwoStepLoginMethod": {
"message": "Select two-step login method"
},
"selfHostedEnvironment": {
"message": "Self-hosted environment"
},
@@ -2256,6 +2281,12 @@
"webAuthnAuthenticate": {
"message": "Authenticate WebAuthn"
},
"readSecurityKey": {
"message": "Read security key"
},
"awaitingSecurityKeyInteraction": {
"message": "Awaiting security key interaction..."
},
"hideEmail": {
"message": "Hide my email address from recipients."
},
@@ -3215,6 +3246,12 @@
"duoRequiredByOrgForAccount": {
"message": "Duo two-step login is required for your account."
},
"duoTwoFactorRequiredPageSubtitle": {
"message": "Duo two-step login is required for your account. Follow the steps below to finish logging in."
},
"followTheStepsBelowToFinishLoggingIn": {
"message": "Follow the steps below to finish logging in."
},
"launchDuo": {
"message": "Launch Duo in Browser"
},

View File

@@ -243,14 +243,12 @@ p.lead {
}
#web-authn-frame {
background: url("../images/loading.svg") 0 0 no-repeat;
height: 250px;
margin: 0 0 15px 0;
height: 40px;
iframe {
width: 100%;
height: 100%;
border: none;
height: 100%;
width: 100%;
}
}

View File

@@ -3,3 +3,4 @@ export * from "./login-decryption-options";
export * from "./webauthn-login";
export * from "./set-password-jit";
export * from "./registration";
export * from "./two-factor-auth";

View File

@@ -0,0 +1,2 @@
export * from "./web-two-factor-auth-component.service";
export * from "./web-two-factor-auth-duo-component.service";

View File

@@ -0,0 +1,14 @@
import {
DefaultTwoFactorAuthComponentService,
TwoFactorAuthComponentService,
LegacyKeyMigrationAction,
} from "@bitwarden/auth/angular";
export class WebTwoFactorAuthComponentService
extends DefaultTwoFactorAuthComponentService
implements TwoFactorAuthComponentService
{
override determineLegacyKeyMigrationAction(): LegacyKeyMigrationAction {
return LegacyKeyMigrationAction.NAVIGATE_TO_MIGRATION_COMPONENT;
}
}

View File

@@ -0,0 +1,83 @@
import { MockProxy, mock } from "jest-mock-extended";
import { Duo2faResult } from "@bitwarden/auth/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { WebTwoFactorAuthDuoComponentService } from "./web-two-factor-auth-duo-component.service";
describe("WebTwoFactorAuthDuoComponentService", () => {
let webTwoFactorAuthDuoComponentService: WebTwoFactorAuthDuoComponentService;
let platformUtilsService: MockProxy<PlatformUtilsService>;
let mockBroadcastChannel: jest.Mocked<BroadcastChannel>;
let eventTarget: EventTarget;
beforeEach(() => {
jest.clearAllMocks();
platformUtilsService = mock<PlatformUtilsService>();
eventTarget = new EventTarget();
mockBroadcastChannel = {
name: "duoResult",
postMessage: jest.fn(),
close: jest.fn(),
onmessage: jest.fn(),
onmessageerror: jest.fn(),
addEventListener: jest.fn().mockImplementation((type, listener) => {
eventTarget.addEventListener(type, listener);
}),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
};
global.BroadcastChannel = jest.fn(() => mockBroadcastChannel);
webTwoFactorAuthDuoComponentService = new WebTwoFactorAuthDuoComponentService(
platformUtilsService,
);
});
afterEach(() => {
// reset global object
jest.restoreAllMocks();
});
describe("listenForDuo2faResult$", () => {
it("should return an observable that emits a duo 2FA result when a duo result message is received", (done) => {
const expectedResult: Duo2faResult = {
code: "123456",
state: "verified",
token: "123456|verified",
};
const mockMessageEvent = new MessageEvent("message", {
data: {
code: "123456",
state: "verified",
},
lastEventId: "",
origin: "",
ports: [],
source: null,
});
webTwoFactorAuthDuoComponentService.listenForDuo2faResult$().subscribe((result) => {
expect(result).toEqual(expectedResult);
done();
});
// Trigger the message event
eventTarget.dispatchEvent(mockMessageEvent);
});
});
describe("launchDuoFrameless", () => {
it("should launch the duo frameless URL", async () => {
const duoFramelessUrl = "https://duo.com/frameless";
await webTwoFactorAuthDuoComponentService.launchDuoFrameless(duoFramelessUrl);
expect(platformUtilsService.launchUri).toHaveBeenCalledWith(duoFramelessUrl);
});
});
});

View File

@@ -0,0 +1,31 @@
import { fromEvent, map, Observable, share } from "rxjs";
import { TwoFactorAuthDuoComponentService, Duo2faResult } from "@bitwarden/auth/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
export class WebTwoFactorAuthDuoComponentService implements TwoFactorAuthDuoComponentService {
private duo2faResult$: Observable<Duo2faResult>;
constructor(private platformUtilsService: PlatformUtilsService) {
const duoResultChannel: BroadcastChannel = new BroadcastChannel("duoResult");
this.duo2faResult$ = fromEvent<MessageEvent>(duoResultChannel, "message").pipe(
map((msg: MessageEvent) => {
return {
code: msg.data.code,
state: msg.data.state,
token: `${msg.data.code}|${msg.data.state}`,
} as Duo2faResult;
}),
// share the observable so that multiple subscribers can listen to the same event
share(),
);
}
listenForDuo2faResult$(): Observable<Duo2faResult> {
return this.duo2faResult$;
}
async launchDuoFrameless(duoFramelessUrl: string): Promise<void> {
this.platformUtilsService.launchUri(duoFramelessUrl);
}
}

View File

@@ -1,77 +0,0 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthDuoComponent as TwoFactorAuthDuoBaseComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
@Component({
standalone: true,
selector: "app-two-factor-auth-duo",
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-duo.component.html",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
FormsModule,
],
providers: [I18nPipe],
})
export class TwoFactorAuthDuoComponent
extends TwoFactorAuthDuoBaseComponent
implements OnInit, OnDestroy
{
async ngOnInit(): Promise<void> {
await super.ngOnInit();
}
private duoResultChannel: BroadcastChannel;
protected override setupDuoResultListener() {
if (!this.duoResultChannel) {
this.duoResultChannel = new BroadcastChannel("duoResult");
this.duoResultChannel.addEventListener("message", this.handleDuoResultMessage);
}
}
private handleDuoResultMessage = async (msg: { data: { code: string; state: string } }) => {
this.token.emit(msg.data.code + "|" + msg.data.state);
};
async ngOnDestroy() {
if (this.duoResultChannel) {
// clean up duo listener if it was initialized.
this.duoResultChannel.removeEventListener("message", this.handleDuoResultMessage);
this.duoResultChannel.close();
}
}
}

View File

@@ -1,144 +0,0 @@
import { DialogModule } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, Inject } from "@angular/core";
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import {
LinkModule,
TypographyModule,
CheckboxModule,
DialogService,
ToastService,
} from "@bitwarden/components";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthEmailComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthWebAuthnComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthYubikeyComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorAuthComponent as BaseTwoFactorAuthComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { TwoFactorOptionsComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-options.component";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import {
LoginStrategyServiceAbstraction,
LoginEmailServiceAbstraction,
UserDecryptionOptionsServiceAbstraction,
} from "../../../../../libs/auth/src/common/abstractions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { AsyncActionsModule } from "../../../../../libs/components/src/async-actions";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { ButtonModule } from "../../../../../libs/components/src/button";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
import { FormFieldModule } from "../../../../../libs/components/src/form-field";
import { TwoFactorAuthDuoComponent } from "./two-factor-auth-duo.component";
@Component({
standalone: true,
templateUrl:
"../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html",
selector: "app-two-factor-auth",
imports: [
CommonModule,
JslibModule,
DialogModule,
ButtonModule,
LinkModule,
TypographyModule,
ReactiveFormsModule,
FormFieldModule,
AsyncActionsModule,
RouterLink,
CheckboxModule,
TwoFactorOptionsComponent,
TwoFactorAuthEmailComponent,
TwoFactorAuthAuthenticatorComponent,
TwoFactorAuthYubikeyComponent,
TwoFactorAuthDuoComponent,
TwoFactorAuthWebAuthnComponent,
],
providers: [I18nPipe],
})
export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
constructor(
protected loginStrategyService: LoginStrategyServiceAbstraction,
protected router: Router,
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService,
dialogService: DialogService,
protected route: ActivatedRoute,
logService: LogService,
protected twoFactorService: TwoFactorService,
loginEmailService: LoginEmailServiceAbstraction,
userDecryptionOptionsService: UserDecryptionOptionsServiceAbstraction,
protected ssoLoginService: SsoLoginServiceAbstraction,
protected configService: ConfigService,
masterPasswordService: InternalMasterPasswordServiceAbstraction,
accountService: AccountService,
formBuilder: FormBuilder,
@Inject(WINDOW) protected win: Window,
toastService: ToastService,
) {
super(
loginStrategyService,
router,
i18nService,
platformUtilsService,
environmentService,
dialogService,
route,
logService,
twoFactorService,
loginEmailService,
userDecryptionOptionsService,
ssoLoginService,
configService,
masterPasswordService,
accountService,
formBuilder,
win,
toastService,
);
this.onSuccessfulLoginNavigate = this.goAfterLogIn;
}
protected override handleMigrateEncryptionKey(result: AuthResult): boolean {
if (!result.requiresEncryptionKeyMigration) {
return false;
}
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["migrate-legacy-encryption"]);
return true;
}
}

View File

@@ -2,7 +2,7 @@ import { DialogRef } from "@angular/cdk/dialog";
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options.component";
import { TwoFactorOptionsComponentV1 as BaseTwoFactorOptionsComponentV1 } from "@bitwarden/angular/auth/components/two-factor-options-v1.component";
import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
@@ -22,9 +22,9 @@ export type TwoFactorOptionsDialogResultType = {
@Component({
selector: "app-two-factor-options",
templateUrl: "two-factor-options.component.html",
templateUrl: "two-factor-options-v1.component.html",
})
export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
export class TwoFactorOptionsComponentV1 extends BaseTwoFactorOptionsComponentV1 {
constructor(
twoFactorService: TwoFactorService,
router: Router,
@@ -47,6 +47,6 @@ export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
}
static open(dialogService: DialogService) {
return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponent);
return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponentV1);
}
}

View File

@@ -5,7 +5,7 @@ import { FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { Subject, takeUntil, lastValueFrom } from "rxjs";
import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
import { TwoFactorComponentV1 as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor-v1.component";
import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
import {
LoginStrategyServiceAbstraction,
@@ -29,16 +29,16 @@ import { DialogService, ToastService } from "@bitwarden/components";
import {
TwoFactorOptionsDialogResult,
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
TwoFactorOptionsDialogResultType,
} from "./two-factor-options.component";
} from "./two-factor-options-v1.component";
@Component({
selector: "app-two-factor",
templateUrl: "two-factor.component.html",
templateUrl: "two-factor-v1.component.html",
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit, OnDestroy {
export class TwoFactorComponentV1 extends BaseTwoFactorComponent implements OnInit, OnDestroy {
@ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
twoFactorOptionsModal: ViewContainerRef;
formGroup = this.formBuilder.group({
@@ -110,7 +110,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit
};
async anotherMethod() {
const dialogRef = TwoFactorOptionsComponent.open(this.dialogService);
const dialogRef = TwoFactorOptionsComponentV1.open(this.dialogService);
const response: TwoFactorOptionsDialogResultType = await lastValueFrom(dialogRef.closed);
if (response.result === TwoFactorOptionsDialogResult.Provider) {
this.selectedProviderType = response.type;

View File

@@ -33,6 +33,8 @@ import {
SetPasswordJitService,
SsoComponentService,
LoginDecryptionOptionsService,
TwoFactorAuthComponentService,
TwoFactorAuthDuoComponentService,
} from "@bitwarden/auth/angular";
import {
InternalUserDecryptionOptionsServiceAbstraction,
@@ -108,6 +110,8 @@ import {
WebRegistrationFinishService,
WebLoginComponentService,
WebLoginDecryptionOptionsService,
WebTwoFactorAuthComponentService,
WebTwoFactorAuthDuoComponentService,
} from "../auth";
import { WebSsoComponentService } from "../auth/core/services/login/web-sso-component.service";
import { AcceptOrganizationInviteService } from "../auth/organization-invite/accept-organization.service";
@@ -261,6 +265,12 @@ const safeProviders: SafeProvider[] = [
useClass: WebLockComponentService,
deps: [],
}),
// TODO: PM-18182 - Refactor component services into lazy loaded modules
safeProvider({
provide: TwoFactorAuthComponentService,
useClass: WebTwoFactorAuthComponentService,
deps: [],
}),
safeProvider({
provide: SetPasswordJitService,
useClass: WebSetPasswordJitService,
@@ -328,6 +338,11 @@ const safeProviders: SafeProvider[] = [
useClass: WebSsoComponentService,
deps: [I18nServiceAbstraction],
}),
safeProvider({
provide: TwoFactorAuthDuoComponentService,
useClass: WebTwoFactorAuthDuoComponentService,
deps: [PlatformUtilsService],
}),
safeProvider({
provide: LoginDecryptionOptionsService,
useClass: WebLoginDecryptionOptionsService,

View File

@@ -12,7 +12,6 @@ import {
activeAuthGuard,
} from "@bitwarden/angular/auth/guards";
import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
import { twofactorRefactorSwap } from "@bitwarden/angular/utils/two-factor-component-refactor-route-swap";
import { NewDeviceVerificationNoticeGuard } from "@bitwarden/angular/vault/guards";
import {
AnonLayoutWrapperComponent,
@@ -38,6 +37,8 @@ import {
SsoComponent,
VaultIcon,
LoginDecryptionOptionsComponent,
TwoFactorAuthComponent,
TwoFactorAuthGuard,
NewDeviceVerificationComponent,
DeviceVerificationIcon,
} from "@bitwarden/auth/angular";
@@ -71,8 +72,7 @@ import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emerg
import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/view/emergency-access-view.component";
import { SecurityRoutingModule } from "./auth/settings/security/security-routing.module";
import { SsoComponentV1 } from "./auth/sso-v1.component";
import { TwoFactorAuthComponent } from "./auth/two-factor-auth.component";
import { TwoFactorComponent } from "./auth/two-factor.component";
import { TwoFactorComponentV1 } from "./auth/two-factor-v1.component";
import { UpdatePasswordComponent } from "./auth/update-password.component";
import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
import { VerifyEmailTokenComponent } from "./auth/verify-email-token.component";
@@ -505,6 +505,50 @@ const routes: Routes = [
},
},
},
...unauthUiRefreshSwap(
TwoFactorComponentV1,
TwoFactorAuthComponent,
{
path: "2fa",
canActivate: [unauthGuardFn()],
children: [
{
path: "",
component: TwoFactorComponentV1,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
children: [
{
path: "",
component: TwoFactorAuthComponent,
},
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
),
{
path: "lock",
canActivate: [deepLinkGuard(), lockGuard()],
@@ -522,25 +566,6 @@ const routes: Routes = [
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
},
{
path: "2fa",
canActivate: [unauthGuardFn()],
children: [
...twofactorRefactorSwap(TwoFactorComponent, TwoFactorAuthComponent, {
path: "",
}),
{
path: "",
component: EnvironmentSelectorComponent,
outlet: "environment-selector",
},
],
data: {
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
path: "authentication-timeout",
canActivate: [unauthGuardFn()],

View File

@@ -44,8 +44,8 @@ import { TwoFactorSetupComponent } from "../auth/settings/two-factor/two-factor-
import { TwoFactorVerifyComponent } from "../auth/settings/two-factor/two-factor-verify.component";
import { UserVerificationModule } from "../auth/shared/components/user-verification";
import { SsoComponentV1 } from "../auth/sso-v1.component";
import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
import { TwoFactorComponent } from "../auth/two-factor.component";
import { TwoFactorOptionsComponentV1 } from "../auth/two-factor-options-v1.component";
import { TwoFactorComponentV1 } from "../auth/two-factor-v1.component";
import { UpdatePasswordComponent } from "../auth/update-password.component";
import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
@@ -152,12 +152,12 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponent,
TwoFactorOptionsComponentV1,
TwoFactorRecoveryComponent,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
@@ -216,19 +216,18 @@ import { SharedModule } from "./shared.module";
SetPasswordComponent,
SponsoredFamiliesComponent,
SponsoringOrgRowComponent,
TwoFactorComponentV1,
SsoComponentV1,
TwoFactorSetupAuthenticatorComponent,
TwoFactorComponent,
TwoFactorSetupDuoComponent,
TwoFactorSetupEmailComponent,
TwoFactorOptionsComponent,
TwoFactorRecoveryComponent,
TwoFactorOptionsComponentV1,
TwoFactorSetupComponent,
TwoFactorVerifyComponent,
TwoFactorSetupWebAuthnComponent,
TwoFactorSetupYubiKeyComponent,
UpdatePasswordComponent,
UpdateTempPasswordComponent,
UpdatePasswordComponent,
UserLayoutComponent,
VerifyEmailTokenComponent,
VerifyRecoverDeleteComponent,

View File

@@ -1,39 +1,132 @@
<!doctype html>
<html class="theme_light">
<html class="theme_light tw-h-full">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bitwarden WebAuthn Connector</title>
</head>
<body class="layout_frontend">
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-5">
<img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
<div id="spinner">
<p class="text-center">
<i
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
title="Loading"
aria-hidden="true"
></i>
</p>
</div>
<div id="content" class="card mt-4 d-none">
<div class="card-body ng-star-inserted">
<p id="msg" class="text-center"></p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember" name="remember" />
<label class="form-check-label" for="remember" id="remember-label"></label>
</div>
<hr />
<p class="text-center mb-0">
<button type="button" id="webauthn-button" class="btn btn-primary btn-lg"></button>
</p>
</div>
<body class="tw-min-h-full !tw-min-w-0 tw-text-center !tw-bg-background-alt">
<main class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-px-6 tw-pt-6 tw-pb-4 tw-text-main">
<a class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top">
<img class="new-logo-themed" alt="Bitwarden" />
</a>
<div class="tw-text-center tw-mb-6 tw-max-w-md tw-mx-auto">
<div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
<path
class="tw-fill-art-primary"
d="M19.258 16.434c0-3.635 2.966-6.58 6.626-6.58H56.88c3.659 0 6.625 2.946 6.625 6.58v27.788l-2.208 2.667V16.434c0-2.423-1.978-4.387-4.417-4.387H25.884c-2.44 0-4.418 1.964-4.418 4.387v67.09c0 2.422 1.978 4.386 4.418 4.386h16.389l-.814 2.194H25.884c-3.66 0-6.626-2.947-6.626-6.58v-67.09Z"
/>
<path
class="tw-fill-art-primary"
fill-rule="evenodd"
d="M40.119 19.287a.55.55 0 0 1 .552-.548h2.208a.55.55 0 0 1 .553.548.55.55 0 0 1-.553.549h-2.208a.55.55 0 0 1-.552-.549Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M31.994 38.828c2.103-3.001 5.541-4.957 9.425-4.957 5.66 0 10.376 4.155 11.392 9.653a.567.567 0 0 1-.439.664.553.553 0 0 1-.646-.451c-.918-4.969-5.183-8.73-10.307-8.73-3.515 0-6.625 1.769-8.53 4.485a.542.542 0 0 1-.77.129.579.579 0 0 1-.125-.793Zm-.623 2.186c.282.117.42.448.305.74a10.928 10.928 0 0 0-.748 3.992v3.46a.56.56 0 0 1-.553.569.56.56 0 0 1-.552-.568v-3.461c0-1.56.294-3.051.829-4.417a.547.547 0 0 1 .718-.315Zm21.09 4.164a.56.56 0 0 1 .553.568v3.23a.56.56 0 0 1-.552.568.56.56 0 0 1-.552-.568v-3.23a.56.56 0 0 1 .552-.568Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M32.823 41.892c1.451-3.427 4.75-5.827 8.596-5.827 1.98 0 3.819.638 5.333 1.725.25.18.31.532.135.788a.544.544 0 0 1-.769.138 8.02 8.02 0 0 0-4.7-1.52c-3.382 0-6.297 2.111-7.582 5.146a.547.547 0 0 1-.726.294.57.57 0 0 1-.287-.744Zm14.94-2.495a.543.543 0 0 1 .778.066 9.936 9.936 0 0 1 2.265 6.35v7.783a.559.559 0 0 1-.552.566.559.559 0 0 1-.553-.566v-7.782a8.788 8.788 0 0 0-2.002-5.62.575.575 0 0 1 .064-.797Zm-15.06 4.804a.562.562 0 0 1 .487.625 9.062 9.062 0 0 0-.053.988v7.782a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-7.782c0-.377.02-.748.06-1.114a.555.555 0 0 1 .611-.499Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M34.24 45.704c0-4.105 3.207-7.446 7.178-7.446 3.972 0 7.178 3.341 7.178 7.446V55.79a.559.559 0 0 1-.552.565.559.559 0 0 1-.552-.565V45.704c0-3.495-2.726-6.315-6.074-6.315-3.347 0-6.073 2.82-6.073 6.315v3.948a.559.559 0 0 1-.553.566.559.559 0 0 1-.552-.566v-3.948Zm.552 5.572c.305 0 .553.253.553.565v3.949a.559.559 0 0 1-.553.565.559.559 0 0 1-.552-.565V51.84c0-.312.247-.565.552-.565Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M38.89 41.142a4.955 4.955 0 0 1 2.529-.69 4.966 4.966 0 0 1 4.97 4.962v3.044a.55.55 0 0 1-.553.548.55.55 0 0 1-.552-.548v-3.044a3.865 3.865 0 0 0-5.83-3.33.554.554 0 0 1-.757-.19.546.546 0 0 1 .192-.752Zm-.911 1.45c.258.16.335.5.173.756a3.844 3.844 0 0 0-.599 2.066v11.49a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-11.49c0-.974.282-1.884.768-2.651a.554.554 0 0 1 .762-.172Zm7.857 7.904a.55.55 0 0 1 .552.549v5.859a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-5.86a.55.55 0 0 1 .552-.547Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M38.658 45.306c0-1.488 1.256-2.66 2.76-2.66 1.505 0 2.761 1.172 2.761 2.66v4.829a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.548v-4.828c0-.845-.722-1.564-1.657-1.564-.934 0-1.656.72-1.656 1.563v12.146a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549V45.307Zm4.97 6.317a.55.55 0 0 1 .551.549v5.28a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-5.28a.55.55 0 0 1 .552-.549Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-accent"
fill-rule="evenodd"
d="M41.419 44.84a.55.55 0 0 1 .552.548v1.9a.55.55 0 0 1-.552.548.55.55 0 0 1-.552-.549v-1.9a.55.55 0 0 1 .552-.548Zm0 4a.55.55 0 0 1 .552.548V58a.55.55 0 0 1-.552.549.55.55 0 0 1-.552-.549v-8.612a.55.55 0 0 1 .552-.549Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-primary"
fill-rule="evenodd"
d="M48.904 87.97c2.492 0 4.542-2.042 4.542-4.616 0-2.51-1.986-4.616-4.542-4.616-2.55 0-4.543 2.049-4.543 4.616 0 2.574 2.05 4.616 4.543 4.616Zm3.016-4.616c0 1.739-1.376 3.086-3.016 3.086-1.64 0-3.017-1.347-3.017-3.086 0-1.745 1.333-3.086 3.017-3.086 1.677 0 3.016 1.385 3.016 3.086Z"
clip-rule="evenodd"
/>
<path
class="tw-fill-art-primary"
fill-rule="evenodd"
d="M108.913 84.456a.767.767 0 0 0 0-1.074l-6.098-6.213a.76.76 0 0 0-.544-.228H70.225c-2.438-5.616-7.969-9.602-14.417-9.602-8.75 0-15.73 7.185-15.73 16.015 0 8.832 7.032 16.015 15.73 16.015 6.498 0 12.081-4.036 14.475-9.756h8.303c.204 0 .4-.082.544-.228l2.933-2.989 3.034 3.091a.762.762 0 0 0 1.088 0l.918-.934.766.78a.762.762 0 0 0 1.08.008l3.135-3.107 3.294 3.356c.143.146.339.229.543.229h7.408a.76.76 0 0 0 .544-.229l5.04-5.134Zm-5.903 3.832h-6.769l-3.606-3.674a.762.762 0 0 0-1.08-.007l-3.135 3.106-.774-.788a.762.762 0 0 0-1.087 0l-.918.935-3.034-3.091a.762.762 0 0 0-1.088 0l-3.253 3.314h-8.5c-.316 0-.6.196-.712.493-2.06 5.419-7.23 9.263-13.246 9.263-7.832 0-14.204-6.475-14.204-14.485 0-8.011 6.323-14.485 14.204-14.485 5.966 0 11.09 3.795 13.2 9.12a.763.763 0 0 0 .709.482h32.235l5.346 5.448-4.288 4.37Z"
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 tw-stroke-art-primary"
fill-rule="evenodd"
stroke-width=".355"
d="M75.94 32.403c8.007 0 14.498 6.51 14.498 14.538a14.542 14.542 0 0 1-9.26 13.56c8.849 1.9 15.896 8.519 18.221 17.036l-1.472.404C95.343 68.475 86.492 61.48 75.95 61.48c-6.743 0-12.796 2.861-16.96 7.404l-1.123-1.036a24.374 24.374 0 0 1 12.842-7.344 14.542 14.542 0 0 1-9.265-13.563c0-8.029 6.49-14.538 14.497-14.538Zm12.972 14.538c0-7.184-5.808-13.007-12.972-13.007S62.97 39.757 62.97 46.94c0 7.184 5.807 13.008 12.971 13.008s12.972-5.823 12.972-13.008Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div>
<!-- Small screens -->
<h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden" id="title-smaller-screens"></h1>
<!-- Medium to Larger screens -->
<h1
bitTypography="h2"
class="tw-mt-2 tw-hidden sm:tw-block"
id="title-larger-screens"
></h1>
</div>
<div class="tw-text-sm sm:tw-text-base" id="subtitle"></div>
</div>
<div
class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
>
<div
class="tw-rounded-2xl tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
>
<p id="msg" class="tw-hidden"></p>
<div class="tw-block tw-mb-4">
<input type="checkbox" class="" id="remember" name="remember" />
<label
class="tw-inline-flex tw-gap-1 tw-items-baseline tw-flex-row tw-min-w-0 !tw-font-normal"
for="remember"
id="remember-label"
></label>
</div>
<button
type="button"
id="webauthn-button"
class="!tw-text-contrast disabled:!tw-text-muted disabled:hover:!tw-text-muted disabled:hover:tw-bg-secondary-300 disabled:hover:tw-border-secondary-300 disabled:hover:tw-no-underline disabled:tw-bg-secondary-300 disabled:tw-border-secondary-300 disabled:tw-cursor-not-allowed focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-block tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
></button>
</div>
</div>
</div>
</main>
</body>
</html>

View File

@@ -4,10 +4,6 @@ import { b64Decode, getQsParam } from "./common";
import { buildDataString, parseWebauthnJson } from "./common-webauthn";
import { TranslationService } from "./translation.service";
// FIXME: Remove when updating file. Eslint update
// eslint-disable-next-line @typescript-eslint/no-require-imports
require("./webauthn.scss");
let parsed = false;
let webauthnJson: any;
let parentUrl: string = null;
@@ -75,17 +71,22 @@ document.addEventListener("DOMContentLoaded", async () => {
await localeService.init();
document.getElementById("msg").innerText = localeService.t("webAuthnFallbackMsg");
document.getElementById("remember-label").innerText = localeService.t("rememberMe");
document.getElementById("remember-label").innerText = localeService.t(
"dontAskAgainOnThisDeviceFor30Days",
);
const button = document.getElementById("webauthn-button");
button.innerText = localeService.t("webAuthnAuthenticate");
button.innerText = localeService.t("readSecurityKey");
button.onclick = start;
document.getElementById("spinner").classList.add("d-none");
const content = document.getElementById("content");
content.classList.add("d-block");
content.classList.remove("d-none");
const titleForSmallerScreens = document.getElementById("title-smaller-screens");
const titleForLargerScreens = document.getElementById("title-larger-screens");
titleForSmallerScreens.innerText = localeService.t("verifyIdentity");
titleForLargerScreens.innerText = localeService.t("verifyIdentity");
const subtitle = document.getElementById("subtitle");
subtitle.innerText = localeService.t("followTheStepsBelowToFinishLoggingIn");
});
function start() {
@@ -146,20 +147,24 @@ function error(message: string) {
el.textContent = message;
el.classList.add("alert");
el.classList.add("alert-danger");
el.classList.remove("tw-hidden");
}
function success(message: string) {
(document.getElementById("webauthn-button") as HTMLButtonElement).disabled = true;
(document.getElementById("remember") as HTMLInputElement).disabled = true;
const el = document.getElementById("msg");
resetMsgBox(el);
el.textContent = message;
el.classList.add("alert");
el.classList.add("alert-success");
el.classList.remove("tw-hidden");
}
function resetMsgBox(el: HTMLElement) {
el.classList.remove("alert");
el.classList.remove("alert-danger");
el.classList.remove("alert-success");
el.classList.add("tw-hidden");
}

View File

@@ -5,14 +5,11 @@
<title>Bitwarden WebAuthn Connector</title>
</head>
<body style="background: transparent">
<picture>
<source srcset="../images/u2fkey.avif" type="image/avif" />
<source srcset="../images/u2fkey.webp" type="image/webp" />
<img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3" />
</picture>
<div class="text-center">
<button type="button" id="webauthn-button" class="btn btn-primary"></button>
</div>
<body class="tw-h-full tw-m-0 tw-flex tw-justify-center tw-items-center tw-bg-transparent">
<button
type="button"
id="webauthn-button"
class="tw-block !tw-text-contrast focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-border-2 tw-border-primary-600 tw-border-solid tw-font-semibold tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
></button>
</body>
</html>

View File

@@ -13,6 +13,7 @@ let parsed = false;
let webauthnJson: any;
let headerText: string = null;
let btnText: string = null;
let btnAwaitingInteractionText: string = null;
let btnReturnText: string = null;
let parentUrl: string = null;
let parentOrigin: string = null;
@@ -21,21 +22,60 @@ let stopWebAuthn = false;
let sentSuccess = false;
let obj: any = null;
// For accessibility, we do not actually disable the button as it would
// become unfocusable by a screenreader. We just make it look disabled.
const disabledBtnClasses = [
"tw-bg-secondary-300",
"tw-border-secondary-300",
"!tw-text-muted",
"!tw-cursor-not-allowed",
"hover:tw-bg-secondary-300",
"hover:tw-border-secondary-300",
"hover:!tw-text-muted",
"hover:tw-no-underline",
];
const enabledBtnClasses = [
"tw-bg-primary-600",
"tw-border-primary-600",
"!tw-text-contrast",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"hover:!tw-text-contrast",
"hover:tw-no-underline",
];
document.addEventListener("DOMContentLoaded", () => {
init();
parseParameters();
if (headerText) {
const header = document.getElementById("webauthn-header");
header.innerText = decodeURI(headerText);
}
if (btnText) {
const button = document.getElementById("webauthn-button");
button.innerText = decodeURI(btnText);
button.onclick = executeWebAuthn;
}
});
function setDefaultWebAuthnButtonState() {
if (!btnText) {
return;
}
const button = document.getElementById("webauthn-button");
button.onclick = executeWebAuthn;
button.innerText = decodeURI(btnText);
// reset back to default button state
button.classList.remove(...disabledBtnClasses);
button.classList.add(...enabledBtnClasses);
}
function setAwaitingInteractionWebAuthnButtonState() {
if (!btnAwaitingInteractionText) {
return;
}
const button = document.getElementById("webauthn-button");
button.innerText = decodeURI(btnAwaitingInteractionText);
button.onclick = null;
button.classList.remove(...enabledBtnClasses);
button.classList.add(...disabledBtnClasses);
}
function init() {
start();
onMessage();
@@ -76,6 +116,7 @@ function parseParametersV1() {
webauthnJson = b64Decode(data);
headerText = getQsParam("headerText");
btnText = getQsParam("btnText");
btnAwaitingInteractionText = getQsParam("btnAwaitingInteractionText");
btnReturnText = getQsParam("btnReturnText");
}
@@ -113,6 +154,14 @@ function start() {
}
parseParameters();
if (headerText) {
const header = document.getElementById("webauthn-header");
header.innerText = decodeURI(headerText);
}
setDefaultWebAuthnButtonState();
if (!webauthnJson) {
error("No data.");
return;
@@ -141,9 +190,12 @@ function start() {
function executeWebAuthn() {
if (stopWebAuthn) {
// reset back to default button state
setDefaultWebAuthnButtonState();
return;
}
setAwaitingInteractionWebAuthnButtonState();
navigator.credentials.get({ publicKey: obj }).then(success).catch(error);
}
@@ -156,6 +208,7 @@ function onMessage() {
}
if (event.data === "stop") {
setDefaultWebAuthnButtonState();
stopWebAuthn = true;
} else if (event.data === "start" && stopWebAuthn) {
start();
@@ -171,6 +224,7 @@ function error(message: string) {
returnButton(mobileCallbackUri + "?error=" + encodeURIComponent(message));
} else {
parent.postMessage("error|" + message, parentUrl);
setDefaultWebAuthnButtonState();
}
}

View File

@@ -1182,6 +1182,15 @@
"logInToBitwarden": {
"message": "Log in to Bitwarden"
},
"enterTheCodeSentToYourEmail": {
"message": "Enter the code sent to your email"
},
"enterTheCodeFromYourAuthenticatorApp": {
"message": "Enter the code from your authenticator app"
},
"pressYourYubiKeyToAuthenticate": {
"message": "Press your YubiKey to authenticate"
},
"authenticationTimeout": {
"message": "Authentication timeout"
},
@@ -1464,12 +1473,22 @@
"rememberMe": {
"message": "Remember me"
},
"dontAskAgainOnThisDeviceFor30Days": {
"message": "Don't ask again on this device for 30 days"
},
"sendVerificationCodeEmailAgain": {
"message": "Send verification code email again"
},
"useAnotherTwoStepMethod": {
"message": "Use another two-step login method"
},
"selectAnotherMethod": {
"message": "Select another method",
"description": "Select another two-step login method"
},
"useYourRecoveryCode": {
"message": "Use your recovery code"
},
"insertYubiKey": {
"message": "Insert your YubiKey into your computer's USB port, then touch its button."
},
@@ -1488,6 +1507,9 @@
"twoStepOptions": {
"message": "Two-step login options"
},
"selectTwoStepLoginMethod": {
"message": "Select two-step login method"
},
"recoveryCodeDesc": {
"message": "Lost access to all of your two-step login providers? Use your recovery code to turn off all two-step login providers from your account."
},
@@ -1530,6 +1552,9 @@
"webAuthnMigrated": {
"message": "(Migrated from FIDO)"
},
"openInNewTab": {
"message": "Open in new tab"
},
"emailTitle": {
"message": "Email"
},
@@ -5683,6 +5708,12 @@
"webAuthnAuthenticate": {
"message": "Authenticate WebAuthn"
},
"readSecurityKey": {
"message": "Read security key"
},
"awaitingSecurityKeyInteraction": {
"message": "Awaiting security key interaction..."
},
"webAuthnNotSupported": {
"message": "WebAuthn is not supported in this browser."
},
@@ -7229,6 +7260,12 @@
"duoRequiredByOrgForAccount": {
"message": "Duo two-step login is required for your account."
},
"duoTwoFactorRequiredPageSubtitle": {
"message": "Duo two-step login is required for your account. Follow the steps below to finish logging in."
},
"followTheStepsBelowToFinishLoggingIn": {
"message": "Follow the steps below to finish logging in."
},
"launchDuo": {
"message": "Launch Duo"
},

View File

@@ -12,7 +12,7 @@
}
#web-authn-frame {
height: 315px;
height: 40px;
@include themify($themes) {
background: themed("imgLoading") 0 0 no-repeat;
}

View File

@@ -106,7 +106,7 @@ const plugins = [
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn.html",
filename: "webauthn-connector.html",
chunks: ["connectors/webauthn"],
chunks: ["connectors/webauthn", "styles"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-mobile.html",
@@ -116,7 +116,7 @@ const plugins = [
new HtmlWebpackPlugin({
template: "./src/connectors/webauthn-fallback.html",
filename: "webauthn-fallback-connector.html",
chunks: ["connectors/webauthn-fallback"],
chunks: ["connectors/webauthn-fallback", "styles"],
}),
new HtmlWebpackPlugin({
template: "./src/connectors/sso.html",