feat(AuthRouteConstants): [Auth/PM-27370] Convert auth routes to use constants (#16980)

* PM-22663 WIP on auth route constants

* PM-22663 - Convert desktop & extension to use constants - first pass

* PM-22663 - Further clean up

* PM-22663 - catch more missed routes

* PM-22663 - add barrel files

* PM-22663 - Per PR feedback, add missing as const

* PM-22663 - Per PR feedback and TS docs, use same name for const enum like and derived type. Adjusted filenames to be singular.

* PM-22663 - Per PR feedback update desktop app routing module since auto rename didn't update it for whatever reason.

apps/web/src/app/auth/constants/auth-web-route.constant.ts

@@ -0,0 +1,35 @@
+// Web route segments auth owns under shared infrastructure
+export const AuthWebRouteSegment = Object.freeze({
+  // settings routes
+  Account: "account",
+  EmergencyAccess: "emergency-access",
+
+  // settings/security routes
+  Password: "password",
+  TwoFactor: "two-factor",
+  SecurityKeys: "security-keys",
+  DeviceManagement: "device-management",
+} as const);
+
+export type AuthWebRouteSegment = (typeof AuthWebRouteSegment)[keyof typeof AuthWebRouteSegment];
+
+// Full routes that auth owns in the web app
+export const AuthWebRoute = Object.freeze({
+  SignUpLinkExpired: "signup-link-expired",
+  RecoverTwoFactor: "recover-2fa",
+  AcceptEmergencyAccessInvite: "accept-emergency",
+  RecoverDeleteAccount: "recover-delete",
+  VerifyRecoverDeleteAccount: "verify-recover-delete",
+  AcceptOrganizationInvite: "accept-organization",
+
+  // Composed routes from segments (allowing for router.navigate / routerLink usage)
+  AccountSettings: `settings/${AuthWebRouteSegment.Account}`,
+  EmergencyAccessSettings: `settings/${AuthWebRouteSegment.EmergencyAccess}`,
+
+  PasswordSettings: `settings/security/${AuthWebRouteSegment.Password}`,
+  TwoFactorSettings: `settings/security/${AuthWebRouteSegment.TwoFactor}`,
+  SecurityKeysSettings: `settings/security/${AuthWebRouteSegment.SecurityKeys}`,
+  DeviceManagement: `settings/security/${AuthWebRouteSegment.DeviceManagement}`,
+} as const);
+
+export type AuthWebRoute = (typeof AuthWebRoute)[keyof typeof AuthWebRoute];

apps/web/src/app/auth/constants/index.ts

@@ -0,0 +1 @@
+export * from "./auth-web-route.constant";

apps/web/src/app/oss-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { Route, RouterModule, Routes } from "@angular/router";
 
 import { AuthenticationTimeoutComponent } from "@bitwarden/angular/auth/components/authentication-timeout.component";
+import { AuthRoute } from "@bitwarden/angular/auth/constants";
 import {
   authGuard,
   lockGuard,
@@ -55,6 +56,7 @@ import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/m
 import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
+import { AuthWebRoute, AuthWebRouteSegment } from "./auth/constants/auth-web-route.constant";
 import { deepLinkGuard } from "./auth/guards/deep-link/deep-link.guard";
 import { AcceptOrganizationComponent } from "./auth/organization-invite/accept-organization.component";
 import { RecoverDeleteComponent } from "./auth/recover-delete.component";
@@ -93,12 +95,12 @@ const routes: Routes = [
   // so that the redirectGuard does not interrupt the navigation.
   {
     path: "register",
-    redirectTo: "signup",
+    redirectTo: AuthRoute.SignUp,
     pathMatch: "full",
   },
   {
     path: "trial",
-    redirectTo: "signup",
+    redirectTo: AuthRoute.SignUp,
     pathMatch: "full",
   },
   {
@@ -114,7 +116,7 @@ const routes: Routes = [
       },
       { path: "verify-email", component: VerifyEmailTokenComponent },
       {
-        path: "accept-organization",
+        path: AuthWebRoute.AcceptOrganizationInvite,
         canActivate: [deepLinkGuard()],
         component: AcceptOrganizationComponent,
         data: { titleId: "joinOrganization", doNotSaveUrl: false } satisfies RouteDataProperties,
@@ -128,7 +130,7 @@ const routes: Routes = [
           doNotSaveUrl: false,
         } satisfies RouteDataProperties,
       },
-      { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
+      { path: "recover", pathMatch: "full", redirectTo: AuthWebRoute.RecoverTwoFactor },
       {
         path: "verify-recover-delete-org",
         component: VerifyRecoverDeleteOrgComponent,
@@ -142,7 +144,7 @@ const routes: Routes = [
     component: AnonLayoutWrapperComponent,
     children: [
       {
-        path: "login-with-passkey",
+        path: AuthRoute.LoginWithPasskey,
         canActivate: [unauthGuardFn()],
         data: {
           pageIcon: TwoFactorAuthSecurityKeyIcon,
@@ -164,7 +166,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "signup",
+        path: AuthRoute.SignUp,
         canActivate: [unauthGuardFn()],
         data: {
           pageIcon: RegistrationUserAddIcon,
@@ -189,7 +191,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "finish-signup",
+        path: AuthRoute.FinishSignUp,
         canActivate: [unauthGuardFn()],
         data: {
           pageIcon: LockIcon,
@@ -203,7 +205,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "login",
+        path: AuthRoute.Login,
         canActivate: [unauthGuardFn()],
         data: {
           pageTitle: {
@@ -229,7 +231,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "login-with-device",
+        path: AuthRoute.LoginWithDevice,
         data: {
           pageIcon: DevicesIcon,
           pageTitle: {
@@ -250,7 +252,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "admin-approval-requested",
+        path: AuthRoute.AdminApprovalRequested,
         data: {
           pageIcon: DevicesIcon,
           pageTitle: {
@@ -264,7 +266,7 @@ const routes: Routes = [
         children: [{ path: "", component: LoginViaAuthRequestComponent }],
       },
       {
-        path: "hint",
+        path: AuthRoute.PasswordHint,
         canActivate: [unauthGuardFn()],
         data: {
           pageTitle: {
@@ -286,7 +288,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "login-initiated",
+        path: AuthRoute.LoginInitiated,
         canActivate: [tdeDecryptionRequiredGuard()],
         data: {
           pageIcon: DevicesIcon,
@@ -315,7 +317,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "set-initial-password",
+        path: AuthRoute.SetInitialPassword,
         canActivate: [authGuard],
         component: SetInitialPasswordComponent,
         data: {
@@ -324,7 +326,7 @@ const routes: Routes = [
         } satisfies AnonLayoutWrapperData,
       },
       {
-        path: "signup-link-expired",
+        path: AuthWebRoute.SignUpLinkExpired,
         canActivate: [unauthGuardFn()],
         data: {
           pageIcon: TwoFactorTimeoutIcon,
@@ -337,13 +339,13 @@ const routes: Routes = [
             path: "",
             component: RegistrationLinkExpiredComponent,
             data: {
-              loginRoute: "/login",
+              loginRoute: `/${AuthRoute.Login}`,
             } satisfies RegistrationStartSecondaryComponentData,
           },
         ],
       },
       {
-        path: "sso",
+        path: AuthRoute.Sso,
         canActivate: [unauthGuardFn()],
         data: {
           pageTitle: {
@@ -368,7 +370,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "2fa",
+        path: AuthRoute.TwoFactor,
         component: TwoFactorAuthComponent,
         canActivate: [unauthGuardFn(), TwoFactorAuthGuard],
         children: [
@@ -408,7 +410,7 @@ const routes: Routes = [
         } satisfies AnonLayoutWrapperData,
       },
       {
-        path: "authentication-timeout",
+        path: AuthRoute.AuthenticationTimeout,
         canActivate: [unauthGuardFn()],
         children: [
           {
@@ -430,7 +432,7 @@ const routes: Routes = [
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
-        path: "recover-2fa",
+        path: AuthWebRoute.RecoverTwoFactor,
         canActivate: [unauthGuardFn()],
         children: [
           {
@@ -452,7 +454,7 @@ const routes: Routes = [
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
-        path: "device-verification",
+        path: AuthRoute.NewDeviceVerification,
         canActivate: [unauthGuardFn(), activeAuthGuard()],
         children: [
           {
@@ -471,7 +473,7 @@ const routes: Routes = [
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
-        path: "accept-emergency",
+        path: AuthWebRoute.AcceptEmergencyAccessInvite,
         canActivate: [deepLinkGuard()],
         data: {
           pageTitle: {
@@ -492,7 +494,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "recover-delete",
+        path: AuthWebRoute.RecoverDeleteAccount,
         canActivate: [unauthGuardFn()],
         data: {
           pageTitle: {
@@ -514,7 +516,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "verify-recover-delete",
+        path: AuthWebRoute.VerifyRecoverDeleteAccount,
         canActivate: [unauthGuardFn()],
         data: {
           pageTitle: {
@@ -596,7 +598,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: "change-password",
+        path: AuthRoute.ChangePassword,
         component: ChangePasswordComponent,
         canActivate: [authGuard],
         data: {
@@ -652,9 +654,9 @@ const routes: Routes = [
       {
         path: "settings",
         children: [
-          { path: "", pathMatch: "full", redirectTo: "account" },
+          { path: "", pathMatch: "full", redirectTo: AuthWebRouteSegment.Account },
           {
-            path: "account",
+            path: AuthWebRouteSegment.Account,
             component: AccountComponent,
             data: { titleId: "myAccount" } satisfies RouteDataProperties,
           },
@@ -680,7 +682,7 @@ const routes: Routes = [
               ),
           },
           {
-            path: "emergency-access",
+            path: AuthWebRouteSegment.EmergencyAccess,
             children: [
               {
                 path: "",