fix: Validate and handle URL params

frontend/common/stores/account-store.js

@@ -302,14 +302,12 @@ const controller = {
       store.model = user
       if (user && user.organisations) {
         store.organisation = user.organisations[0]
-        const cookiedID = parseInt(API.getCookie('organisation'))
-        const pathID = parseInt(
-          matchPath(document.location.pathname, {
-            path: '/organisation/:organisationId',
-            strict: false,
-          })?.params?.organisationId,
-        )
-        const orgId = pathID || cookiedID
+        const cookiedID = API.getCookie('organisation')
+        const pathID = matchPath(document.location.pathname, {
+          path: '/organisation/:organisationId',
+          strict: false,
+        })?.params?.organisationId
+        const orgId = parseInt(pathID || cookiedID) || undefined
         if (orgId) {
           const foundOrganisation = user.organisations.find(
             (v) => `${v.id}` === orgId,

frontend/common/stores/project-store.js

@@ -96,7 +96,12 @@ const controller = {
     })
   },
   getProject: (id, cb, force) => {
-    if (force) {
+    if (!id) {
+      if (!getIsWidget()) {
+        !force && AsyncStorage.removeItem('lastEnv')
+        document.location.href = '/404'
+      }
+    } else if (force) {
       store.loading()
 
       return Promise.all([

frontend/web/components/ProjectsPage.tsx

@@ -16,9 +16,7 @@ const ProjectsPage: FC<ProjectsPageType> = ({ match }) => {
       {() => {
         return (
           <div className='app-container container'>
-            <ProjectManageWidget
-              organisationId={parseInt(match.params.organisationId)}
-            />
+            <ProjectManageWidget organisationId={match.params.organisationId} />
           </div>
         )
       }}

frontend/web/components/base/higher-order/ParameterizedRoute.tsx

@@ -0,0 +1,49 @@
+import NotFoundPage from 'components/pages/NotFoundPage'
+import React from 'react'
+import { RouteComponentProps, Route } from 'react-router-dom'
+
+type ParameterizedRouteType = {
+  component: React.ComponentType<any>
+  [key: string]: any
+}
+
+export const ParameterizedRoute = ({
+  component: Component,
+  ...props
+}: ParameterizedRouteType) => {
+  const { organisationId, projectId } = props.computedMatch.params
+
+  const parsedOrganisationId = organisationId && parseInt(organisationId)
+  const parsedProjectId = projectId && parseInt(projectId)
+
+  // Handle the case where the parameters are invalid
+  if (
+    (projectId && isNaN(parseInt(projectId))) ||
+    (organisationId && isNaN(parseInt(organisationId)))
+  ) {
+    return <Route {...props} component={NotFoundPage} />
+  }
+
+  if (!projectId && !organisationId) {
+    return <Route {...props} component={Component} />
+  }
+
+  return (
+    <Route
+      {...props}
+      render={(componentProps: RouteComponentProps) => (
+        <Component
+          {...componentProps}
+          match={{
+            ...componentProps.match,
+            params: {
+              ...componentProps.match.params,
+              ...(organisationId && { organisationId: parsedOrganisationId }),
+              ...(projectId && { projectId: parsedProjectId }),
+            },
+          }}
+        />
+      )}
+    />
+  )
+}

frontend/web/routes.js

@@ -38,6 +38,7 @@ import OrganisationsPage from './components/pages/OrganisationsPage'
 import UsersAndPermissionsPage from './components/pages/UsersAndPermissionsPage'
 import ProjectRedirectPage from './components/pages/ProjectRedirectPage'
 import SDKKeysPage from './components/SDKKeysPage'
+import { ParameterizedRoute } from './components/base/higher-order/ParameterizedRoute'
 
 export default (
   <App>
@@ -56,27 +57,27 @@ export default (
         exact
         component={PasswordResetPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/features'
         exact
         component={FlagsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/change-requests'
         exact
         component={ChangeRequestsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/scheduled-changes'
         exact
         component={ScheduledChangesPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/change-requests/:id'
         exact
         component={ChangeRequestPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/scheduled-changes/:id'
         exact
         component={ChangeRequestPage}
@@ -87,78 +88,82 @@ export default (
       <Route path='/broken' exact component={BrokenPage} />
       <Route path='/oauth/:type' exact component={HomePage} />
       <Route path='/saml' exact component={HomePage} />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/settings'
         exact
         component={EnvironmentSettingsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/sdk-keys'
         exact
         component={SDKKeysPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/integrations'
         exact
         component={IntegrationsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/users'
         exact
         component={UsersPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/users/:identity'
         exact
         component={UserIdPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/users/:identity/:id'
         exact
         component={UserPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/create'
         exact
         component={CreateEnvironmentPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/project-settings'
         exact
         component={ProjectSettingsPage}
       />
-      <Route path='/project/:projectId/compare' exact component={ComparePage} />
-      <Route
+      <ParameterizedRoute
+        path='/project/:projectId/compare'
+        exact
+        component={ComparePage}
+      />
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/history'
         exact
         component={FeatureHistoryPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/settings'
         exact
         component={ProjectSettingsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/permissions'
         exact
         component={ProjectSettingsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/segments'
         exact
         component={SegmentsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/organisation/:organisationId/settings'
         exact
         component={OrganisationSettingsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/organisation/:organisationId/permissions'
         exact
         component={UsersAndPermissionsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/organisation/:organisationId/usage'
         exact
         component={OrganisationUsagePage}
@@ -168,30 +173,34 @@ export default (
         exact
         component={OrganisationSettingsRedirectPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/organisation/:organisationId/projects'
         exact
         component={ProjectsPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/account'
         exact
         component={AccountSettingsPage}
       />
-      <Route path='/project/:projectId' exact component={ProjectRedirectPage} />
+      <ParameterizedRoute
+        path='/project/:projectId'
+        exact
+        component={ProjectRedirectPage}
+      />
       <Route path='/account' exact component={AccountSettingsPage} />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/audit-log'
         exact
         component={AuditLogPage}
       />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/audit-log'
         exact
         component={AuditLogPage}
       />
       <Route path='/organisations' exact component={OrganisationsPage} />
-      <Route
+      <ParameterizedRoute
         path='/project/:projectId/environment/:environmentId/audit-log/:id'
         exact
         component={AuditLogItemPage}