diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index efea291752..54a04d3de6 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -121,13 +121,7 @@
-
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index 161a1fe169..93beef42bd 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -137,6 +137,9 @@ export class LoginComponent implements OnInit, OnDestroy {
}
async ngOnInit(): Promise {
+ // Add popstate listener to listen for browser back button clicks
+ window.addEventListener("popstate", this.handlePopState);
+
// TODO: remove this when the UnauthenticatedExtensionUIRefresh feature flag is removed.
this.listenForUnauthUiRefreshFlagChanges();
@@ -148,6 +151,9 @@ export class LoginComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
+ // Remove popstate listener
+ window.removeEventListener("popstate", this.handlePopState);
+
if (this.clientType === ClientType.Desktop) {
// TODO: refactor to not use deprecated broadcaster service.
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
@@ -562,4 +568,28 @@ export class LoginComponent implements OnInit, OnDestroy {
this.clientType !== ClientType.Browser
);
}
+
+ /**
+ * Handle the back button click to transition back to the email entry state.
+ */
+ protected async backButtonClicked() {
+ // Replace the history so the "forward" button doesn't show (which wouldn't do anything)
+ history.pushState(null, "", window.location.pathname);
+ await this.toggleLoginUiState(LoginUiState.EMAIL_ENTRY);
+ }
+
+ /**
+ * Handle the popstate event to transition back to the email entry state when the back button is clicked.
+ * @param event - The popstate event.
+ */
+ private handlePopState = (event: PopStateEvent) => {
+ if (this.loginUiState === LoginUiState.MASTER_PASSWORD_ENTRY) {
+ // Prevent default navigation
+ event.preventDefault();
+ // Replace the history so the "forward" button doesn't show (which wouldn't do anything)
+ history.pushState(null, "", window.location.pathname);
+ // Transition back to email entry state
+ void this.toggleLoginUiState(LoginUiState.EMAIL_ENTRY);
+ }
+ };
}