[PM-11502] Support Remember Email option when using SSO authentication

apps/browser/src/auth/popup/home.component.ts

@@ -45,17 +45,10 @@
   async ngOnInit(): Promise<void> {
     this.listenForUnauthUiRefreshFlagChanges();
 
-    const email = await firstValueFrom(this.loginEmailService.loginEmail$);
-    const rememberEmail = this.loginEmailService.getRememberEmail();
+    const storedEmail = await firstValueFrom(this.loginEmailService.rememberedEmail$);
 
-    if (email != null) {
-      this.formGroup.patchValue({ email, rememberEmail });
-    } else {
-      const storedEmail = await firstValueFrom(this.loginEmailService.storedEmail$);
-
-      if (storedEmail != null) {
-        this.formGroup.patchValue({ email: storedEmail, rememberEmail: true });
-      }
+    if (storedEmail != null) {
+      this.formGroup.patchValue({ email: storedEmail, rememberEmail: true });
     }
 
     this.environmentSelector.onOpenSelfHostedSettings
@@ -121,8 +114,9 @@
 
   async setLoginEmailValues() {
     // Note: Browser saves email settings here instead of the login component
-    this.loginEmailService.setRememberEmail(this.formGroup.controls.rememberEmail.value);
-    await this.loginEmailService.setLoginEmail(this.formGroup.controls.email.value);
-    await this.loginEmailService.saveEmailSettings();
+    this.loginEmailService.setRememberedEmailChoice(
+      this.formGroup.controls.email.value,
+      this.formGroup.controls.rememberEmail.value,
+    );
   }
 }

apps/web/src/app/auth/login/login-v1.component.html

@@ -33,15 +33,16 @@
     <div class="tw-mb-3 tw-flex tw-flex-col tw-items-center tw-justify-center">
       <p class="tw-mb-3">{{ "or" | i18n }}</p>
 
-      <a
-        bitLink
+      <button
+        type="button"
+        bitButton
         block
-        linkType="primary"
-        routerLink="/login-with-passkey"
-        (mousedown)="$event.preventDefault()"
+        buttonType="primary"
+        (click)="handleLoginWithPasskeyClick()"
       >
-        <span><i class="bwi bwi-passkey"></i> {{ "logInWithPasskey" | i18n }}</span>
-      </a>
+        <i class="bwi bwi-passkey tw-mr-1"></i>
+        {{ "logInWithPasskey" | i18n }}
+      </button>
     </div>
 
     <hr />

apps/web/src/app/auth/login/login-v1.component.ts

@@ -162,12 +162,11 @@
       }
     }
 
-    this.loginEmailService.clearValues();
+    this.loginEmailService.clearLoginEmail();
     await this.router.navigate([this.successRoute]);
   }
 
   async goToHint() {
-    await this.saveEmailSettings();
     await this.router.navigateByUrl("/hint");
   }
 
@@ -182,6 +181,19 @@
     await this.router.navigate(["/signup"]);
   }
 
+  /**
+   * Handle the Login with Passkey button click.
+   * We need a handler here in order to persist the remember email selection to state before routing.
+   * @param event - The event object.
+   */
+  async handleLoginWithPasskeyClick() {
+    const email = this.formGroup.value.email;
+    if (email) {
+      await this.saveEmailSettings();
+    }
+    await this.router.navigate(["/login-with-passkey"]);
+  }
+
   protected override async handleMigrateEncryptionKey(result: AuthResult): Promise<boolean> {
     if (!result.requiresEncryptionKeyMigration) {
       return false;

apps/web/src/app/auth/two-factor.component.ts

@@ -129,7 +129,7 @@
   }
 
   goAfterLogIn = async () => {
-    this.loginEmailService.clearValues();
+    this.loginEmailService.clearLoginEmail();
     // 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([this.successRoute], {

libs/angular/src/auth/components/login-v1.component.ts

@@ -171,8 +171,6 @@
       this.formPromise = this.loginStrategyService.logIn(credentials);
       const response = await this.formPromise;
 
-      await this.saveEmailSettings();
-
       if (this.handleCaptchaRequired(response)) {
         return;
       } else if (await this.handleMigrateEncryptionKey(response)) {
@@ -193,7 +191,7 @@
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           this.onSuccessfulLoginForceResetNavigate();
         } else {
-          this.loginEmailService.clearValues();
+          this.loginEmailService.clearLoginEmail();
           // 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([this.forcePasswordResetRoute]);
@@ -210,7 +208,7 @@
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           this.onSuccessfulLoginNavigate(response.userId);
         } else {
-          this.loginEmailService.clearValues();
+          this.loginEmailService.clearLoginEmail();
           // 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([this.successRoute]);
@@ -240,7 +238,6 @@
       return;
     }
 
-    await this.saveEmailSettings();
     await this.router.navigate(["/login-with-device"]);
   }
 
@@ -291,6 +288,7 @@
     const emailValid = this.formGroup.get("email").valid;
 
     if (emailValid) {
+      await this.saveEmailSettings();
       this.toggleValidateEmail(true);
       await this.getLoginWithDevice(this.loggedEmail);
     }
@@ -320,31 +318,24 @@
   }
 
   private async loadEmailSettings() {
-    // Try to load from memory first
-    const email = await firstValueFrom(this.loginEmailService.loginEmail$);
-    const rememberEmail = this.loginEmailService.getRememberEmail();
-
-    if (email) {
-      this.formGroup.controls.email.setValue(email);
-      this.formGroup.controls.rememberEmail.setValue(rememberEmail);
+    const rememberedEmail = await firstValueFrom(this.loginEmailService.rememberedEmail$);
+    if (rememberedEmail) {
+      this.formGroup.controls.email.setValue(rememberedEmail);
+      this.formGroup.controls.rememberEmail.setValue(true);
     } else {
-      // If not in memory, check email on disk
-      const storedEmail = await firstValueFrom(this.loginEmailService.storedEmail$);
-      if (storedEmail) {
-        // If we have a stored email, rememberEmail should default to true
-        this.formGroup.controls.email.setValue(storedEmail);
-        this.formGroup.controls.rememberEmail.setValue(true);
-      }
+      this.formGroup.controls.rememberEmail.setValue(false);
     }
   }
 
   protected async saveEmailSettings() {
     // Save off email for SSO
     await this.ssoLoginService.setSsoEmail(this.formGroup.value.email);
 
-    this.loginEmailService.setLoginEmail(this.formGroup.value.email);
-    this.loginEmailService.setRememberEmail(this.formGroup.value.rememberEmail);
-    await this.loginEmailService.saveEmailSettings();
+    await this.loginEmailService.setLoginEmail(this.formGroup.value.email);
+    await this.loginEmailService.setRememberedEmailChoice(
+      this.formGroup.value.email,
+      this.formGroup.value.rememberEmail,
+    );
   }
 
   // Legacy accounts used the master key to encrypt data. Migration is required but only performed on web

libs/angular/src/auth/components/login-via-auth-request-v1.component.ts

@@ -515,11 +515,6 @@ export class LoginViaAuthRequestComponentV1
   }
 
   private async handleSuccessfulLoginNavigation() {
-    if (this.state === State.StandardAuthRequest) {
-      // Only need to set remembered email on standard login with auth req flow
-      await this.loginEmailService.saveEmailSettings();
-    }
-
     if (this.onSuccessfulLogin != null) {
       // 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

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

@@ -306,17 +306,17 @@ describe("TwoFactorComponent", () => {
         expect(component.onSuccessfulLogin).toHaveBeenCalled();
       });
 
-      it("calls loginEmailService.clearValues() when login is successful", async () => {
+      it("calls loginEmailService.clearLoginEmail() when login is successful", async () => {
         // Arrange
         mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
-        // spy on loginEmailService.clearValues
-        const clearValuesSpy = jest.spyOn(mockLoginEmailService, "clearValues");
+        // spy on loginEmailService.clearLoginEmail
+        const clearEmailSpy = jest.spyOn(mockLoginEmailService, "clearLoginEmail");
 
         // Act
         await component.submit();
 
         // Assert
-        expect(clearValuesSpy).toHaveBeenCalled();
+        expect(clearEmailSpy).toHaveBeenCalled();
       });
 
       describe("Set Master Password scenarios", () => {

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

@@ -110,7 +110,7 @@
     await this.submit();
   };
   goAfterLogIn = async () => {
-    this.loginEmailService.clearValues();
+    this.loginEmailService.clearLoginEmail();
     // 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([this.successRoute], {
@@ -264,7 +264,7 @@
     // - Browser SSO on extension open
     const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
     await this.ssoLoginService.setActiveUserOrganizationSsoIdentifier(this.orgIdentifier, userId);
-    this.loginEmailService.clearValues();
+    this.loginEmailService.clearLoginEmail();
 
     // note: this flow affects both TDE & standard users
     if (this.isForcePasswordResetRequired(authResult)) {

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

@@ -301,17 +301,17 @@ describe("TwoFactorComponent", () => {
         expect(component.onSuccessfulLogin).toHaveBeenCalled();
       });
 
-      it("calls loginEmailService.clearValues() when login is successful", async () => {
+      it("calls loginEmailService.clearLoginEmail() when login is successful", async () => {
         // Arrange
         mockLoginStrategyService.logInTwoFactor.mockResolvedValue(new AuthResult());
-        // spy on loginEmailService.clearValues
-        const clearValuesSpy = jest.spyOn(mockLoginEmailService, "clearValues");
+        // spy on loginEmailService.clearLoginEmail()
+        const clearLoginEmailSpy = jest.spyOn(mockLoginEmailService, "clearLoginEmail");
 
         // Act
         await component.doSubmit();
 
         // Assert
-        expect(clearValuesSpy).toHaveBeenCalled();
+        expect(clearLoginEmailSpy).toHaveBeenCalled();
       });
 
       describe("Set Master Password scenarios", () => {

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

@@ -290,7 +290,7 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
     // - Browser SSO on extension open
     const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
     await this.ssoLoginService.setActiveUserOrganizationSsoIdentifier(this.orgIdentifier, userId);
-    this.loginEmailService.clearValues();
+    this.loginEmailService.clearLoginEmail();
 
     // note: this flow affects both TDE & standard users
     if (this.isForcePasswordResetRequired(authResult)) {

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

@@ -1430,7 +1430,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: LoginSuccessHandlerService,
     useClass: DefaultLoginSuccessHandlerService,
-    deps: [SyncService, UserAsymmetricKeysRegenerationService],
+    deps: [SyncService, UserAsymmetricKeysRegenerationService, LoginEmailService],
   }),
   safeProvider({
     provide: PasswordLoginStrategy,

libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts

@@ -570,11 +570,6 @@ export class LoginViaAuthRequestComponent implements OnInit, OnDestroy {
   }
 
   private async handleSuccessfulLoginNavigation(userId: UserId) {
-    if (this.flow === Flow.StandardAuthRequest) {
-      // Only need to set remembered email on standard login with auth req flow
-      await this.loginEmailService.saveEmailSettings();
-    }
-
     await this.loginSuccessHandlerService.run(userId);
     await this.router.navigate(["vault"]);
   }

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

@@ -27,7 +27,12 @@
 
     <!-- Remember Email input -->
     <bit-form-control>
-      <input type="checkbox" formControlName="rememberEmail" bitCheckbox />
+      <input
+        type="checkbox"
+        formControlName="rememberEmail"
+        (input)="onRememberEmailInput($event)"
+        bitCheckbox
+      />
       <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
     </bit-form-control>
 
@@ -39,18 +44,18 @@
 
       <div class="tw-text-center">{{ "or" | i18n }}</div>
 
-      <!-- Link to Login with Passkey page -->
+      <!-- Button to Login with Passkey -->
       <ng-container *ngIf="isLoginWithPasskeySupported()">
-        <a
+        <button
+          type="button"
           bitButton
           block
-          linkType="primary"
-          routerLink="/login-with-passkey"
-          (mousedown)="$event.preventDefault()"
+          buttonType="secondary"
+          (click)="handleLoginWithPasskeyClick()"
         >
           <i class="bwi bwi-passkey tw-mr-1"></i>
           {{ "logInWithPasskey" | i18n }}
-        </a>
+        </button>
       </ng-container>
 
       <!-- Button to Login with SSO -->