avoid setting hasNavigated for the initial route

apps/browser/src/background/main.background.ts

@@ -1618,7 +1618,9 @@ export default class MainBackground {
     // Set route of the popup before attempting to open it.
     // If the vault is locked, this won't have an effect as the auth guards will
     // redirect the user to the login page.
-    await browserAction.setPopup({ popup: "popup/index.html#/at-risk-passwords" });
+    await browserAction.setPopup({
+      popup: "popup/index.html#/at-risk-passwords?initialRoute=true",
+    });
 
     await this.openPopup();
 

apps/browser/src/platform/popup/view-cache/popup-router-cache.service.ts

@@ -44,7 +44,14 @@ export class PopupRouterCacheService {
     this.router.events
       .pipe(
         filter((event) => event instanceof NavigationEnd),
-        tap(() => {
+        tap((event: NavigationEnd) => {
+          // Add ability to navigate back to the vault if the initial route query param is set
+          // Without this logic, if the initial route tries to navigate back without a history,
+          // location.back won't navigate at all.
+          if (event.url.includes("initialRoute=true")) {
+            return;
+          }
+
           // `Location.back()` can now be called successfully
           this.hasNavigated = true;
         }),

apps/browser/src/platform/popup/view-cache/popup-router-cache.spec.ts

@@ -120,4 +120,14 @@ describe("Popup router cache guard", () => {
 
     expect(await firstValueFrom(service.history$())).toEqual(["/a"]);
   });
+
+  it("does not set `hasNavigated` flag when the `initialRoute` query param is set", async () => {
+    expect(service["hasNavigated"]).toBe(false);
+
+    await router.navigate(["a"], { queryParams: { initialRoute: true } });
+
+    await flushPromises();
+
+    expect(service["hasNavigated"]).toBe(false);
+  });
 });

apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.html

@@ -1,10 +1,5 @@
 <popup-page [loading]="loading$ | async">
-  <popup-header
+  <popup-header slot="header" [pageTitle]="'atRiskPasswords' | i18n" showBackButton>
-    slot="header"
-    [pageTitle]="'atRiskPasswords' | i18n"
-    showBackButton
-    [backAction]="navigateToVault.bind(this)"
-  >
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
     </ng-container>

apps/browser/src/vault/popup/components/at-risk-passwords/at-risk-passwords.component.ts

@@ -223,13 +223,4 @@ export class AtRiskPasswordsComponent implements OnInit {
       this.launchingCipher.set(null);
     }
   };
-
-  /**
-   * This page can be the first page the user sees when the extension launches,
-   * which can conflict with the `PopupRouterCacheService`. This replaces the
-   * built-in back button behavior so the user always navigates to the vault.
-   */
-  protected async navigateToVault() {
-    await this.router.navigate(["/tabs/vault"]);
-  }
 }