1
0
mirror of https://github.com/bitwarden/browser synced 2026-01-09 03:53:53 +00:00

fix(2fa-recovery-code-error): [Auth/PM-19885] Better error handling when 2FA recovery code is invalid (#16145)

Implements better error handling when a user enters an invalid 2FA recovery code. Upon entering an invalid code:
- Keep the user on the `/recover-2fa` page (This also makes it so the incorrect code remains in the form field so the user can see what they entered, if they mistyped the code, etc.)
- Show an inline error: "Invalid recovery code"
This commit is contained in:
rr-bw
2025-08-29 12:25:31 -07:00
committed by GitHub
parent e0da2671b4
commit ec950853bc
4 changed files with 90 additions and 21 deletions

View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from "@angular/core";
import { Component, DestroyRef, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { Router } from "@angular/router";
@@ -9,8 +10,10 @@ import {
} from "@bitwarden/auth/common";
import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
import { TokenTwoFactorRequest } from "@bitwarden/common/auth/models/request/identity-token/token-two-factor.request";
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
import { ToastService } from "@bitwarden/components";
@Component({
@@ -19,7 +22,7 @@ import { ToastService } from "@bitwarden/components";
standalone: false,
})
export class RecoverTwoFactorComponent implements OnInit {
protected formGroup = new FormGroup({
formGroup = new FormGroup({
email: new FormControl("", [Validators.required]),
masterPassword: new FormControl("", [Validators.required]),
recoveryCode: new FormControl("", [Validators.required]),
@@ -31,16 +34,23 @@ export class RecoverTwoFactorComponent implements OnInit {
recoveryCodeMessage = "";
constructor(
private destroyRef: DestroyRef,
private router: Router,
private i18nService: I18nService,
private loginStrategyService: LoginStrategyServiceAbstraction,
private toastService: ToastService,
private loginSuccessHandlerService: LoginSuccessHandlerService,
private logService: LogService,
private validationService: ValidationService,
) {}
async ngOnInit() {
this.recoveryCodeMessage = this.i18nService.t("logInBelowUsingYourSingleUseRecoveryCode");
// Clear any existing recovery code inline error when user updates the form
this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
this.formGroup.get("recoveryCode")?.setErrors(null);
});
}
get email(): string {
@@ -99,10 +109,21 @@ export class RecoverTwoFactorComponent implements OnInit {
await this.loginSuccessHandlerService.run(authResult.userId);
await this.router.navigate(["/settings/security/two-factor"]);
} catch (error) {
// If login errors, redirect to login page per product. Don't show error
this.logService.error("Error logging in automatically: ", (error as Error).message);
await this.router.navigate(["/login"], { queryParams: { email: email } });
} catch (error: unknown) {
if (error instanceof ErrorResponse) {
this.logService.error("Error logging in automatically: ", error.message);
if (error.message.includes("Two-step token is invalid")) {
this.formGroup.get("recoveryCode")?.setErrors({
invalidRecoveryCode: { message: this.i18nService.t("invalidRecoveryCode") },
});
} else {
this.validationService.showError(error.message);
}
} else {
this.logService.error("Error logging in automatically: ", error);
this.validationService.showError(error);
}
}
}
}