[PM-8221] Route user to email OTP entry [clients]

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

@@ -647,6 +647,12 @@
   "verifyIdentity": {
     "message": "Verify identity"
   },
+  "weDontRecognizeThisDevice": {
+    "message": "We don't recognize this device. Enter the code sent to your email to verify your identity."
+  },
+  "continueLoggingIn": {
+    "message": "Continue logging in"
+  },
   "yourVaultIsLocked": {
     "message": "Your vault is locked. Verify your identity to continue."
   },

apps/browser/src/popup/app-routing.module.ts

@@ -12,6 +12,7 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui
 import {
   authGuard,
   lockGuard,
+  newDeviceVerificationGuard,
   redirectGuard,
   tdeDecryptionRequiredGuard,
   unauthGuardFn,
@@ -41,6 +42,8 @@ import {
   DevicesIcon,
   SsoComponent,
   TwoFactorTimeoutIcon,
+  NewDeviceVerificationComponent,
+  DeviceVerificationIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { LockComponent } from "@bitwarden/key-management/angular";
@@ -236,6 +239,22 @@ const routes: Routes = [
       ],
     },
   ),
+  {
+    path: "device-verification",
+    component: AnonLayoutWrapperComponent,
+    canActivate: [newDeviceVerificationGuard()],
+    children: [{ path: "", component: NewDeviceVerificationComponent }],
+    data: {
+      pageIcon: DeviceVerificationIcon,
+      pageTitle: {
+        key: "verifyIdentity",
+      },
+      pageSubtitle: {
+        key: "weDontRecognizeThisDevice",
+      },
+      elevation: 1,
+    } satisfies RouteDataProperties & AnonLayoutWrapperData,
+  },
   {
     path: "set-password",
     component: SetPasswordComponent,

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

@@ -10,6 +10,7 @@ import { unauthUiRefreshSwap } from "@bitwarden/angular/auth/functions/unauth-ui
 import {
   authGuard,
   lockGuard,
+  newDeviceVerificationGuard,
   redirectGuard,
   tdeDecryptionRequiredGuard,
   unauthGuardFn,
@@ -38,6 +39,8 @@ import {
   DevicesIcon,
   SsoComponent,
   TwoFactorTimeoutIcon,
+  NewDeviceVerificationComponent,
+  DeviceVerificationIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { LockComponent } from "@bitwarden/key-management/angular";
@@ -113,6 +116,21 @@ const routes: Routes = [
       },
     } satisfies RouteDataProperties & AnonLayoutWrapperData,
   },
+  {
+    path: "device-verification",
+    component: AnonLayoutWrapperComponent,
+    canActivate: [newDeviceVerificationGuard()],
+    children: [{ path: "", component: NewDeviceVerificationComponent }],
+    data: {
+      pageIcon: DeviceVerificationIcon,
+      pageTitle: {
+        key: "verifyIdentity",
+      },
+      pageSubtitle: {
+        key: "weDontRecognizeThisDevice",
+      },
+    } satisfies RouteDataProperties & AnonLayoutWrapperData,
+  },
   { path: "register", component: RegisterComponent },
   {
     path: "new-device-notice",

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

@@ -885,6 +885,15 @@
     "message": "Verify with Duo Security for your organization using the Duo Mobile app, SMS, phone call, or U2F security key.",
     "description": "'Duo Security' and 'Duo Mobile' are product names and should not be translated."
   },
+  "verifyIdentity": {
+    "message": "Verify your Identity"
+  },
+  "weDontRecognizeThisDevice": {
+    "message": "We don't recognize this device. Enter the code sent to your email to verify your identity."
+  },
+  "continueLoggingIn": {
+    "message": "Continue logging in"
+  },
   "webAuthnTitle": {
     "message": "FIDO2 WebAuthn"
   },

apps/web/src/app/oss-routing.module.ts

@@ -9,6 +9,7 @@ import {
   redirectGuard,
   tdeDecryptionRequiredGuard,
   unauthGuardFn,
+  newDeviceVerificationGuard,
 } from "@bitwarden/angular/auth/guards";
 import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
 import { generatorSwap } from "@bitwarden/angular/tools/generator/generator-swap";
@@ -37,6 +38,8 @@ import {
   SsoComponent,
   VaultIcon,
   LoginDecryptionOptionsComponent,
+  NewDeviceVerificationComponent,
+  DeviceVerificationIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { LockComponent } from "@bitwarden/key-management/angular";
@@ -586,6 +589,25 @@ const routes: Routes = [
           titleId: "recoverAccountTwoStep",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
+      {
+        path: "device-verification",
+        canActivate: [newDeviceVerificationGuard()],
+        children: [
+          {
+            path: "",
+            component: NewDeviceVerificationComponent,
+          },
+        ],
+        data: {
+          pageIcon: DeviceVerificationIcon,
+          pageTitle: {
+            key: "verifyIdentity",
+          },
+          pageSubtitle: {
+            key: "weDontRecognizeThisDevice",
+          },
+        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+      },
       {
         path: "accept-emergency",
         canActivate: [deepLinkGuard()],

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

@@ -1128,6 +1128,12 @@
   "verifyIdentity": {
     "message": "Verify your Identity"
   },
+  "weDontRecognizeThisDevice": {
+    "message": "We don't recognize this device. Enter the code sent to your email to verify your identity."
+  },
+  "continueLoggingIn": {
+    "message": "Continue logging in"
+  },
   "whatIsADevice": {
     "message": "What is a device?"
   },

libs/angular/src/auth/guards/index.ts

@@ -3,3 +3,4 @@
 export * from "./redirect.guard";
 export * from "./tde-decryption-required.guard";
 export * from "./unauth.guard";
+export * from "./new-device-verification.guard";

libs/angular/src/auth/guards/new-device-verification.guard.spec.ts

@@ -0,0 +1,66 @@
+import { TestBed } from "@angular/core/testing";
+import { Router } from "@angular/router";
+import { RouterTestingModule } from "@angular/router/testing";
+import { MockProxy, mock } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";
+
+import { EmptyComponent } from "@bitwarden/angular/platform/guard/feature-flag.guard.spec";
+import { LoginStrategyServiceAbstraction } from "@bitwarden/auth/common";
+import { AuthenticationType } from "@bitwarden/common/auth/enums/authentication-type";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+
+import { newDeviceVerificationGuard } from "./new-device-verification.guard";
+
+describe("NewDeviceVerificationGuard", () => {
+  const setup = (authType: AuthenticationType | null) => {
+    const loginStrategyService: MockProxy<LoginStrategyServiceAbstraction> =
+      mock<LoginStrategyServiceAbstraction>();
+    const currentAuthTypeSubject = new BehaviorSubject<AuthenticationType | null>(authType);
+    loginStrategyService.currentAuthType$ = currentAuthTypeSubject;
+
+    const logService: MockProxy<LogService> = mock<LogService>();
+
+    const testBed = TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule.withRoutes([
+          { path: "", component: EmptyComponent },
+          {
+            path: "device-verification",
+            component: EmptyComponent,
+            canActivate: [newDeviceVerificationGuard()],
+          },
+          { path: "login", component: EmptyComponent },
+        ]),
+      ],
+      providers: [
+        { provide: LoginStrategyServiceAbstraction, useValue: loginStrategyService },
+        { provide: LogService, useValue: logService },
+      ],
+    });
+
+    return {
+      router: testBed.inject(Router),
+      logService,
+    };
+  };
+
+  it("creates the guard", () => {
+    const { router } = setup(AuthenticationType.Password);
+    expect(router).toBeTruthy();
+  });
+
+  it("allows access with an active login session", async () => {
+    const { router } = setup(AuthenticationType.Password);
+
+    await router.navigate(["device-verification"]);
+    expect(router.url).toBe("/device-verification");
+  });
+
+  it("redirects to login with no active session", async () => {
+    const { router, logService } = setup(null);
+
+    await router.navigate(["device-verification"]);
+    expect(router.url).toBe("/login");
+    expect(logService.error).toHaveBeenCalledWith("No active login session found.");
+  });
+});

libs/angular/src/auth/guards/new-device-verification.guard.ts

@@ -0,0 +1,28 @@
+import { inject } from "@angular/core";
+import { CanActivateFn, Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { LoginStrategyServiceAbstraction } from "@bitwarden/auth/common";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+
+/**
+ * Guard that ensures there is an active login session before allowing access
+ * to the new device verification route.
+ * If not, redirects to login.
+ */
+export function newDeviceVerificationGuard(): CanActivateFn {
+  return async () => {
+    const loginStrategyService = inject(LoginStrategyServiceAbstraction);
+    const logService = inject(LogService);
+    const router = inject(Router);
+
+    // Check if we have a valid login session
+    const authType = await firstValueFrom(loginStrategyService.currentAuthType$);
+    if (authType === null) {
+      logService.error("No active login session found.");
+      return router.createUrlTree(["/login"]);
+    }
+
+    return true;
+  };
+}

libs/angular/src/services/jslib-services.module.ts

@@ -39,6 +39,8 @@ import {
   DefaultAuthRequestApiService,
   DefaultLoginSuccessHandlerService,
   LoginSuccessHandlerService,
+  PasswordLoginStrategy,
+  PasswordLoginStrategyData,
 } from "@bitwarden/auth/common";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -1434,6 +1436,37 @@ const safeProviders: SafeProvider[] = [
     useClass: DefaultLoginSuccessHandlerService,
     deps: [SyncService, UserAsymmetricKeysRegenerationService],
   }),
+  safeProvider({
+    provide: PasswordLoginStrategy,
+    useClass: PasswordLoginStrategy,
+    deps: [
+      PasswordLoginStrategyData,
+      PasswordStrengthServiceAbstraction,
+      PolicyServiceAbstraction,
+      LoginStrategyServiceAbstraction,
+      AccountServiceAbstraction,
+      InternalMasterPasswordServiceAbstraction,
+      KeyService,
+      EncryptService,
+      ApiServiceAbstraction,
+      TokenServiceAbstraction,
+      AppIdServiceAbstraction,
+      PlatformUtilsServiceAbstraction,
+      MessagingServiceAbstraction,
+      LogService,
+      StateServiceAbstraction,
+      TwoFactorServiceAbstraction,
+      InternalUserDecryptionOptionsServiceAbstraction,
+      BillingAccountProfileStateService,
+      VaultTimeoutSettingsServiceAbstraction,
+      KdfConfigService,
+    ],
+  }),
+  safeProvider({
+    provide: PasswordLoginStrategyData,
+    useClass: PasswordLoginStrategyData,
+    deps: [],
+  }),
 ];
 
 @NgModule({

libs/auth/src/angular/icons/device-verification.icon.ts

@@ -0,0 +1,18 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const DeviceVerificationIcon = svgIcon`
+<svg viewBox="0 0 98 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="tw-stroke-art-primary" d="M12.1759 27.7453L2.54349 34.9329C1.57215 35.6577 1 36.7986 1 38.0105V89.6281C1 91.7489 2.71922 93.4681 4.84 93.4681H93.16C95.2808 93.4681 97 91.7489 97 89.6281V38.0276C97 36.806 96.4188 35.6574 95.4347 34.9338L85.6576 27.7453M61.8791 10.2622L50.9367 2.2168C49.5753 1.21588 47.7197 1.22245 46.3655 2.23297L35.6054 10.2622" stroke-width="1.92"/>
+  <path class="tw-stroke-art-primary" d="M85.7661 45.4682V12.1542C85.7661 11.0938 84.9064 10.2342 83.8461 10.2342H14.1541C13.0937 10.2342 12.2341 11.0938 12.2341 12.1542V45.4682" stroke-width="1.92" stroke-linecap="round"/>
+  <path class="tw-stroke-art-primary" d="M95.7335 92.1003L62.3151 61.2912C61.2514 60.3106 59.8576 59.7661 58.4109 59.7661H38.043C36.5571 59.7661 35.1286 60.3404 34.0562 61.3689L2.01148 92.1003" stroke-width="1.92"/>
+  <line class="tw-stroke-art-primary" x1="96.157" y1="39.125" x2="61.0395" y2="60.0979" stroke-width="1.92" stroke-linecap="round"/>
+  <path class="tw-stroke-art-primary" d="M1.84229 39.1248L36.673 59.7488"  stroke-width="1.92" stroke-linecap="round"/>
+  <rect class="tw-stroke-art-accent" x="23.0046" y="25.5344" width="51.925" height="17.4487" rx="8.72434" stroke-width="0.96"/>
+  <circle class="tw-fill-art-accent" cx="30.2299" cy="34.2588" r="2.24846"/>
+  <circle class="tw-fill-art-accent" cx="45.2196" cy="34.2587" r="2.24846"/>
+  <circle class="tw-fill-art-accent" cx="60.2094" cy="34.2587" r="2.24846"/>
+  <circle class="tw-fill-art-accent" cx="37.7248" cy="34.2587" r="2.24846"/>
+  <circle class="tw-fill-art-accent" cx="52.7145" cy="34.2587" r="2.24846"/>
+  <circle class="tw-fill-art-accent" cx="67.704" cy="34.2587" r="2.24846"/>
+</svg>
+`;

libs/auth/src/angular/icons/index.ts

@@ -12,3 +12,4 @@
 export * from "./registration-expired-link.icon";
 export * from "./sso-key.icon";
 export * from "./two-factor-timeout.icon";
+export * from "./device-verification.icon";

libs/auth/src/angular/index.ts

@@ -71,3 +71,6 @@
 // login approval
 export * from "./login-approval/login-approval.component";
 export * from "./login-approval/default-login-approval-component.service";
+
+// device verification
+export * from "./new-device-verification/new-device-verification.component";

libs/auth/src/angular/login/login.component.ts

@@ -283,6 +283,12 @@
       return;
     }
 
+    // Redirect to device verification if this is an unknown device
+    if (authResult.requiresDeviceVerification) {
+      await this.router.navigate(["device-verification"]);
+      return;
+    }
+
     // If none of the above cases are true, proceed with login...
     await this.evaluatePassword();
 

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

@@ -0,0 +1,35 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-form-field>
+    <bit-label>{{ "verificationCode" | i18n }}</bit-label>
+    <input
+      bitInput
+      type="text"
+      id="verificationCode"
+      name="verificationCode"
+      formControlName="code"
+      appInputVerbatim
+    />
+  </bit-form-field>
+
+  <button
+    bitLink
+    type="button"
+    linkType="primary"
+    (click)="resendOTP()"
+    [disabled]="disableRequestOTP"
+  >
+    {{ "resendCode" | i18n }}
+  </button>
+
+  <div class="tw-flex tw-mt-4">
+    <button
+      bitButton
+      buttonType="primary"
+      type="submit"
+      [block]="true"
+      [disabled]="formGroup.invalid"
+    >
+      {{ "continueLoggingIn" | i18n }}
+    </button>
+  </div>
+</form>