[PM-3659] - Disable Passkey registration if Require SSO Policy Enabled (#6729)

* PM-3659 - Passkey registration - if the require SSO policy applies to the user, disable user's ability to enable passkey registration and the ability to create new credentials if they already have some + display message indicating why the feature is off.  We still must allow users to remove existing credentials.

* PM-3659 - Replace policyService.get$ with policyService.policyAppliesToActiveUser$

* PM-3659 - CreateCredentialDialogComp - remove error handling as async actions has better handling built in already.

apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts

@@ -151,21 +151,12 @@ export class CreateCredentialDialogComponent implements OnInit {
     }
 
     const name = this.formGroup.value.credentialNaming.name;
-    try {
-      await this.webauthnService.saveCredential(
-        this.formGroup.value.credentialNaming.name,
-        this.pendingCredential,
-        keySet
-      );
-    } catch (error) {
-      this.logService?.error(error);
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("unexpectedError"),
-        error.message
-      );
-      return;
-    }
+
+    await this.webauthnService.saveCredential(
+      this.formGroup.value.credentialNaming.name,
+      this.pendingCredential,
+      keySet
+    );
 
     if (await firstValueFrom(this.hasPasskeys$)) {
       this.platformUtilsService.showToast(

apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html

@@ -1,12 +1,22 @@
 <h2 bitTypography="h2">
   {{ "loginWithPasskey" | i18n }}
   <ng-container *ngIf="hasData">
-    <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
-      "on" | i18n
-    }}</span>
-    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
-      "off" | i18n
-    }}</span>
+    <span
+      *ngIf="requireSsoPolicyEnabled"
+      bitBadge
+      badgeType="secondary"
+      class="tw-max-w-full !tw-align-middle"
+    >
+      {{ "off" | i18n }} - {{ "ssoLoginIsRequired" | i18n }}
+    </span>
+    <ng-container *ngIf="!requireSsoPolicyEnabled">
+      <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
+        "on" | i18n
+      }}</span>
+      <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
+        "off" | i18n
+      }}</span>
+    </ng-container>
   </ng-container>
   <span bitBadge badgeType="warning" class="!tw-align-middle">{{ "beta" | i18n }}</span>
   <ng-container *ngIf="loading">
@@ -56,7 +66,7 @@
 
 <p bitTypography="body2" *ngIf="limitReached">{{ "passkeyLimitReachedInfo" | i18n }}</p>
 
-<ng-container *ngIf="hasData && !limitReached">
+<ng-container *ngIf="hasData && !limitReached && !requireSsoPolicyEnabled">
   <button
     *ngIf="hasCredentials"
     type="button"

apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.ts

@@ -1,6 +1,8 @@
 import { Component, HostBinding, OnDestroy, OnInit } from "@angular/core";
 import { Subject, takeUntil } from "rxjs";
 
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { DialogService } from "@bitwarden/components";
 
 import { WebauthnLoginAdminService } from "../../core";
@@ -28,7 +30,8 @@ export class WebauthnLoginSettingsComponent implements OnInit, OnDestroy {
 
   constructor(
     private webauthnService: WebauthnLoginAdminService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private policyService: PolicyService
   ) {}
 
   @HostBinding("attr.aria-busy")
@@ -48,7 +51,16 @@ export class WebauthnLoginSettingsComponent implements OnInit, OnDestroy {
     return this.credentials?.length >= this.MaxCredentialCount;
   }
 
+  requireSsoPolicyEnabled = false;
+
   ngOnInit(): void {
+    this.policyService
+      .policyAppliesToActiveUser$(PolicyType.RequireSso)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((enabled) => {
+        this.requireSsoPolicyEnabled = enabled;
+      });
+
     this.webauthnService
       .getCredentials$()
       .pipe(takeUntil(this.destroy$))

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

@@ -7182,6 +7182,9 @@
   "next": {
     "message": "Next"
   },
+  "ssoLoginIsRequired": {
+    "message": "SSO login is required"
+  },
   "selectedRegionFlag": {
     "message": "Selected region flag"
   },