From 34730eace4efda9a2286a891d4b96ad61abf03bd Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Thu, 16 Jun 2022 17:47:33 +0800
Subject: [PATCH 1/8] Upgrade react-router-dom to v6

---
 portal/package-lock.json | 40 +++++++++++++++++++---------------------
 portal/package.json      |  2 +-
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/portal/package-lock.json b/portal/package-lock.json
index 48ebfc3286..e0bff73597 100644
--- a/portal/package-lock.json
+++ b/portal/package-lock.json
@@ -39,7 +39,7 @@
         "react-code-blocks": "0.0.9-0",
         "react-dom": "17.0.2",
         "react-helmet-async": "1.2.2",
-        "react-router-dom": "6.0.0-beta.0",
+        "react-router-dom": "6.3.0",
         "tzdata": "1.0.29",
         "uuid": "8.3.2",
         "zxcvbn": "4.4.2"
@@ -15444,27 +15444,25 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz",
-      "integrity": "sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "dependencies": {
-        "prop-types": "^15.7.2"
+        "history": "^5.2.0"
       },
       "peerDependencies": {
-        "history": ">=5",
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz",
-      "integrity": "sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "dependencies": {
-        "prop-types": "^15.7.2",
-        "react-router": "6.0.0-beta.0"
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
       },
       "peerDependencies": {
-        "history": ">=5",
         "react": ">=16.8",
         "react-dom": ">=16.8"
       }
@@ -29571,20 +29569,20 @@
       "dev": true
     },
     "react-router": {
-      "version": "6.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz",
-      "integrity": "sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "requires": {
-        "prop-types": "^15.7.2"
+        "history": "^5.2.0"
       }
     },
     "react-router-dom": {
-      "version": "6.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz",
-      "integrity": "sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "requires": {
-        "prop-types": "^15.7.2",
-        "react-router": "6.0.0-beta.0"
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
       }
     },
     "react-syntax-highlighter": {
diff --git a/portal/package.json b/portal/package.json
index 8ad2816fc5..c6fd0e85a3 100644
--- a/portal/package.json
+++ b/portal/package.json
@@ -73,7 +73,7 @@
     "react-code-blocks": "0.0.9-0",
     "react-dom": "17.0.2",
     "react-helmet-async": "1.2.2",
-    "react-router-dom": "6.0.0-beta.0",
+    "react-router-dom": "6.3.0",
     "tzdata": "1.0.29",
     "uuid": "8.3.2",
     "zxcvbn": "4.4.2"

From b78cc78ab4ed7037448939aef9eb6d04d32868f0 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Thu, 16 Jun 2022 17:54:43 +0800
Subject: [PATCH 2/8] Introduce custom useBlocker hook

---
 README.md                              |  5 ++-
 portal/src/NavigationBlockerDialog.tsx |  3 +-
 portal/src/hook/useBlocker.ts          | 47 ++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 portal/src/hook/useBlocker.ts

diff --git a/README.md b/README.md
index 6ce6d16e02..2c2959ae72 100644
--- a/README.md
+++ b/README.md
@@ -210,7 +210,10 @@ otherwise, `npm run gentype` will fail.
 
 @monaco-editor/react>=4 is slow in our usage. We need to adjust how we use it when we upgrade.
 
-react-router-dom>6.0.0-beta.0 introduces a lot of breaking changes. It is better to wait for the RC version.
+As `useBlocker` is removed since react-router-domv6.0.0-beta.7 and have no promise which version will
+come back, we introduce the custom `useBlocker` hook by referencing the last commit which this hook
+still exist.
+See [https://github.com/remix-run/react-router/commit/256cad70d3fd4500b1abcfea66f3ee622fb90874](https://github.com/remix-run/react-router/commit/256cad70d3fd4500b1abcfea66f3ee622fb90874)
 
 When Parcel cannot resolve nodejs globals such as `process` and `Buffer`,
 it installs them for us.
diff --git a/portal/src/NavigationBlockerDialog.tsx b/portal/src/NavigationBlockerDialog.tsx
index 8bc49ab926..5333c07199 100644
--- a/portal/src/NavigationBlockerDialog.tsx
+++ b/portal/src/NavigationBlockerDialog.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { useBlocker, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Location } from "history";
 import BlockerDialog from "./BlockerDialog";
+import { useBlocker } from "./hook/useBlocker";
 
 interface NavigationBlockerDialogProps {
   blockNavigation: boolean;
diff --git a/portal/src/hook/useBlocker.ts b/portal/src/hook/useBlocker.ts
new file mode 100644
index 0000000000..fd79121df9
--- /dev/null
+++ b/portal/src/hook/useBlocker.ts
@@ -0,0 +1,47 @@
+import type { Blocker, History, Transition } from "history";
+import { ContextType, useContext, useEffect } from "react";
+import {
+  Navigator as BaseNavigator,
+  UNSAFE_NavigationContext as NavigationContext,
+} from "react-router-dom";
+
+interface Navigator extends BaseNavigator {
+  block: History["block"];
+}
+
+type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
+  navigator: Navigator;
+};
+
+/**
+ * @source https://github.com/remix-run/react-router/commit/256cad70d3fd4500b1abcfea66f3ee622fb90874
+ */
+export function useBlocker(blocker: Blocker, when = true): void {
+  // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style, @typescript-eslint/no-unnecessary-type-assertion
+  const { navigator } = useContext(
+    NavigationContext
+  ) as NavigationContextWithBlock;
+
+  useEffect(() => {
+    if (!when) {
+      return () => {};
+    }
+
+    const unblock = navigator.block((tx: Transition) => {
+      const autoUnblockingTx = {
+        ...tx,
+        retry() {
+          // Automatically unblock the transition so it can play all the way
+          // through before retrying it. TODO: Figure out how to re-enable
+          // this block if the transition is cancelled for some reason.
+          unblock();
+          tx.retry();
+        },
+      };
+
+      blocker(autoUnblockingTx);
+    });
+
+    return unblock;
+  }, [navigator, blocker, when]);
+}

From 993cbbbf52864392318b14b3b0c71035349d5940 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Thu, 16 Jun 2022 17:56:23 +0800
Subject: [PATCH 3/8] Refactor imports from react-router to react-router-dom

---
 portal/src/NavBreadcrumb.tsx   | 3 +--
 portal/src/ReactRouterLink.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/portal/src/NavBreadcrumb.tsx b/portal/src/NavBreadcrumb.tsx
index d5c83b82e3..5d50f0a561 100644
--- a/portal/src/NavBreadcrumb.tsx
+++ b/portal/src/NavBreadcrumb.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useCallback } from "react";
-import { useNavigate } from "react-router";
-import { useHref } from "react-router-dom";
+import { useHref, useNavigate } from "react-router-dom";
 import { Breadcrumb, IBreadcrumbItem, IRenderFunction } from "@fluentui/react";
 import { Context } from "@oursky/react-messageformat";
 import useNavIsActive from "./hook/useNavIsActive";
diff --git a/portal/src/ReactRouterLink.tsx b/portal/src/ReactRouterLink.tsx
index d79c364849..bc4a9c59fb 100644
--- a/portal/src/ReactRouterLink.tsx
+++ b/portal/src/ReactRouterLink.tsx
@@ -5,7 +5,7 @@ import {
   useNavigate,
   useLocation,
   useResolvedPath,
-} from "react-router";
+} from "react-router-dom";
 
 function isModifiedEvent(event: React.MouseEvent) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);

From 0849e0d01465d1af94c9b7d3f08589861a35a2df Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Thu, 16 Jun 2022 17:58:17 +0800
Subject: [PATCH 4/8] Remove custom Route component

---
 portal/src/AppRoute.tsx | 20 -----------
 portal/src/ReactApp.tsx | 76 +++++++++++++++++++++++++----------------
 2 files changed, 47 insertions(+), 49 deletions(-)
 delete mode 100644 portal/src/AppRoute.tsx

diff --git a/portal/src/AppRoute.tsx b/portal/src/AppRoute.tsx
deleted file mode 100644
index 813a77048d..0000000000
--- a/portal/src/AppRoute.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { Route, RouteProps } from "react-router";
-import Authenticated from "./graphql/portal/Authenticated";
-
-interface AppRouteProps extends RouteProps {
-  requireAuth?: boolean;
-}
-
-// requireAuth on AppRoute only works on element, don't wrap children inside for now
-export const AppRoute: React.FC<AppRouteProps> = function AppRoute({
-  requireAuth,
-  ...routeProps
-}) {
-  if (requireAuth) {
-    if (routeProps.element) {
-      routeProps.element = <Authenticated>{routeProps.element}</Authenticated>;
-    }
-  }
-  return <Route {...routeProps} />;
-};
diff --git a/portal/src/ReactApp.tsx b/portal/src/ReactApp.tsx
index 34c50b8f88..702c7d2470 100644
--- a/portal/src/ReactApp.tsx
+++ b/portal/src/ReactApp.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { BrowserRouter, Routes, Navigate } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import {
   LocaleProvider,
   FormattedMessage,
@@ -31,7 +31,7 @@ import { loadTheme, Link as FluentLink, ILinkProps } from "@fluentui/react";
 import ProjectWizardDoneScreen from "./graphql/portal/ProjectWizardDoneScreen";
 import OnboardingRedirect from "./OnboardingRedirect";
 import { ReactRouterLink, ReactRouterLinkProps } from "./ReactRouterLink";
-import { AppRoute } from "./AppRoute";
+import Authenticated from "./graphql/portal/Authenticated";
 
 async function loadSystemConfig(): Promise<SystemConfig> {
   const resp = await fetch("/api/system-config.json");
@@ -54,47 +54,65 @@ const ReactAppRoutes: React.FC = function ReactAppRoutes() {
   return (
     <BrowserRouter>
       <Routes>
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/"
-          element={<Navigate to="projects/" replace={true} />}
+          element={
+            <Authenticated>
+              <Navigate to="projects/" replace={true} />
+            </Authenticated>
+          }
         />
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/projects/"
-          element={<AppsScreen />}
+          element={
+            <Authenticated>
+              <AppsScreen />
+            </Authenticated>
+          }
         />
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/projects/create"
-          element={<CreateProjectScreen />}
+          element={
+            <Authenticated>
+              <CreateProjectScreen />
+            </Authenticated>
+          }
         />
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/project/:appID/*"
-          element={<AppRoot />}
+          element={
+            <Authenticated>
+              <AppRoot />
+            </Authenticated>
+          }
         />
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/project/:appID/wizard/*"
-          element={<ProjectWizardScreen />}
+          element={
+            <Authenticated>
+              <ProjectWizardScreen />
+            </Authenticated>
+          }
         />
-        <AppRoute
-          requireAuth={true}
+        <Route
           path="/project/:appID/wizard/done"
-          element={<ProjectWizardDoneScreen />}
+          element={
+            <Authenticated>
+              <ProjectWizardDoneScreen />
+            </Authenticated>
+          }
         />
-        <AppRoute path="/oauth-redirect" element={<OAuthRedirect />} />
-        <AppRoute
-          path="/onboarding-redirect"
-          element={<OnboardingRedirect />}
-        />
-        <AppRoute
-          requireAuth={true}
+        <Route path="/oauth-redirect" element={<OAuthRedirect />} />
+        <Route path="/onboarding-redirect" element={<OnboardingRedirect />} />
+        <Route
           path="/"
-          element={<Navigate to="projects/" replace={true} />}
+          element={
+            <Authenticated>
+              <Navigate to="projects/" replace={true} />
+            </Authenticated>
+          }
         />
-        <AppRoute
+        <Route
           path="/collaborators/invitation"
           element={<AcceptAdminInvitationScreen />}
         />

From 208783713c9c6b4d2bed002d8391f8b091262150 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Fri, 17 Jun 2022 16:14:11 +0800
Subject: [PATCH 5/8] Add type for data generated by useParams()

---
 portal/src/ScreenHeader.tsx                                | 2 +-
 portal/src/ScreenNav.tsx                                   | 2 +-
 portal/src/graphql/adminapi/AddEmailScreen.tsx             | 2 +-
 portal/src/graphql/adminapi/AddPhoneScreen.tsx             | 2 +-
 portal/src/graphql/adminapi/AddUserScreen.tsx              | 2 +-
 portal/src/graphql/adminapi/AddUsernameScreen.tsx          | 2 +-
 portal/src/graphql/adminapi/AuditLogEntryScreen.tsx        | 2 +-
 portal/src/graphql/adminapi/AuditLogScreen.tsx             | 2 +-
 portal/src/graphql/adminapi/EditPictureScreen.tsx          | 2 +-
 portal/src/graphql/adminapi/ResetPasswordScreen.tsx        | 4 ++--
 .../graphql/adminapi/UserDetailsConnectedIdentities.tsx    | 2 +-
 portal/src/graphql/adminapi/UserDetailsScreen.tsx          | 2 +-
 portal/src/graphql/adminapi/UserDetailsSession.tsx         | 2 +-
 .../graphql/portal/AccountDeletionConfigurationScreen.tsx  | 2 +-
 portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx  | 2 +-
 portal/src/graphql/portal/AnalyticsScreen.tsx              | 2 +-
 .../graphql/portal/AnonymousUsersConfigurationScreen.tsx   | 2 +-
 .../src/graphql/portal/ApplicationsConfigurationScreen.tsx | 2 +-
 .../graphql/portal/AuthenticatorConfigurationScreen.tsx    | 2 +-
 portal/src/graphql/portal/BiometricConfigurationScreen.tsx | 2 +-
 portal/src/graphql/portal/CreateCustomAttributeScreen.tsx  | 2 +-
 portal/src/graphql/portal/CreateOAuthClientScreen.tsx      | 2 +-
 .../graphql/portal/CustomAttributesConfigurationScreen.tsx | 2 +-
 portal/src/graphql/portal/CustomDomainListScreen.tsx       | 6 +++---
 portal/src/graphql/portal/EditCustomAttributeScreen.tsx    | 5 ++++-
 portal/src/graphql/portal/EditOAuthClientScreen.tsx        | 5 ++++-
 .../graphql/portal/ForgotPasswordConfigurationScreen.tsx   | 2 +-
 portal/src/graphql/portal/GetStartedScreen.tsx             | 4 ++--
 .../graphql/portal/GoogleTagManagerConfigurationScreen.tsx | 2 +-
 .../src/graphql/portal/IntegrationsConfigurationScreen.tsx | 2 +-
 portal/src/graphql/portal/InviteAdminScreen.tsx            | 2 +-
 .../src/graphql/portal/LocalizationConfigurationScreen.tsx | 2 +-
 portal/src/graphql/portal/LoginIDConfigurationScreen.tsx   | 2 +-
 .../graphql/portal/PasswordPolicyConfigurationScreen.tsx   | 2 +-
 portal/src/graphql/portal/PortalAdminsSettings.tsx         | 2 +-
 portal/src/graphql/portal/ProjectRootScreen.tsx            | 2 +-
 portal/src/graphql/portal/ProjectWizardDoneScreen.tsx      | 4 ++--
 portal/src/graphql/portal/ProjectWizardScreen.tsx          | 2 +-
 portal/src/graphql/portal/SMTPConfigurationScreen.tsx      | 2 +-
 .../src/graphql/portal/SingleSignOnConfigurationScreen.tsx | 2 +-
 .../portal/StandardAttributesConfigurationScreen.tsx       | 2 +-
 portal/src/graphql/portal/SubscriptionScreen.tsx           | 2 +-
 portal/src/graphql/portal/UISettingsScreen.tsx             | 2 +-
 .../src/graphql/portal/VerificationConfigurationScreen.tsx | 2 +-
 portal/src/graphql/portal/VerifyDomainScreen.tsx           | 7 +++++--
 portal/src/graphql/portal/WebhookConfigurationScreen.tsx   | 2 +-
 46 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/portal/src/ScreenHeader.tsx b/portal/src/ScreenHeader.tsx
index 5a1b3d9cc9..0ba310a98c 100644
--- a/portal/src/ScreenHeader.tsx
+++ b/portal/src/ScreenHeader.tsx
@@ -64,7 +64,7 @@ const commandButtonStyles = {
 const ScreenHeader: React.FC = function ScreenHeader() {
   const { renderToString } = useContext(Context);
   const { themes, authgearEndpoint } = useSystemConfig();
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const { viewer } = useViewerQuery();
 
   const redirectURI = window.location.origin + "/";
diff --git a/portal/src/ScreenNav.tsx b/portal/src/ScreenNav.tsx
index 948cdcbad4..faabadc92c 100644
--- a/portal/src/ScreenNav.tsx
+++ b/portal/src/ScreenNav.tsx
@@ -49,7 +49,7 @@ interface NavLinkProps {
 }
 
 const ScreenNav: React.FC = function ScreenNav() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
   const { renderToString } = useContext(Context);
   const location = useLocation();
diff --git a/portal/src/graphql/adminapi/AddEmailScreen.tsx b/portal/src/graphql/adminapi/AddEmailScreen.tsx
index 05fc24fd4a..0224b25ae6 100644
--- a/portal/src/graphql/adminapi/AddEmailScreen.tsx
+++ b/portal/src/graphql/adminapi/AddEmailScreen.tsx
@@ -48,7 +48,7 @@ const EmailField: React.FC<EmailFieldProps> = function EmailField(props) {
 };
 
 const AddEmailScreen: React.FC = function AddEmailScreen() {
-  const { appID, userID } = useParams();
+  const { appID, userID } = useParams() as { appID: string; userID: string };
   const {
     user,
     loading: loadingUser,
diff --git a/portal/src/graphql/adminapi/AddPhoneScreen.tsx b/portal/src/graphql/adminapi/AddPhoneScreen.tsx
index 1421638840..a6aa7b935b 100644
--- a/portal/src/graphql/adminapi/AddPhoneScreen.tsx
+++ b/portal/src/graphql/adminapi/AddPhoneScreen.tsx
@@ -67,7 +67,7 @@ function LoginIDField(props: LoginIDFieldProps) {
 }
 
 const AddPhoneScreen: React.FC = function AddPhoneScreen() {
-  const { appID, userID } = useParams();
+  const { appID, userID } = useParams() as { appID: string; userID: string };
   const {
     user,
     loading: loadingUser,
diff --git a/portal/src/graphql/adminapi/AddUserScreen.tsx b/portal/src/graphql/adminapi/AddUserScreen.tsx
index 9dca24ab84..1def8f5436 100644
--- a/portal/src/graphql/adminapi/AddUserScreen.tsx
+++ b/portal/src/graphql/adminapi/AddUserScreen.tsx
@@ -288,7 +288,7 @@ const AddUserContent: React.FC<AddUserContentProps> = function AddUserContent(
 };
 
 const AddUserScreen: React.FC = function AddUserScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
 
   const { effectiveAppConfig, loading, error, refetch } =
diff --git a/portal/src/graphql/adminapi/AddUsernameScreen.tsx b/portal/src/graphql/adminapi/AddUsernameScreen.tsx
index 223661d28c..e49f25bf6b 100644
--- a/portal/src/graphql/adminapi/AddUsernameScreen.tsx
+++ b/portal/src/graphql/adminapi/AddUsernameScreen.tsx
@@ -51,7 +51,7 @@ const UsernameField: React.FC<UsernameFieldProps> = function UsernameField(
 };
 
 const AddUsernameScreen: React.FC = function AddUsernameScreen() {
-  const { appID, userID } = useParams();
+  const { appID, userID } = useParams() as { appID: string; userID: string };
   const {
     user,
     loading: loadingUser,
diff --git a/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx b/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
index a5b067c3dc..acd27ce730 100644
--- a/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
+++ b/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
@@ -53,7 +53,7 @@ function SummaryText(props: { children: React.ReactNode; light?: boolean }) {
 
 // eslint-disable-next-line complexity
 const AuditLogEntryScreen: React.FC = function AuditLogEntryScreen() {
-  const { logID } = useParams();
+  const { logID } = useParams() as { logID: string };
   const location = useLocation();
   const state = location.state as { searchParams?: string };
 
diff --git a/portal/src/graphql/adminapi/AuditLogScreen.tsx b/portal/src/graphql/adminapi/AuditLogScreen.tsx
index 03d0bbc68f..b33d491e30 100644
--- a/portal/src/graphql/adminapi/AuditLogScreen.tsx
+++ b/portal/src/graphql/adminapi/AuditLogScreen.tsx
@@ -138,7 +138,7 @@ const AuditLogScreen: React.FC = function AuditLogScreen() {
     toParam != null ? new Date(toParam) : null
   );
 
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const featureConfig = useAppFeatureConfigQuery(appID);
 
   const logRetrievalDays = useMemo(() => {
diff --git a/portal/src/graphql/adminapi/EditPictureScreen.tsx b/portal/src/graphql/adminapi/EditPictureScreen.tsx
index c199f4742e..8e6b5a3d8d 100644
--- a/portal/src/graphql/adminapi/EditPictureScreen.tsx
+++ b/portal/src/graphql/adminapi/EditPictureScreen.tsx
@@ -415,7 +415,7 @@ function EditPictureScreenContent(props: EditPictureScreenContentProps) {
 
 const EditPictureScreen: React.FC = function EditPictureScreen() {
   const navigate = useNavigate();
-  const { appID, userID } = useParams();
+  const { appID, userID } = useParams() as { appID: string; userID: string };
   const {
     user,
     loading: loadingUser,
diff --git a/portal/src/graphql/adminapi/ResetPasswordScreen.tsx b/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
index 74bf3a5ecc..558f8969be 100644
--- a/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
+++ b/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
@@ -83,7 +83,7 @@ const ResetPasswordContent: React.FC<ResetPasswordContentProps> = function (
 };
 
 const ResetPasswordScreen: React.FC = function ResetPasswordScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
 
   const { effectiveAppConfig, loading, error, refetch } =
@@ -93,7 +93,7 @@ const ResetPasswordScreen: React.FC = function ResetPasswordScreen() {
     [effectiveAppConfig]
   );
 
-  const { userID } = useParams();
+  const { userID } = useParams() as { userID: string };
   const { resetPassword } = useResetPasswordMutation(userID);
 
   const validate = useCallback(
diff --git a/portal/src/graphql/adminapi/UserDetailsConnectedIdentities.tsx b/portal/src/graphql/adminapi/UserDetailsConnectedIdentities.tsx
index 86257f81b0..6d5be43cc6 100644
--- a/portal/src/graphql/adminapi/UserDetailsConnectedIdentities.tsx
+++ b/portal/src/graphql/adminapi/UserDetailsConnectedIdentities.tsx
@@ -390,7 +390,7 @@ const UserDetailsConnectedIdentities: React.FC<UserDetailsConnectedIdentitiesPro
     const { identities, verifiedClaims, availableLoginIdIdentities } = props;
     const { locale, renderToString } = useContext(Context);
 
-    const { userID } = useParams();
+    const { userID } = useParams() as { userID: string };
     const navigate = useNavigate();
 
     /* TODO: implement save primary identities
diff --git a/portal/src/graphql/adminapi/UserDetailsScreen.tsx b/portal/src/graphql/adminapi/UserDetailsScreen.tsx
index b04ab36703..b7e750c83b 100644
--- a/portal/src/graphql/adminapi/UserDetailsScreen.tsx
+++ b/portal/src/graphql/adminapi/UserDetailsScreen.tsx
@@ -545,7 +545,7 @@ const UserDetailsScreenContent: React.FC<UserDetailsScreenContentProps> =
   };
 
 const UserDetailsScreen: React.FC = function UserDetailsScreen() {
-  const { appID, userID } = useParams();
+  const { appID, userID } = useParams() as { appID: string; userID: string };
   const { user, loading: loadingUser, error, refetch } = useUserQuery(userID);
   const {
     effectiveAppConfig,
diff --git a/portal/src/graphql/adminapi/UserDetailsSession.tsx b/portal/src/graphql/adminapi/UserDetailsSession.tsx
index 7907293546..0584fd457c 100644
--- a/portal/src/graphql/adminapi/UserDetailsSession.tsx
+++ b/portal/src/graphql/adminapi/UserDetailsSession.tsx
@@ -103,7 +103,7 @@ interface Props {
 const UserDetailsSession: React.FC<Props> = function UserDetailsSession(props) {
   const { locale, renderToString } = useContext(Context);
   const { themes } = useSystemConfig();
-  const { userID } = useParams();
+  const { userID } = useParams() as { userID: string };
   const { sessions } = props;
 
   const {
diff --git a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
index 9a6e4620cd..97b9d12f8a 100644
--- a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
@@ -139,7 +139,7 @@ const AccountDeletionConfigurationContent: React.FC<AccountDeletionConfiguration
 
 const AccountDeletionConfigurationScreen: React.FC =
   function AccountDeletionConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx b/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
index baba1b3435..e2972766fd 100644
--- a/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
@@ -247,7 +247,7 @@ const AdminAPIConfigurationScreenContent: React.FC<AdminAPIConfigurationScreenCo
 
 const AdminAPIConfigurationScreen: React.FC =
   function AdminAPIConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const queryResult = useAppAndSecretConfigQuery(appID);
 
     if (queryResult.loading) {
diff --git a/portal/src/graphql/portal/AnalyticsScreen.tsx b/portal/src/graphql/portal/AnalyticsScreen.tsx
index 190a6714b4..aa1ce06a04 100644
--- a/portal/src/graphql/portal/AnalyticsScreen.tsx
+++ b/portal/src/graphql/portal/AnalyticsScreen.tsx
@@ -116,7 +116,7 @@ const AnalyticsScreenContent: React.FC = function AnalyticsScreenContent() {
   const [periodical, setPeriodical] = useState<Periodical>(Periodical.Monthly);
 
   const { renderToString } = useContext(Context);
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const {
     loading,
     error,
diff --git a/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx b/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
index afeeeae4b5..764c2ef020 100644
--- a/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
@@ -416,7 +416,7 @@ const AnonymousUserConfigurationContent: React.FC<AnonymousUserConfigurationCont
 
 const AnonymousUserConfigurationScreen: React.FC =
   function AnonymousUserConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx b/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
index 8b18f33142..3a96dcfab0 100644
--- a/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
@@ -430,7 +430,7 @@ const OAuthClientConfigurationContent: React.FC<OAuthClientConfigurationContentP
 
 const ApplicationsConfigurationScreen: React.FC =
   function ApplicationsConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const { renderToString } = useContext(Context);
     const navigate = useNavigate();
 
diff --git a/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx b/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
index 0ffa69626c..f1104761dd 100644
--- a/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
@@ -679,7 +679,7 @@ const AuthenticationAuthenticatorSettingsContent: React.FC<AuthenticationAuthent
 
 const AuthenticatorConfigurationScreen: React.FC =
   function AuthenticatorConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     const featureConfig = useAppFeatureConfigQuery(appID);
diff --git a/portal/src/graphql/portal/BiometricConfigurationScreen.tsx b/portal/src/graphql/portal/BiometricConfigurationScreen.tsx
index 6663579548..da1d4d692a 100644
--- a/portal/src/graphql/portal/BiometricConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/BiometricConfigurationScreen.tsx
@@ -124,7 +124,7 @@ const BiometricConfigurationContent: React.FC<BiometricConfigurationContentProps
 
 const BiometricConfigurationScreen: React.FC =
   function BiometricConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx b/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
index 7be836650b..5312c1c98d 100644
--- a/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
+++ b/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
@@ -118,7 +118,7 @@ function CreateCustomAttributeContent(
 
 const CreateCustomAttributeScreen: React.FC =
   function CreateCustomAttributeScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const navigate = useNavigate();
 
     const afterSave = useCallback(() => {
diff --git a/portal/src/graphql/portal/CreateOAuthClientScreen.tsx b/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
index 867f4a1d6d..4d6957036f 100644
--- a/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
+++ b/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
@@ -183,7 +183,7 @@ const CreateOAuthClientContent: React.FC<CreateOAuthClientContentProps> =
   };
 
 const CreateOAuthClientScreen: React.FC = function CreateOAuthClientScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
   if (form.isLoading) {
diff --git a/portal/src/graphql/portal/CustomAttributesConfigurationScreen.tsx b/portal/src/graphql/portal/CustomAttributesConfigurationScreen.tsx
index 7935432adf..d5aea32648 100644
--- a/portal/src/graphql/portal/CustomAttributesConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/CustomAttributesConfigurationScreen.tsx
@@ -134,7 +134,7 @@ const CustomAttributesConfigurationScreenContent: React.FC<CustomAttributesConfi
 
 const CustomAttributesConfigurationScreen: React.FC =
   function CustomAttributesConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
     const navigate = useNavigate();
     const { renderToString } = useContext(Context);
diff --git a/portal/src/graphql/portal/CustomDomainListScreen.tsx b/portal/src/graphql/portal/CustomDomainListScreen.tsx
index f7bb06d497..cd9f20525b 100644
--- a/portal/src/graphql/portal/CustomDomainListScreen.tsx
+++ b/portal/src/graphql/portal/CustomDomainListScreen.tsx
@@ -135,7 +135,7 @@ function makeDomainListColumn(renderToString: (messageID: string) => string) {
 
 const AddDomainSection: React.FC = function AddDomainSection() {
   const { renderToString } = useContext(Context);
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
 
   const [newDomain, setNewDomain] = useState("");
   const { onChange: onNewDomainChange } = useTextField((value) => {
@@ -342,7 +342,7 @@ interface DeleteDomainDialogProps {
 const DeleteDomainDialog: React.FC<DeleteDomainDialogProps> =
   function DeleteDomainDialog(props: DeleteDomainDialogProps) {
     const { domain, domainID, visible, dismissDialog } = props;
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const { renderToString } = useContext(Context);
     const { themes } = useSystemConfig();
 
@@ -715,7 +715,7 @@ const CustomDomainListContent: React.FC<CustomDomainListContentProps> =
   };
 
 const CustomDomainListScreen: React.FC = function CustomDomainListScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
diff --git a/portal/src/graphql/portal/EditCustomAttributeScreen.tsx b/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
index 129089562e..0b57185819 100644
--- a/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
+++ b/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
@@ -137,7 +137,10 @@ function EditCustomAttributeContent(props: EditCustomAttributeContentProps) {
 
 const EditCustomAttributeScreen: React.FC =
   function EditCustomAttributeScreen() {
-    const { appID, index: indexString } = useParams();
+    const { appID, index: indexString } = useParams() as {
+      appID: string;
+      index: string;
+    };
     const navigate = useNavigate();
 
     const index = parseInt(indexString, 10);
diff --git a/portal/src/graphql/portal/EditOAuthClientScreen.tsx b/portal/src/graphql/portal/EditOAuthClientScreen.tsx
index cb02af9129..becb93ce99 100644
--- a/portal/src/graphql/portal/EditOAuthClientScreen.tsx
+++ b/portal/src/graphql/portal/EditOAuthClientScreen.tsx
@@ -124,7 +124,10 @@ const EditOAuthClientContent: React.FC<EditOAuthClientContentProps> =
   };
 
 const EditOAuthClientScreen: React.FC = function EditOAuthClientScreen() {
-  const { appID, clientID } = useParams();
+  const { appID, clientID } = useParams() as {
+    appID: string;
+    clientID: string;
+  };
   const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
   if (form.isLoading) {
diff --git a/portal/src/graphql/portal/ForgotPasswordConfigurationScreen.tsx b/portal/src/graphql/portal/ForgotPasswordConfigurationScreen.tsx
index 52fcb17a4c..52e3a36d0f 100644
--- a/portal/src/graphql/portal/ForgotPasswordConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/ForgotPasswordConfigurationScreen.tsx
@@ -92,7 +92,7 @@ const ForgotPasswordConfigurationScreenContent: React.FC<ForgotPasswordConfigura
 
 const ForgotPasswordConfigurationScreenScreen: React.FC =
   function ForgotPasswordConfigurationScreenScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/GetStartedScreen.tsx b/portal/src/graphql/portal/GetStartedScreen.tsx
index 2f77c7df02..1e0767bda2 100644
--- a/portal/src/graphql/portal/GetStartedScreen.tsx
+++ b/portal/src/graphql/portal/GetStartedScreen.tsx
@@ -353,7 +353,7 @@ interface GetStartedScreenContentProps {
 }
 
 function GetStartedScreenContent(props: GetStartedScreenContentProps) {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
 
   const {
@@ -443,7 +443,7 @@ function GetStartedScreenContent(props: GetStartedScreenContentProps) {
 }
 
 export default function GetStartedScreen(): React.ReactElement {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
 
   const {
     effectiveAppConfig,
diff --git a/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx b/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
index 30c7234fe8..c81b8bd006 100644
--- a/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
@@ -152,7 +152,7 @@ const GoogleTagManagerConfigurationContent: React.FC<GoogleTagManagerConfigurati
 
 const GoogleTagManagerConfigurationScreen: React.FC =
   function GoogleTagManagerConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/IntegrationsConfigurationScreen.tsx b/portal/src/graphql/portal/IntegrationsConfigurationScreen.tsx
index 9e13556dc1..508ff37d0c 100644
--- a/portal/src/graphql/portal/IntegrationsConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/IntegrationsConfigurationScreen.tsx
@@ -216,7 +216,7 @@ const IntegrationsConfigurationContent: React.FC<IntegrationsConfigurationConten
 
 const IntegrationsConfigurationScreen: React.FC =
   function IntegrationsConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/InviteAdminScreen.tsx b/portal/src/graphql/portal/InviteAdminScreen.tsx
index d927d2765c..cf997a9a0e 100644
--- a/portal/src/graphql/portal/InviteAdminScreen.tsx
+++ b/portal/src/graphql/portal/InviteAdminScreen.tsx
@@ -62,7 +62,7 @@ const InviteAdminContent: React.FC<InviteAdminContentProps> =
   };
 
 const InviteAdminScreen: React.FC = function InviteAdminScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
   const { createCollaboratorInvitation } =
     useCreateCollaboratorInvitationMutation(appID);
diff --git a/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx b/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx
index 171555c598..c71d0597b6 100644
--- a/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx
@@ -431,7 +431,7 @@ const ResourcesConfigurationContent: React.FC<ResourcesConfigurationContentProps
 
 const LocalizationConfigurationScreen: React.FC =
   function LocalizationConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const [selectedLanguage, setSelectedLanguage] =
       useState<LanguageTag | null>(null);
 
diff --git a/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx b/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
index 26c906a275..6cbc978cae 100644
--- a/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
@@ -1022,7 +1022,7 @@ const AuthenticationLoginIDSettingsContent: React.FC<AuthenticationLoginIDSettin
 
 const LoginIDConfigurationScreen: React.FC =
   function LoginIDConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const { renderToString } = useContext(Context);
 
     const config = useAppConfigForm(
diff --git a/portal/src/graphql/portal/PasswordPolicyConfigurationScreen.tsx b/portal/src/graphql/portal/PasswordPolicyConfigurationScreen.tsx
index 208b52a4ab..cebbe6c383 100644
--- a/portal/src/graphql/portal/PasswordPolicyConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/PasswordPolicyConfigurationScreen.tsx
@@ -423,7 +423,7 @@ const PasswordPolicyConfigurationScreenContent: React.FC<PasswordPolicyConfigura
 
 const PasswordPolicyConfigurationScreen: React.FC =
   function PasswordPolicyConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/PortalAdminsSettings.tsx b/portal/src/graphql/portal/PortalAdminsSettings.tsx
index 10d9026232..3a43a5c8b0 100644
--- a/portal/src/graphql/portal/PortalAdminsSettings.tsx
+++ b/portal/src/graphql/portal/PortalAdminsSettings.tsx
@@ -25,7 +25,7 @@ import NavBreadcrumb, { BreadcrumbItem } from "../../NavBreadcrumb";
 
 const PortalAdminsSettings: React.FC = function PortalAdminsSettings() {
   const { renderToString } = useContext(Context);
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
 
   const {
diff --git a/portal/src/graphql/portal/ProjectRootScreen.tsx b/portal/src/graphql/portal/ProjectRootScreen.tsx
index b9ec7a4ba9..2cf47f7fc8 100644
--- a/portal/src/graphql/portal/ProjectRootScreen.tsx
+++ b/portal/src/graphql/portal/ProjectRootScreen.tsx
@@ -10,7 +10,7 @@ import { client } from "./apollo";
 import ShowLoading from "../../ShowLoading";
 
 const ProjectRootScreen: React.FC = function ProjectRootScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const { analyticEnabled } = useSystemConfig();
   const navigate = useNavigate();
   const queryResult = useQuery<ScreenNavQueryQuery>(ScreenNavQueryDocument, {
diff --git a/portal/src/graphql/portal/ProjectWizardDoneScreen.tsx b/portal/src/graphql/portal/ProjectWizardDoneScreen.tsx
index 1f62539e32..c8dd468e52 100644
--- a/portal/src/graphql/portal/ProjectWizardDoneScreen.tsx
+++ b/portal/src/graphql/portal/ProjectWizardDoneScreen.tsx
@@ -98,7 +98,7 @@ interface ProjectWizardDoneContentProps {
 
 const ProjectWizardDoneContent: React.FC<ProjectWizardDoneContentProps> =
   function ProjectWizardDoneContent(props) {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
 
     const { config } = props;
 
@@ -189,7 +189,7 @@ const ProjectWizardDoneContent: React.FC<ProjectWizardDoneContentProps> =
   };
 
 const ProjectWizardDoneScreen: React.FC = function ProjectWizardDoneScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
 
   const { effectiveAppConfig, loading } = useAppAndSecretConfigQuery(appID);
 
diff --git a/portal/src/graphql/portal/ProjectWizardScreen.tsx b/portal/src/graphql/portal/ProjectWizardScreen.tsx
index 181f376b62..cf67568b68 100644
--- a/portal/src/graphql/portal/ProjectWizardScreen.tsx
+++ b/portal/src/graphql/portal/ProjectWizardScreen.tsx
@@ -367,7 +367,7 @@ function Step3(props: StepProps) {
 }
 
 export default function ProjectWizardScreen(): React.ReactElement {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
   const form = useAppConfigForm(appID, constructFromState, constructConfig);
   const {
diff --git a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
index 4f77062cf5..5bb6520e8d 100644
--- a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
@@ -609,7 +609,7 @@ const SMTPConfigurationScreenContent: React.FC<SMTPConfigurationScreenContentPro
   };
 
 const SMTPConfigurationScreen: React.FC = function SMTPConfigurationScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const form = useAppSecretConfigForm(
     appID,
     constructFormState,
diff --git a/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx b/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
index 7e8cd70cc9..9f43090c09 100644
--- a/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
@@ -313,7 +313,7 @@ const SingleSignOnConfigurationContent: React.FC<SingleSignOnConfigurationConten
 
 const SingleSignOnConfigurationScreen: React.FC =
   function SingleSignOnConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
 
     const form = useAppSecretConfigForm(
       appID,
diff --git a/portal/src/graphql/portal/StandardAttributesConfigurationScreen.tsx b/portal/src/graphql/portal/StandardAttributesConfigurationScreen.tsx
index 82ce33cfde..0817da3729 100644
--- a/portal/src/graphql/portal/StandardAttributesConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/StandardAttributesConfigurationScreen.tsx
@@ -155,7 +155,7 @@ const StandardAttributesConfigurationScreenContent: React.FC<StandardAttributesC
 
 const StandardAttributesConfigurationScreen: React.FC =
   function StandardAttributesConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     if (form.isLoading) {
diff --git a/portal/src/graphql/portal/SubscriptionScreen.tsx b/portal/src/graphql/portal/SubscriptionScreen.tsx
index 6165925f30..8d9ce48fe4 100644
--- a/portal/src/graphql/portal/SubscriptionScreen.tsx
+++ b/portal/src/graphql/portal/SubscriptionScreen.tsx
@@ -165,7 +165,7 @@ const SubscriptionPlanFeatures: React.FC = function SubscriptionPlanFeatures() {
 };
 
 const SubscriptionScreen: React.FC = function SubscriptionScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const featureConfig = useAppFeatureConfigQuery(appID);
 
   const planName = useMemo(
diff --git a/portal/src/graphql/portal/UISettingsScreen.tsx b/portal/src/graphql/portal/UISettingsScreen.tsx
index bab635ccc7..3ff87c26b6 100644
--- a/portal/src/graphql/portal/UISettingsScreen.tsx
+++ b/portal/src/graphql/portal/UISettingsScreen.tsx
@@ -848,7 +848,7 @@ const ResourcesConfigurationContent: React.FC<ResourcesConfigurationContentProps
   };
 
 const UISettingsScreen: React.FC = function UISettingsScreen() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const [selectedLanguage, setSelectedLanguage] = useState<LanguageTag | null>(
     null
   );
diff --git a/portal/src/graphql/portal/VerificationConfigurationScreen.tsx b/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
index 09425e37d4..adb3307589 100644
--- a/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
@@ -272,7 +272,7 @@ const VerificationConfigurationContent: React.FC<VerificationConfigurationConten
 
 const VerificationConfigurationScreen: React.FC =
   function VerificationConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
 
     const featureConfig = useAppFeatureConfigQuery(appID);
diff --git a/portal/src/graphql/portal/VerifyDomainScreen.tsx b/portal/src/graphql/portal/VerifyDomainScreen.tsx
index 2e588da77a..73f3be8ae2 100644
--- a/portal/src/graphql/portal/VerifyDomainScreen.tsx
+++ b/portal/src/graphql/portal/VerifyDomainScreen.tsx
@@ -115,7 +115,7 @@ const VerifyDomain: React.FC<VerifyDomainProps> = function VerifyDomain(
 ) {
   const { domain, nonCustomVerifiedDomain } = props;
   const navigate = useNavigate();
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
 
   const { renderToString } = useContext(Context);
 
@@ -224,7 +224,10 @@ const VerifyDomain: React.FC<VerifyDomainProps> = function VerifyDomain(
 };
 
 const VerifyDomainScreen: React.FC = function VerifyDomainScreen() {
-  const { appID, domainID } = useParams();
+  const { appID, domainID } = useParams() as {
+    appID: string;
+    domainID: string;
+  };
   const { domains, loading, error, refetch } = useDomainsQuery(appID);
   const { renderToString } = useContext(Context);
 
diff --git a/portal/src/graphql/portal/WebhookConfigurationScreen.tsx b/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
index 70e0c510e3..a0abbd8b7f 100644
--- a/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
@@ -547,7 +547,7 @@ const WebhookConfigurationScreenContent: React.FC<WebhookConfigurationScreenCont
 
 const WebhookConfigurationScreen: React.FC =
   function WebhookConfigurationScreen() {
-    const { appID } = useParams();
+    const { appID } = useParams() as { appID: string };
     const form = useAppSecretConfigForm(
       appID,
       constructFormState,

From 4383576ea672b5eb1d88a66e8ed32ca12314a4d8 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Fri, 17 Jun 2022 16:15:33 +0800
Subject: [PATCH 6/8] Convert Routes structure to tree

---
 portal/src/AppRoot.tsx  | 297 +++++++++++++++++++++-------------------
 portal/src/ReactApp.tsx | 108 ++++++++-------
 2 files changed, 212 insertions(+), 193 deletions(-)

diff --git a/portal/src/AppRoot.tsx b/portal/src/AppRoot.tsx
index 60ff6d54a1..77efaa34ec 100644
--- a/portal/src/AppRoot.tsx
+++ b/portal/src/AppRoot.tsx
@@ -52,7 +52,7 @@ import IntegrationsConfigurationScreen from "./graphql/portal/IntegrationsConfig
 import GoogleTagManagerConfigurationScreen from "./graphql/portal/GoogleTagManagerConfigurationScreen";
 
 const AppRoot: React.FC = function AppRoot() {
-  const { appID } = useParams();
+  const { appID } = useParams() as { appID: string };
   const client = useMemo(() => {
     return makeClient(appID);
   }, [appID]);
@@ -77,148 +77,159 @@ const AppRoot: React.FC = function AppRoot() {
     <ApolloProvider client={client}>
       <ScreenLayout>
         <Routes>
-          <Route path="/" element={<ProjectRootScreen />} />
-          <Route path="/getting-started" element={<GetStartedScreen />} />
-          <Route path="/analytics" element={<AnalyticsScreen />} />
-          <Route path="/users/" element={<UsersScreen />} />
-          <Route path="/users/add-user/" element={<AddUserScreen />} />
-          <Route
-            path="/users/:userID/"
-            element={<Navigate to="details/" replace={true} />}
-          />
-          <Route
-            path="/users/:userID/details/"
-            element={<UserDetailsScreen />}
-          />
-          <Route
-            path="/users/:userID/details/add-email"
-            element={<AddEmailScreen />}
-          />
-          <Route
-            path="/users/:userID/details/add-phone"
-            element={<AddPhoneScreen />}
-          />
-          <Route
-            path="/users/:userID/details/add-username"
-            element={<AddUsernameScreen />}
-          />
-          <Route
-            path="/users/:userID/details/reset-password"
-            element={<ResetPasswordScreen />}
-          />
-          <Route
-            path="/users/:userID/details/edit-picture"
-            element={<EditPictureScreen />}
-          />
-          <Route
-            path="/configuration/authentication/login-id"
-            element={<LoginIDConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/authentication/authenticators"
-            element={<AuthenticatorConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/authentication/verification"
-            element={<VerificationConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/anonymous-users"
-            element={<AnonymousUsersConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/biometric"
-            element={<BiometricConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/single-sign-on"
-            element={<SingleSignOnConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/password-policy"
-            element={<PasswordPolicyConfigurationScreen />}
-          />
-          <Route
-            path="/advanced/password-reset-code"
-            element={<ForgotPasswordConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/apps"
-            element={<ApplicationsConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/apps/add"
-            element={<CreateOAuthClientScreen />}
-          />
-          <Route
-            path="/configuration/apps/:clientID/edit"
-            element={<EditOAuthClientScreen />}
-          />
-          <Route path="/custom-domains" element={<CustomDomainListScreen />} />
-          <Route
-            path="/custom-domains/:domainID/verify"
-            element={<VerifyDomainScreen />}
-          />
-          <Route
-            path="/configuration/smtp"
-            element={<SMTPConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/ui-settings"
-            element={<UISettingsScreen />}
-          />
-          <Route
-            path="/configuration/localization"
-            element={<LocalizationConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/user-profile/standard-attributes"
-            element={<StandardAttributesConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/user-profile/custom-attributes"
-            element={<CustomAttributesConfigurationScreen />}
-          />
-          <Route
-            path="/configuration/user-profile/custom-attributes/:index/edit"
-            element={<EditCustomAttributeScreen />}
-          />
-          <Route
-            path="/configuration/user-profile/custom-attributes/add"
-            element={<CreateCustomAttributeScreen />}
-          />
-          <Route
-            path="/integrations"
-            element={<IntegrationsConfigurationScreen />}
-          />
-          <Route
-            path="/integrations/google-tag-manager"
-            element={<GoogleTagManagerConfigurationScreen />}
-          />
-          <Route path="/portal-admins" element={<PortalAdminsSettings />} />
-          <Route path="/portal-admins/invite" element={<InviteAdminScreen />} />
-          <Route
-            path="/advanced/webhooks"
-            element={<WebhookConfigurationScreen />}
-          />
-          <Route path="/billing" element={<SubscriptionScreen />} />
-          <Route
-            path="/advanced/admin-api"
-            element={<AdminAPIConfigurationScreen />}
-          />
-          <Route
-            path="/advanced/account-deletion"
-            element={<AccountDeletionConfigurationScreen />}
-          />
-          <Route path="/audit-log/" element={<AuditLogScreen />} />
-          <Route
-            path="/audit-log/:logID/"
-            element={<Navigate to="details/" replace={true} />}
-          />
-          <Route
-            path="/audit-log/:logID/details/"
-            element={<AuditLogEntryScreen />}
-          />
+          <Route index={true} element={<ProjectRootScreen />} />
+
+          <Route path="getting-started">
+            <Route index={true} element={<GetStartedScreen />} />
+          </Route>
+
+          <Route path="analytics">
+            <Route index={true} element={<AnalyticsScreen />} />
+          </Route>
+
+          <Route path="users">
+            <Route index={true} element={<UsersScreen />} />
+            <Route path="add-user" element={<AddUserScreen />} />
+            <Route path=":userID">
+              <Route
+                index={true}
+                element={<Navigate to="details" replace={true} />}
+              />
+              <Route path="details">
+                <Route index={true} element={<UserDetailsScreen />} />
+                <Route path="add-email" element={<AddEmailScreen />} />
+                <Route path="add-phone" element={<AddPhoneScreen />} />
+                <Route path="add-username" element={<AddUsernameScreen />} />
+                <Route
+                  path="reset-password"
+                  element={<ResetPasswordScreen />}
+                />
+                <Route path="edit-picture" element={<EditPictureScreen />} />
+              </Route>
+            </Route>
+          </Route>
+
+          <Route path="custom-domains">
+            <Route index={true} element={<CustomDomainListScreen />} />
+            <Route path=":domainID">
+              <Route
+                index={true}
+                element={<Navigate to="verify" replace={true} />}
+              />
+              <Route path="verify" element={<VerifyDomainScreen />} />
+            </Route>
+          </Route>
+
+          <Route path="configuration">
+            <Route path="authentication">
+              <Route path="login-id" element={<LoginIDConfigurationScreen />} />
+              <Route
+                path="authenticators"
+                element={<AuthenticatorConfigurationScreen />}
+              />
+              <Route
+                path="verification"
+                element={<VerificationConfigurationScreen />}
+              />
+            </Route>
+            <Route
+              path="anonymous-users"
+              element={<AnonymousUsersConfigurationScreen />}
+            />
+            <Route
+              path="biometric"
+              element={<BiometricConfigurationScreen />}
+            />
+            <Route
+              path="single-sign-on"
+              element={<SingleSignOnConfigurationScreen />}
+            />
+            <Route
+              path="password-policy"
+              element={<PasswordPolicyConfigurationScreen />}
+            />
+            <Route path="apps">
+              <Route
+                index={true}
+                element={<ApplicationsConfigurationScreen />}
+              />
+              <Route path="add" element={<CreateOAuthClientScreen />} />
+              <Route path=":clientID">
+                <Route
+                  index={true}
+                  element={<Navigate to="edit" replace={true} />}
+                />
+                <Route path="edit" element={<EditOAuthClientScreen />} />
+              </Route>
+            </Route>
+            <Route path="smtp" element={<SMTPConfigurationScreen />} />
+            <Route path="ui-settings" element={<UISettingsScreen />} />
+            <Route
+              path="localization"
+              element={<LocalizationConfigurationScreen />}
+            />
+            <Route path="user-profile">
+              <Route
+                path="standard-attributes"
+                element={<StandardAttributesConfigurationScreen />}
+              />
+              <Route path="custom-attributes">
+                <Route
+                  index={true}
+                  element={<CustomAttributesConfigurationScreen />}
+                />
+                <Route path="add" element={<CreateCustomAttributeScreen />} />
+                <Route path=":index">
+                  <Route
+                    index={true}
+                    element={<Navigate to="edit" replace={true} />}
+                  />
+                  <Route path="edit" element={<EditCustomAttributeScreen />} />
+                </Route>
+              </Route>
+            </Route>
+          </Route>
+
+          <Route path="integrations">
+            <Route index={true} element={<IntegrationsConfigurationScreen />} />
+            <Route
+              path="google-tag-manager"
+              element={<GoogleTagManagerConfigurationScreen />}
+            />
+          </Route>
+
+          <Route path="billing">
+            <Route index={true} element={<SubscriptionScreen />} />
+          </Route>
+
+          <Route path="advanced">
+            <Route path="webhooks" element={<WebhookConfigurationScreen />} />
+            <Route path="admin-api" element={<AdminAPIConfigurationScreen />} />
+            <Route
+              path="account-deletion"
+              element={<AccountDeletionConfigurationScreen />}
+            />
+            <Route
+              path="password-reset-code"
+              element={<ForgotPasswordConfigurationScreen />}
+            />
+          </Route>
+
+          <Route path="audit-log">
+            <Route index={true} element={<AuditLogScreen />} />
+            <Route path=":logID">
+              <Route
+                index={true}
+                element={<Navigate to="details" replace={true} />}
+              />
+              <Route path="details" element={<AuditLogEntryScreen />} />
+            </Route>
+          </Route>
+
+          <Route path="portal-admins">
+            <Route index={true} element={<PortalAdminsSettings />} />
+            <Route path="invite" element={<InviteAdminScreen />} />
+          </Route>
         </Routes>
       </ScreenLayout>
     </ApolloProvider>
diff --git a/portal/src/ReactApp.tsx b/portal/src/ReactApp.tsx
index 702c7d2470..ea78cbf0cf 100644
--- a/portal/src/ReactApp.tsx
+++ b/portal/src/ReactApp.tsx
@@ -55,63 +55,71 @@ const ReactAppRoutes: React.FC = function ReactAppRoutes() {
     <BrowserRouter>
       <Routes>
         <Route
-          path="/"
+          index={true}
           element={
             <Authenticated>
-              <Navigate to="projects/" replace={true} />
-            </Authenticated>
-          }
-        />
-        <Route
-          path="/projects/"
-          element={
-            <Authenticated>
-              <AppsScreen />
-            </Authenticated>
-          }
-        />
-        <Route
-          path="/projects/create"
-          element={
-            <Authenticated>
-              <CreateProjectScreen />
-            </Authenticated>
-          }
-        />
-        <Route
-          path="/project/:appID/*"
-          element={
-            <Authenticated>
-              <AppRoot />
-            </Authenticated>
-          }
-        />
-        <Route
-          path="/project/:appID/wizard/*"
-          element={
-            <Authenticated>
-              <ProjectWizardScreen />
-            </Authenticated>
-          }
-        />
-        <Route
-          path="/project/:appID/wizard/done"
-          element={
-            <Authenticated>
-              <ProjectWizardDoneScreen />
+              <Navigate to="/projects" replace={true} />
             </Authenticated>
           }
         />
+        <Route path="/projects">
+          <Route
+            index={true}
+            element={
+              <Authenticated>
+                <AppsScreen />
+              </Authenticated>
+            }
+          />
+          <Route
+            path="create"
+            element={
+              <Authenticated>
+                <CreateProjectScreen />
+              </Authenticated>
+            }
+          />
+        </Route>
+
+        <Route path="/project">
+          <Route path=":appID">
+            <Route
+              // @ts-expect-error
+              index={true}
+              path="*"
+              element={
+                <Authenticated>
+                  <AppRoot />
+                </Authenticated>
+              }
+            />
+            <Route path="wizard">
+              <Route
+                // @ts-expect-error
+                index={true}
+                path="*"
+                element={
+                  <Authenticated>
+                    <ProjectWizardScreen />
+                  </Authenticated>
+                }
+              />
+              <Route
+                path="done"
+                element={
+                  <Authenticated>
+                    <ProjectWizardDoneScreen />
+                  </Authenticated>
+                }
+              />
+            </Route>
+          </Route>
+        </Route>
+
         <Route path="/oauth-redirect" element={<OAuthRedirect />} />
+
         <Route path="/onboarding-redirect" element={<OnboardingRedirect />} />
-        <Route
-          path="/"
-          element={
-            <Authenticated>
-              <Navigate to="projects/" replace={true} />
-            </Authenticated>
-          }
-        />
+
         <Route
           path="/collaborators/invitation"
           element={<AcceptAdminInvitationScreen />}

From 158431913a45ec4c93dbb648d1e6f4d393eb4dd2 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Tue, 21 Jun 2022 15:40:36 +0800
Subject: [PATCH 7/8] Correct url link

---
 portal/src/graphql/adminapi/AddEmailScreen.tsx       |  4 ++--
 portal/src/graphql/adminapi/AddIdentityForm.tsx      |  2 +-
 portal/src/graphql/adminapi/AddPhoneScreen.tsx       |  4 ++--
 portal/src/graphql/adminapi/AddUserScreen.tsx        |  4 ++--
 portal/src/graphql/adminapi/AddUsernameScreen.tsx    |  4 ++--
 portal/src/graphql/adminapi/AuditLogEntryScreen.tsx  |  4 ++--
 portal/src/graphql/adminapi/AuditLogList.tsx         |  4 ++--
 portal/src/graphql/adminapi/AuditLogScreen.tsx       |  2 +-
 portal/src/graphql/adminapi/EditPictureScreen.tsx    | 10 +++++-----
 portal/src/graphql/adminapi/ResetPasswordScreen.tsx  |  6 +++---
 portal/src/graphql/adminapi/UserDetailsScreen.tsx    |  4 ++--
 .../portal/AnonymousUsersConfigurationScreen.tsx     |  2 +-
 .../portal/ApplicationsConfigurationScreen.tsx       |  4 ++--
 .../portal/AuthenticatorConfigurationScreen.tsx      |  4 ++--
 .../graphql/portal/CreateCustomAttributeScreen.tsx   |  4 ++--
 .../src/graphql/portal/CreateOAuthClientScreen.tsx   |  6 +++---
 portal/src/graphql/portal/CustomDomainListScreen.tsx |  2 +-
 .../src/graphql/portal/EditCustomAttributeScreen.tsx |  4 ++--
 portal/src/graphql/portal/EditOAuthClientScreen.tsx  |  2 +-
 portal/src/graphql/portal/GetStartedScreen.tsx       | 12 ++++++------
 .../portal/GoogleTagManagerConfigurationScreen.tsx   |  2 +-
 portal/src/graphql/portal/InviteAdminScreen.tsx      |  4 ++--
 .../graphql/portal/LoginIDConfigurationScreen.tsx    |  2 +-
 portal/src/graphql/portal/ModifyOAuthClientForm.tsx  |  2 +-
 portal/src/graphql/portal/ProjectWizardScreen.tsx    |  4 ++--
 .../portal/SingleSignOnConfigurationScreen.tsx       |  2 +-
 .../portal/SingleSignOnConfigurationWidget.tsx       |  2 +-
 portal/src/graphql/portal/UISettingsScreen.tsx       |  2 +-
 .../portal/VerificationConfigurationScreen.tsx       |  2 +-
 portal/src/graphql/portal/VerifyDomainScreen.tsx     |  4 ++--
 .../graphql/portal/WebhookConfigurationScreen.tsx    |  8 ++++----
 31 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/portal/src/graphql/adminapi/AddEmailScreen.tsx b/portal/src/graphql/adminapi/AddEmailScreen.tsx
index 0224b25ae6..78dd6f7146 100644
--- a/portal/src/graphql/adminapi/AddEmailScreen.tsx
+++ b/portal/src/graphql/adminapi/AddEmailScreen.tsx
@@ -64,8 +64,8 @@ const AddEmailScreen: React.FC = function AddEmailScreen() {
 
   const navBreadcrumbItems = useMemo(() => {
     return [
-      { to: "../../..", label: <FormattedMessage id="UsersScreen.title" /> },
-      { to: "..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
+      { to: "./../../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       { to: ".", label: <FormattedMessage id="AddEmailScreen.title" /> },
     ];
   }, []);
diff --git a/portal/src/graphql/adminapi/AddIdentityForm.tsx b/portal/src/graphql/adminapi/AddIdentityForm.tsx
index e1170fce4f..96f0b666f8 100644
--- a/portal/src/graphql/adminapi/AddIdentityForm.tsx
+++ b/portal/src/graphql/adminapi/AddIdentityForm.tsx
@@ -173,7 +173,7 @@ const AddIdentityForm: React.FC<AddIdentityFormProps> =
 
     useEffect(() => {
       if (form.isSubmitted) {
-        navigate("..#connected-identities");
+        navigate("./..#connected-identities");
       }
     }, [form.isSubmitted, navigate]);
 
diff --git a/portal/src/graphql/adminapi/AddPhoneScreen.tsx b/portal/src/graphql/adminapi/AddPhoneScreen.tsx
index a6aa7b935b..3de39f5cdb 100644
--- a/portal/src/graphql/adminapi/AddPhoneScreen.tsx
+++ b/portal/src/graphql/adminapi/AddPhoneScreen.tsx
@@ -83,8 +83,8 @@ const AddPhoneScreen: React.FC = function AddPhoneScreen() {
 
   const navBreadcrumbItems = useMemo(() => {
     return [
-      { to: "../../..", label: <FormattedMessage id="UsersScreen.title" /> },
-      { to: "..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
+      { to: "./../../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       { to: ".", label: <FormattedMessage id="AddPhoneScreen.title" /> },
     ];
   }, []);
diff --git a/portal/src/graphql/adminapi/AddUserScreen.tsx b/portal/src/graphql/adminapi/AddUserScreen.tsx
index 1def8f5436..54b8f8f75a 100644
--- a/portal/src/graphql/adminapi/AddUserScreen.tsx
+++ b/portal/src/graphql/adminapi/AddUserScreen.tsx
@@ -142,7 +142,7 @@ const AddUserContent: React.FC<AddUserContentProps> = function AddUserContent(
 
   const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
     return [
-      { to: "../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UsersScreen.title" /> },
       { to: ".", label: <FormattedMessage id="AddUserScreen.title" /> },
     ];
   }, []);
@@ -366,7 +366,7 @@ const AddUserScreen: React.FC = function AddUserScreen() {
 
   useEffect(() => {
     if (form.isSubmitted) {
-      navigate("..");
+      navigate("./..");
     }
   }, [form.isSubmitted, navigate]);
 
diff --git a/portal/src/graphql/adminapi/AddUsernameScreen.tsx b/portal/src/graphql/adminapi/AddUsernameScreen.tsx
index e49f25bf6b..2e85181642 100644
--- a/portal/src/graphql/adminapi/AddUsernameScreen.tsx
+++ b/portal/src/graphql/adminapi/AddUsernameScreen.tsx
@@ -67,8 +67,8 @@ const AddUsernameScreen: React.FC = function AddUsernameScreen() {
 
   const navBreadcrumbItems = useMemo(() => {
     return [
-      { to: "../../..", label: <FormattedMessage id="UsersScreen.title" /> },
-      { to: "..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
+      { to: "./../../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       { to: ".", label: <FormattedMessage id="AddUsernameScreen.title" /> },
     ];
   }, []);
diff --git a/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx b/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
index acd27ce730..f2ab43468e 100644
--- a/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
+++ b/portal/src/graphql/adminapi/AuditLogEntryScreen.tsx
@@ -62,10 +62,10 @@ const AuditLogEntryScreen: React.FC = function AuditLogEntryScreen() {
   const navBreadcrumbItems = useMemo(() => {
     return [
       {
-        to: `../..?${state.searchParams ?? ""}`,
+        to: `./../..?${state.searchParams ?? ""}`,
         label: <FormattedMessage id="AuditLogScreen.title" />,
       },
-      { to: "./", label: <FormattedMessage id="AuditLogEntryScreen.title" /> },
+      { to: ".", label: <FormattedMessage id="AuditLogEntryScreen.title" /> },
     ];
   }, [state]);
 
diff --git a/portal/src/graphql/adminapi/AuditLogList.tsx b/portal/src/graphql/adminapi/AuditLogList.tsx
index d482714c15..4ff855fb7d 100644
--- a/portal/src/graphql/adminapi/AuditLogList.tsx
+++ b/portal/src/graphql/adminapi/AuditLogList.tsx
@@ -144,12 +144,12 @@ const AuditLogList: React.FC<AuditLogListProps> = function AuditLogList(props) {
       const state: any = {};
       switch (column?.key) {
         case "activityType":
-          href = `${item.id}/details`;
+          href = `./${item.id}/details`;
           state["searchParams"] = searchParams;
           break;
         case "rawUserID":
           if (item.userID != null) {
-            href = `../users/${item.userID}/details/`;
+            href = `./../users/${item.userID}/details`;
           }
           break;
         default:
diff --git a/portal/src/graphql/adminapi/AuditLogScreen.tsx b/portal/src/graphql/adminapi/AuditLogScreen.tsx
index b33d491e30..dd1224df1c 100644
--- a/portal/src/graphql/adminapi/AuditLogScreen.tsx
+++ b/portal/src/graphql/adminapi/AuditLogScreen.tsx
@@ -472,7 +472,7 @@ const AuditLogScreen: React.FC = function AuditLogScreen() {
                 <FormattedMessage
                   id="FeatureConfig.audit-log.retrieval-days"
                   values={{
-                    planPagePath: "../billing",
+                    planPagePath: "./../billing",
                     logRetrievalDays: logRetrievalDays,
                   }}
                 />
diff --git a/portal/src/graphql/adminapi/EditPictureScreen.tsx b/portal/src/graphql/adminapi/EditPictureScreen.tsx
index 8e6b5a3d8d..15ef653659 100644
--- a/portal/src/graphql/adminapi/EditPictureScreen.tsx
+++ b/portal/src/graphql/adminapi/EditPictureScreen.tsx
@@ -125,8 +125,8 @@ function EditPictureScreenContent(props: EditPictureScreenContentProps) {
   const uploadedURLRef = useRef<string | null>(null);
   const navBreadcrumbItems = useMemo(() => {
     return [
-      { to: "../../..", label: <FormattedMessage id="UsersScreen.title" /> },
-      { to: "..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
+      { to: "./../../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       { to: ".", label: <FormattedMessage id="EditPictureScreen.title" /> },
     ];
   }, []);
@@ -188,7 +188,7 @@ function EditPictureScreenContent(props: EditPictureScreenContentProps) {
     save().then(
       () => {
         setIsRemoveDialogVisible(false);
-        navigate("..", { replace: true });
+        navigate("./..", { replace: true });
       },
       () => {
         setIsRemoveDialogVisible(false);
@@ -278,7 +278,7 @@ function EditPictureScreenContent(props: EditPictureScreenContentProps) {
       uploadedURLRef.current = url;
       save().then(
         () => {
-          navigate("..", { replace: true });
+          navigate("./..", { replace: true });
         },
         () => {}
       );
@@ -447,7 +447,7 @@ const EditPictureScreen: React.FC = function EditPictureScreen() {
 
   useEffect(() => {
     if (!profileImageEditable) {
-      navigate("..");
+      navigate("./..");
     }
   }, [navigate, profileImageEditable]);
 
diff --git a/portal/src/graphql/adminapi/ResetPasswordScreen.tsx b/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
index 558f8969be..7572a0ced1 100644
--- a/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
+++ b/portal/src/graphql/adminapi/ResetPasswordScreen.tsx
@@ -44,8 +44,8 @@ const ResetPasswordContent: React.FC<ResetPasswordContentProps> = function (
 
   const navBreadcrumbItems = useMemo(() => {
     return [
-      { to: "../../..", label: <FormattedMessage id="UsersScreen.title" /> },
-      { to: "..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
+      { to: "./../../..", label: <FormattedMessage id="UsersScreen.title" /> },
+      { to: "./..", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       { to: ".", label: <FormattedMessage id="ResetPasswordScreen.title" /> },
     ];
   }, []);
@@ -127,7 +127,7 @@ const ResetPasswordScreen: React.FC = function ResetPasswordScreen() {
 
   useEffect(() => {
     if (form.isSubmitted) {
-      navigate("..#account-security");
+      navigate("./..#account-security");
     }
   }, [form.isSubmitted, navigate]);
 
diff --git a/portal/src/graphql/adminapi/UserDetailsScreen.tsx b/portal/src/graphql/adminapi/UserDetailsScreen.tsx
index b7e750c83b..7309d5375f 100644
--- a/portal/src/graphql/adminapi/UserDetailsScreen.tsx
+++ b/portal/src/graphql/adminapi/UserDetailsScreen.tsx
@@ -434,7 +434,7 @@ const UserDetailsScreenContent: React.FC<UserDetailsScreenContentProps> =
 
     const navBreadcrumbItems = React.useMemo(() => {
       return [
-        { to: "../..", label: <FormattedMessage id="UsersScreen.title" /> },
+        { to: "./../..", label: <FormattedMessage id="UsersScreen.title" /> },
         { to: ".", label: <FormattedMessage id="UserDetailsScreen.title" /> },
       ];
     }, []);
@@ -445,7 +445,7 @@ const UserDetailsScreenContent: React.FC<UserDetailsScreenContentProps> =
       (deletedUser: boolean) => {
         setDeleteUserDialogIsHidden(true);
         if (deletedUser) {
-          setTimeout(() => navigate("../.."), 0);
+          setTimeout(() => navigate("./../.."), 0);
         }
       },
       [navigate]
diff --git a/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx b/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
index 764c2ef020..bad6b0b24c 100644
--- a/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AnonymousUsersConfigurationScreen.tsx
@@ -325,7 +325,7 @@ const AnonymousUserLifeTimeDescription: React.FC<AnonymousUserLifeTimeDescriptio
           <FormattedMessage
             id="AnonymousUsersConfigurationScreen.user-lifetime.go-to-applications.description"
             values={{
-              applicationsPath: "../apps",
+              applicationsPath: "./../apps",
             }}
           />
         </Text>
diff --git a/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx b/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
index 3a96dcfab0..023a83624f 100644
--- a/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/ApplicationsConfigurationScreen.tsx
@@ -399,7 +399,7 @@ const OAuthClientConfigurationContent: React.FC<OAuthClientConfigurationContentP
               id="ApplicationsConfigurationScreen.client-endpoint.desc"
               values={{
                 clientEndpoint: state.publicOrigin,
-                dnsUrl: "../../custom-domains",
+                dnsUrl: "./../../custom-domains",
               }}
             />
           </Text>
@@ -408,7 +408,7 @@ const OAuthClientConfigurationContent: React.FC<OAuthClientConfigurationContentP
               <FormattedMessage
                 id="FeatureConfig.oauth-clients.maximum"
                 values={{
-                  planPagePath: "../../billing",
+                  planPagePath: "./../../billing",
                   maximum: oauthClientsMaximum,
                 }}
               />
diff --git a/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx b/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
index f1104761dd..35c16869e4 100644
--- a/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AuthenticatorConfigurationScreen.tsx
@@ -576,7 +576,7 @@ const AuthenticationAuthenticatorSettingsContent: React.FC<AuthenticationAuthent
               <FormattedMessage
                 id="FeatureConfig.disabled"
                 values={{
-                  planPagePath: "../../../billing",
+                  planPagePath: "./../../../billing",
                 }}
               />
             </MessageBar>
@@ -610,7 +610,7 @@ const AuthenticationAuthenticatorSettingsContent: React.FC<AuthenticationAuthent
                 <FormattedMessage
                   id="FeatureConfig.disabled"
                   values={{
-                    planPagePath: "../../../billing",
+                    planPagePath: "./../../../billing",
                   }}
                 />
               </MessageBar>
diff --git a/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx b/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
index 5312c1c98d..417bcfc01c 100644
--- a/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
+++ b/portal/src/graphql/portal/CreateCustomAttributeScreen.tsx
@@ -81,7 +81,7 @@ function CreateCustomAttributeContent(
   const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
     return [
       {
-        to: "..",
+        to: "./..",
         label: (
           <FormattedMessage id="CustomAttributesConfigurationScreen.title" />
         ),
@@ -122,7 +122,7 @@ const CreateCustomAttributeScreen: React.FC =
     const navigate = useNavigate();
 
     const afterSave = useCallback(() => {
-      navigate("..");
+      navigate("./..");
     }, [navigate]);
 
     const form = useAppConfigForm(appID, constructFormState, constructConfig);
diff --git a/portal/src/graphql/portal/CreateOAuthClientScreen.tsx b/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
index 4d6957036f..0999d0777e 100644
--- a/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
+++ b/portal/src/graphql/portal/CreateOAuthClientScreen.tsx
@@ -43,7 +43,7 @@ const errorRules = [
     /^\/oauth\/clients$/,
     "error.client-quota-exceeded",
     {
-      to: "../../../billing",
+      to: "./../../../billing",
     }
   ),
 ];
@@ -100,7 +100,7 @@ const CreateClientSuccessDialog: React.FC<CreateClientSuccessDialogProps> =
     });
 
     const onConfirmCreateClientSuccess = useCallback(() => {
-      navigate(`../${encodeURIComponent(clientId)}/edit`);
+      navigate(`./../${encodeURIComponent(clientId)}/edit`);
     }, [navigate, clientId]);
 
     return (
@@ -138,7 +138,7 @@ const CreateOAuthClientContent: React.FC<CreateOAuthClientContentProps> =
     const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
       return [
         {
-          to: "..",
+          to: "./..",
           label: (
             <FormattedMessage id="ApplicationsConfigurationScreen.title" />
           ),
diff --git a/portal/src/graphql/portal/CustomDomainListScreen.tsx b/portal/src/graphql/portal/CustomDomainListScreen.tsx
index cd9f20525b..efa407ba88 100644
--- a/portal/src/graphql/portal/CustomDomainListScreen.tsx
+++ b/portal/src/graphql/portal/CustomDomainListScreen.tsx
@@ -681,7 +681,7 @@ const CustomDomainListContent: React.FC<CustomDomainListContentProps> =
               <FormattedMessage
                 id="FeatureConfig.custom-domain.disabled"
                 values={{
-                  planPagePath: "../billing",
+                  planPagePath: "./../billing",
                 }}
               />
             </MessageBar>
diff --git a/portal/src/graphql/portal/EditCustomAttributeScreen.tsx b/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
index 0b57185819..845db8ee44 100644
--- a/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
+++ b/portal/src/graphql/portal/EditCustomAttributeScreen.tsx
@@ -105,7 +105,7 @@ function EditCustomAttributeContent(props: EditCustomAttributeContentProps) {
   const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
     return [
       {
-        to: "../..",
+        to: "./../..",
         label: (
           <FormattedMessage id="CustomAttributesConfigurationScreen.title" />
         ),
@@ -152,7 +152,7 @@ const EditCustomAttributeScreen: React.FC =
     );
 
     const afterSave = useCallback(() => {
-      navigate("../..");
+      navigate("./../..");
     }, [navigate]);
 
     if (isNaN(index)) {
diff --git a/portal/src/graphql/portal/EditOAuthClientScreen.tsx b/portal/src/graphql/portal/EditOAuthClientScreen.tsx
index becb93ce99..fee214d9f2 100644
--- a/portal/src/graphql/portal/EditOAuthClientScreen.tsx
+++ b/portal/src/graphql/portal/EditOAuthClientScreen.tsx
@@ -77,7 +77,7 @@ const EditOAuthClientContent: React.FC<EditOAuthClientContentProps> =
     const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
       return [
         {
-          to: "../..",
+          to: "./../..",
           label: (
             <FormattedMessage id="ApplicationsConfigurationScreen.title" />
           ),
diff --git a/portal/src/graphql/portal/GetStartedScreen.tsx b/portal/src/graphql/portal/GetStartedScreen.tsx
index 1e0767bda2..362415be28 100644
--- a/portal/src/graphql/portal/GetStartedScreen.tsx
+++ b/portal/src/graphql/portal/GetStartedScreen.tsx
@@ -75,7 +75,7 @@ function makeCardSpecs(options: MakeCardSpecsOptions): CardSpec[] {
   const customize_ui: CardSpec = {
     key: "customize_ui",
     iconSrc: iconCustomize,
-    internalHref: "../configuration/ui-settings",
+    internalHref: "./../configuration/ui-settings",
     externalHref: undefined,
     canSkip: false,
     isDone: tutorialStatusData.progress["customize_ui"] === true,
@@ -94,13 +94,13 @@ function makeCardSpecs(options: MakeCardSpecsOptions): CardSpec[] {
       tutorialStatusData.progress["create_application"] === true,
   };
   create_application.internalHref = create_application.isDone
-    ? "../configuration/apps"
-    : "../configuration/apps/add";
+    ? "./../configuration/apps"
+    : "./../configuration/apps/add";
 
   const sso: CardSpec = {
     key: "sso",
     iconSrc: iconSSO,
-    internalHref: "../configuration/single-sign-on",
+    internalHref: "./../configuration/single-sign-on",
     externalHref: undefined,
     canSkip: true,
     isDone: tutorialStatusData.progress["sso"] === true,
@@ -109,7 +109,7 @@ function makeCardSpecs(options: MakeCardSpecsOptions): CardSpec[] {
   const invite: CardSpec = {
     key: "invite",
     iconSrc: iconTeam,
-    internalHref: "../portal-admins/invite",
+    internalHref: "./../portal-admins/invite",
     externalHref: undefined,
     canSkip: false,
     isDone: tutorialStatusData.progress["invite"] === true,
@@ -410,7 +410,7 @@ function GetStartedScreenContent(props: GetStartedScreenContentProps) {
         },
       }).then(
         () => {
-          navigate("../");
+          navigate("./..");
         },
         () => {}
       );
diff --git a/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx b/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
index c81b8bd006..91eb1e2676 100644
--- a/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/GoogleTagManagerConfigurationScreen.tsx
@@ -67,7 +67,7 @@ const GoogleTagManagerConfigurationContent: React.FC<GoogleTagManagerConfigurati
     const navBreadcrumbItems = useMemo(() => {
       return [
         {
-          to: "..",
+          to: "./..",
           label: (
             <FormattedMessage id="IntegrationsConfigurationScreen.title" />
           ),
diff --git a/portal/src/graphql/portal/InviteAdminScreen.tsx b/portal/src/graphql/portal/InviteAdminScreen.tsx
index cf997a9a0e..1f280edcc6 100644
--- a/portal/src/graphql/portal/InviteAdminScreen.tsx
+++ b/portal/src/graphql/portal/InviteAdminScreen.tsx
@@ -31,7 +31,7 @@ const InviteAdminContent: React.FC<InviteAdminContentProps> =
     const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
       return [
         {
-          to: "..",
+          to: "./..",
           label: <FormattedMessage id="PortalAdminSettings.title" />,
         },
         { to: ".", label: <FormattedMessage id="InviteAdminScreen.title" /> },
@@ -83,7 +83,7 @@ const InviteAdminScreen: React.FC = function InviteAdminScreen() {
 
   useEffect(() => {
     if (form.isSubmitted) {
-      navigate("..");
+      navigate("./..");
     }
   }, [form.isSubmitted, navigate]);
 
diff --git a/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx b/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
index 6cbc978cae..1b351d1997 100644
--- a/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/LoginIDConfigurationScreen.tsx
@@ -476,7 +476,7 @@ const LoginIDTypeEdit: React.FC<LoginIDTypeEditProps> =
             <FormattedMessage
               id="FeatureConfig.disabled"
               values={{
-                planPagePath: "../../../billing",
+                planPagePath: "./../../../billing",
               }}
             />
           </MessageBar>
diff --git a/portal/src/graphql/portal/ModifyOAuthClientForm.tsx b/portal/src/graphql/portal/ModifyOAuthClientForm.tsx
index 5b2ab70a3b..db07e83931 100644
--- a/portal/src/graphql/portal/ModifyOAuthClientForm.tsx
+++ b/portal/src/graphql/portal/ModifyOAuthClientForm.tsx
@@ -289,7 +289,7 @@ const ModifyOAuthClientForm: React.FC<ModifyOAuthClientFormProps> =
               <FormattedMessage
                 id="ModifyOAuthClientForm.cookie-settings.link-to-cookie-session"
                 values={{
-                  to: "../..#cookie-session",
+                  to: "./..#cookie-session",
                 }}
               />
             </Text>
diff --git a/portal/src/graphql/portal/ProjectWizardScreen.tsx b/portal/src/graphql/portal/ProjectWizardScreen.tsx
index cf67568b68..fbb1dc5c61 100644
--- a/portal/src/graphql/portal/ProjectWizardScreen.tsx
+++ b/portal/src/graphql/portal/ProjectWizardScreen.tsx
@@ -100,7 +100,7 @@ function Step1(props: StepProps) {
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      navigate("../2");
+      navigate("./../2");
     },
     [navigate]
   );
@@ -231,7 +231,7 @@ function Step2(props: StepProps) {
       if (step2Answer === "disabled") {
         saveAndThenNavigate();
       } else {
-        navigate("../3");
+        navigate("./../3");
       }
     },
     [step2Answer, navigate, saveAndThenNavigate]
diff --git a/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx b/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
index 9f43090c09..4eb3faf0ca 100644
--- a/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SingleSignOnConfigurationScreen.tsx
@@ -291,7 +291,7 @@ const SingleSignOnConfigurationContent: React.FC<SingleSignOnConfigurationConten
               <FormattedMessage
                 id="FeatureConfig.sso.maximum"
                 values={{
-                  planPagePath: "../../billing",
+                  planPagePath: "./../../billing",
                   maximum: oauthClientsMaximum,
                 }}
               />
diff --git a/portal/src/graphql/portal/SingleSignOnConfigurationWidget.tsx b/portal/src/graphql/portal/SingleSignOnConfigurationWidget.tsx
index dfdd9147b1..b9e2852825 100644
--- a/portal/src/graphql/portal/SingleSignOnConfigurationWidget.tsx
+++ b/portal/src/graphql/portal/SingleSignOnConfigurationWidget.tsx
@@ -238,7 +238,7 @@ const WidgetHeader: React.FC<WidgetHeaderProps> = function WidgetHeader(
         <FormattedMessage
           id="FeatureConfig.disabled"
           values={{
-            planPagePath: "../../billing",
+            planPagePath: "./../../billing",
           }}
         />
       </MessageBar>
diff --git a/portal/src/graphql/portal/UISettingsScreen.tsx b/portal/src/graphql/portal/UISettingsScreen.tsx
index 3ff87c26b6..62a6b13db2 100644
--- a/portal/src/graphql/portal/UISettingsScreen.tsx
+++ b/portal/src/graphql/portal/UISettingsScreen.tsx
@@ -792,7 +792,7 @@ const ResourcesConfigurationContent: React.FC<ResourcesConfigurationContentProps
               <FormattedMessage
                 id="FeatureConfig.white-labeling.disabled"
                 values={{
-                  planPagePath: "../../billing",
+                  planPagePath: "./../../billing",
                 }}
               />
             </MessageBar>
diff --git a/portal/src/graphql/portal/VerificationConfigurationScreen.tsx b/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
index adb3307589..2971bb1cb7 100644
--- a/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/VerificationConfigurationScreen.tsx
@@ -243,7 +243,7 @@ const VerificationConfigurationContent: React.FC<VerificationConfigurationConten
               <FormattedMessage
                 id="FeatureConfig.disabled"
                 values={{
-                  planPagePath: "../../../billing",
+                  planPagePath: "./../../../billing",
                 }}
               />
             </MessageBar>
diff --git a/portal/src/graphql/portal/VerifyDomainScreen.tsx b/portal/src/graphql/portal/VerifyDomainScreen.tsx
index 73f3be8ae2..1ffcdc3161 100644
--- a/portal/src/graphql/portal/VerifyDomainScreen.tsx
+++ b/portal/src/graphql/portal/VerifyDomainScreen.tsx
@@ -122,7 +122,7 @@ const VerifyDomain: React.FC<VerifyDomainProps> = function VerifyDomain(
   const navBreadcrumbItems = useMemo(() => {
     return [
       {
-        to: "../..",
+        to: "./../..",
         label: <FormattedMessage id="CustomDomainListScreen.title" />,
       },
       { to: ".", label: <FormattedMessage id="VerifyDomainScreen.title" /> },
@@ -162,7 +162,7 @@ const VerifyDomain: React.FC<VerifyDomainProps> = function VerifyDomain(
     verifyDomain(domain.id)
       .then((success) => {
         if (success) {
-          navigate("../..?verify=success");
+          navigate("./../..?verify=success");
         }
       })
       .catch(() => {});
diff --git a/portal/src/graphql/portal/WebhookConfigurationScreen.tsx b/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
index a0abbd8b7f..531e90f9bc 100644
--- a/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/WebhookConfigurationScreen.tsx
@@ -408,7 +408,7 @@ const WebhookConfigurationScreenContent: React.FC<WebhookConfigurationScreenCont
                 <FormattedMessage
                   id="FeatureConfig.webhook.blocking-events.disabled"
                   values={{
-                    planPagePath: "../../billing",
+                    planPagePath: "./../../billing",
                   }}
                 />
               </MessageBar>
@@ -417,7 +417,7 @@ const WebhookConfigurationScreenContent: React.FC<WebhookConfigurationScreenCont
                 <FormattedMessage
                   id="FeatureConfig.webhook.blocking-events.maximum"
                   values={{
-                    planPagePath: "../../billing",
+                    planPagePath: "./../../billing",
                     maximum: blockingHandlerMax,
                   }}
                 />
@@ -455,7 +455,7 @@ const WebhookConfigurationScreenContent: React.FC<WebhookConfigurationScreenCont
                 <FormattedMessage
                   id="FeatureConfig.webhook.non-blocking-events.disabled"
                   values={{
-                    planPagePath: "../../billing",
+                    planPagePath: "./../../billing",
                   }}
                 />
               </MessageBar>
@@ -464,7 +464,7 @@ const WebhookConfigurationScreenContent: React.FC<WebhookConfigurationScreenCont
                 <FormattedMessage
                   id="FeatureConfig.webhook.non-blocking-events.maximum"
                   values={{
-                    planPagePath: "../../billing",
+                    planPagePath: "./../../billing",
                     maximum: nonBlockingHandlerMax,
                   }}
                 />

From 71a865274d77f0abc8ff9a6f0632caeb61f9b272 Mon Sep 17 00:00:00 2001
From: andychow326 <andychchow326@gmail.com>
Date: Tue, 21 Jun 2022 17:01:55 +0800
Subject: [PATCH 8/8] Correct ScreenNav url

---
 portal/src/ScreenNav.tsx | 56 ++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/portal/src/ScreenNav.tsx b/portal/src/ScreenNav.tsx
index faabadc92c..bde52d038e 100644
--- a/portal/src/ScreenNav.tsx
+++ b/portal/src/ScreenNav.tsx
@@ -76,76 +76,76 @@ const ScreenNav: React.FC = function ScreenNav() {
     const links = [
       ...(skippedTutorial
         ? []
-        : [{ textKey: "ScreenNav.getting-started", url: "getting-started" }]),
+        : [{ textKey: "ScreenNav.getting-started", url: "./getting-started" }]),
       ...(analyticEnabled
-        ? [{ textKey: "ScreenNav.analytics", url: "analytics" }]
+        ? [{ textKey: "ScreenNav.analytics", url: "./analytics" }]
         : []),
-      { textKey: "ScreenNav.users", url: "users" },
+      { textKey: "ScreenNav.users", url: "./users" },
       {
         textKey: "ScreenNav.authentication",
-        url: "configuration/authentication",
+        url: "./configuration/authentication",
         children: [
           {
             textKey: "ScreenNav.login-id",
-            url: "configuration/authentication/login-id",
+            url: "./configuration/authentication/login-id",
           },
           {
             textKey: "ScreenNav.authenticators",
-            url: "configuration/authentication/authenticators",
+            url: "./configuration/authentication/authenticators",
           },
           {
             textKey: "ScreenNav.verification",
-            url: "configuration/authentication/verification",
+            url: "./configuration/authentication/verification",
           },
         ],
       },
       {
         textKey: "ScreenNav.anonymous-users",
-        url: "configuration/anonymous-users",
+        url: "./configuration/anonymous-users",
       },
       {
         textKey: "ScreenNav.biometric",
-        url: "configuration/biometric",
+        url: "./configuration/biometric",
       },
       {
         textKey: "ScreenNav.single-sign-on",
-        url: "configuration/single-sign-on",
+        url: "./configuration/single-sign-on",
       },
       {
         textKey: "ScreenNav.password-policy",
-        url: "configuration/password-policy",
+        url: "./configuration/password-policy",
       },
       {
         textKey: "ScreenNav.client-applications",
-        url: "configuration/apps",
+        url: "./configuration/apps",
       },
       {
         textKey: "CustomDomainListScreen.title",
-        url: "custom-domains",
+        url: "./custom-domains",
       },
       {
         textKey: "ScreenNav.smtp",
-        url: "configuration/smtp",
+        url: "./configuration/smtp",
       },
       {
         textKey: "ScreenNav.ui-settings",
-        url: "configuration/ui-settings",
+        url: "./configuration/ui-settings",
       },
       {
         textKey: "ScreenNav.localization",
-        url: "configuration/localization",
+        url: "./configuration/localization",
       },
       {
         textKey: "ScreenNav.user-profile",
-        url: "configuration/user-profile",
+        url: "./configuration/user-profile",
         children: [
           {
             textKey: "ScreenNav.standard-attributes",
-            url: "configuration/user-profile/standard-attributes",
+            url: "./configuration/user-profile/standard-attributes",
           },
           {
             textKey: "ScreenNav.custom-attributes",
-            url: "configuration/user-profile/custom-attributes",
+            url: "./configuration/user-profile/custom-attributes",
           },
         ],
       },
@@ -153,42 +153,42 @@ const ScreenNav: React.FC = function ScreenNav() {
         ? [
             {
               textKey: "ScreenNav.integrations",
-              url: "integrations",
+              url: "./integrations",
             },
           ]
         : []),
       {
         textKey: "ScreenNav.billing",
-        url: "billing",
+        url: "./billing",
       },
       {
         textKey: "ScreenNav.advanced",
-        url: "advanced",
+        url: "./advanced",
         children: [
           {
             textKey: "ScreenNav.password-reset-code",
-            url: "advanced/password-reset-code",
+            url: "./advanced/password-reset-code",
           },
           {
             textKey: "ScreenNav.webhooks",
-            url: "advanced/webhooks",
+            url: "./advanced/webhooks",
           },
           {
             textKey: "ScreenNav.admin-api",
-            url: "advanced/admin-api",
+            url: "./advanced/admin-api",
           },
           {
             textKey: "ScreenNav.account-deletion",
-            url: "advanced/account-deletion",
+            url: "./advanced/account-deletion",
           },
         ],
       },
       ...(auditLogEnabled
-        ? [{ textKey: "ScreenNav.audit-log", url: "audit-log" }]
+        ? [{ textKey: "ScreenNav.audit-log", url: "./audit-log" }]
         : []),
       {
         textKey: "PortalAdminSettings.title",
-        url: "portal-admins",
+        url: "./portal-admins",
       },
     ];