PIMS-2117 Auth Header Bug (#2700)

express-api/package.json

@@ -20,7 +20,7 @@
   "license": "ISC",
   "dependencies": {
     "@bcgov/citz-imb-kc-css-api": "https://github.com/bcgov/citz-imb-kc-css-api/releases/download/v1.4.0/bcgov-citz-imb-kc-css-api-1.4.0.tgz",
-    "@bcgov/citz-imb-sso-express": "1.0.1",
+    "@bcgov/citz-imb-sso-express": "1.0.3-beta2",
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
     "cors": "2.8.5",

react-app/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@bcgov/bc-sans": "2.1.0",
-    "@bcgov/citz-imb-sso-react": "1.0.0-alpha5",
+    "@bcgov/citz-imb-sso-react": "1.0.0-alpha7",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
     "@mdi/js": "7.4.47",

react-app/src/App.tsx

@@ -5,8 +5,7 @@ import '@/App.css';
 import { ThemeProvider } from '@emotion/react';
 import appTheme from './themes/appTheme';
 import Dev from './pages/DevZone';
-import { ConfigContextProvider } from './contexts/configContext';
-import AuthContextProvider, { AuthContext } from './contexts/authContext';
+import UserContextProvider, { UserContext } from './contexts/userContext';
 import AuthRouteGuard from './guards/AuthRouteGuard';
 import BaseLayout from './components/layout/BaseLayout';
 import { AccessRequest } from './pages/AccessRequest';
@@ -34,6 +33,7 @@ import BulkUpload from './pages/BulkUpload';
 import useHistoryAwareNavigate from './hooks/useHistoryAwareNavigate';
 import { newTracker, enableActivityTracking, trackPageView } from '@snowplow/browser-tracker';
 import { refreshLinkClickTracking } from '@snowplow/browser-plugin-link-click-tracking';
+import { useSSO } from '@bcgov/citz-imb-sso-react';
 
 /**
  * Renders the main router component for the application.
@@ -43,7 +43,8 @@ import { refreshLinkClickTracking } from '@snowplow/browser-plugin-link-click-tr
  * @returns JSX element representing the main router component
  */
 const Router = () => {
-  const auth = useContext(AuthContext);
+  const sso = useSSO();
+  const auth = useContext(UserContext);
   const { goToFromStateOrSetRoute } = useHistoryAwareNavigate();
 
   // Reusable piece to show map on many routes
@@ -66,9 +67,9 @@ const Router = () => {
       <Route
         index
         element={
-          auth.keycloak.isAuthenticated &&
-          auth.pimsUser.data?.Status === 'Active' &&
-          auth.pimsUser.data?.RoleId ? (
+          sso.isAuthenticated &&
+          auth.pimsUser?.data?.Status === 'Active' &&
+          auth.pimsUser?.data?.RoleId ? (
             showMap()
           ) : (
             <BaseLayout displayFooter>
@@ -301,17 +302,15 @@ const App = () => {
 
   return (
     <ThemeProvider theme={appTheme}>
-      <ConfigContextProvider>
-        <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <AuthContextProvider>
-            <LookupContextProvider>
-              <SnackBarContextProvider>
-                <Router />
-              </SnackBarContextProvider>
-            </LookupContextProvider>
-          </AuthContextProvider>
-        </ErrorBoundary>
-      </ConfigContextProvider>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <UserContextProvider>
+          <LookupContextProvider>
+            <SnackBarContextProvider>
+              <Router />
+            </SnackBarContextProvider>
+          </LookupContextProvider>
+        </UserContextProvider>
+      </ErrorBoundary>
     </ThemeProvider>
   );
 };

react-app/src/components/layout/Header.tsx

@@ -15,7 +15,7 @@ import {
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { useSSO } from '@bcgov/citz-imb-sso-react';
 import { Roles } from '@/constants/roles';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 
 const AppBrand = () => {
   const theme = useTheme();
@@ -61,7 +61,7 @@ const AppBrand = () => {
 };
 
 const Header: React.FC = () => {
-  const auth = useContext(AuthContext);
+  const auth = useContext(UserContext);
   const { logout, isAuthenticated, login } = useSSO();
   const theme = useTheme();
   const navigate = useNavigate();

react-app/src/components/map/controls/FilterControl.tsx

@@ -1,7 +1,7 @@
 import MultiselectFormField from '@/components/form/MultiselectFormField';
 import TextFormField from '@/components/form/TextFormField';
 import { Roles } from '@/constants/roles';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { LookupContext } from '@/contexts/lookupContext';
 import useGroupedAgenciesApi from '@/hooks/api/useGroupedAgenciesApi';
 import { MapFilter } from '@/hooks/api/usePropertiesApi';
@@ -27,7 +27,7 @@ interface FilterControlProps {
 const FilterControl = (props: FilterControlProps) => {
   const { setFilter } = props;
   const api = usePimsApi();
-  const user = useContext(AuthContext);
+  const user = useContext(UserContext);
   const { data: lookupData } = useContext(LookupContext);
 
   // Get lists for dropdowns

react-app/src/components/map/parcelPopup/ParcelPopup.tsx

@@ -10,7 +10,7 @@ import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArro
 import './parcelPopup.css';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import useDataLoader from '@/hooks/useDataLoader';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { Roles } from '@/constants/roles';
 import BCAssessmentDetails from '@/components/map/parcelPopup/BCAssessmentDetails';
 import LtsaDetails from '@/components/map/parcelPopup/LtsaDetails';
@@ -38,7 +38,7 @@ export const ParcelPopup = (props: ParcelPopupProps) => {
   const [tabValue, setTabValue] = useState<string>('0');
   const { size = 'large', scrollOnClick } = props;
 
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
 
   const {
     data: ltsaData,

react-app/src/components/projects/ProjectDetail.tsx

@@ -43,7 +43,7 @@ import { enumReverseLookup } from '@/utilities/helperFunctions';
 import { AgencyResponseType } from '@/constants/agencyResponseTypes';
 import useDataSubmitter from '@/hooks/useDataSubmitter';
 import { Roles } from '@/constants/roles';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { ExpandMoreOutlined } from '@mui/icons-material';
 import { columnNameFormatter, dateFormatter, formatMoney } from '@/utilities/formatters';
 import { LookupContext } from '@/contexts/lookupContext';
@@ -71,7 +71,7 @@ interface ProjectInfo extends Project {
 const ProjectDetail = (props: IProjectDetail) => {
   const navigate = useNavigate();
   const { id } = useParams();
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const lookup = useContext(LookupContext);
   const api = usePimsApi();
   const { data: lookupData, getLookupValueById } = useContext(LookupContext);

react-app/src/components/projects/ProjectDialog.tsx

@@ -27,7 +27,7 @@ import ProjectNotificationsTable from './ProjectNotificationsTable';
 import { getStatusString } from '@/constants/chesNotificationStatus';
 import { MonetaryType } from '@/constants/monetaryTypes';
 import AutocompleteFormField from '../form/AutocompleteFormField';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { Roles } from '@/constants/roles';
 import BaseDialog from '../dialog/BaseDialog';
 import { NotificationQueue } from '@/hooks/api/useProjectNotificationApi';
@@ -43,7 +43,7 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
   const { open, postSubmit, onCancel, initialValues } = props;
   const api = usePimsApi();
   const { data: lookupData } = useContext(LookupContext);
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const { submit, submitting } = useDataSubmitter(api.projects.updateProject);
   const [approvedStatus, setApprovedStatus] = useState<number>(null);
   const projectFormMethods = useForm({

react-app/src/components/projects/ProjectForms.tsx

@@ -1,7 +1,7 @@
 import { Grid, InputAdornment, Typography } from '@mui/material';
 import React, { useContext } from 'react';
 import AutocompleteFormField from '../form/AutocompleteFormField';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import TextFormField from '../form/TextFormField';
 import { ISelectMenuItem } from '../form/SelectFormField';
 import SingleSelectBoxFormField from '../form/SingleSelectBoxFormField';
@@ -14,7 +14,7 @@ interface IProjectGeneralInfoForm {
 
 export const ProjectGeneralInfoForm = (props: IProjectGeneralInfoForm) => {
   const { data: lookupData } = useContext(LookupContext);
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const canEdit = pimsUser.hasOneOfRoles([Roles.ADMIN]);
 
   return (

react-app/src/components/property/PropertyDetail.tsx

@@ -27,7 +27,7 @@ import { Map } from 'leaflet';
 import { Room } from '@mui/icons-material';
 import TitleOwnership from '../ltsa/TitleOwnership';
 import useDataSubmitter from '@/hooks/useDataSubmitter';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { Roles } from '@/constants/roles';
 import { LookupContext } from '@/contexts/lookupContext';
 import AssociatedProjectsTable from './AssociatedProjectsTable';
@@ -40,7 +40,7 @@ interface IPropertyDetail {
 const PropertyDetail = (props: IPropertyDetail) => {
   const navigate = useNavigate();
   const params = useParams();
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const { getLookupValueById } = useContext(LookupContext);
   const parcelId = isNaN(Number(params.parcelId)) ? null : Number(params.parcelId);
   const buildingId = isNaN(Number(params.buildingId)) ? null : Number(params.buildingId);

react-app/src/components/table/DataTable.tsx

@@ -48,8 +48,8 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { CommonFiltering } from '@/interfaces/ICommonFiltering';
 import { useSearchParams } from 'react-router-dom';
 import { Roles } from '@/constants/roles';
-import { AuthContext } from '@/contexts/authContext';
 import { trackSelfDescribingEvent } from '@snowplow/browser-tracker';
+import { UserContext } from '@/contexts/userContext';
 import { SnackBarContext } from '@/contexts/snackbarContext';
 
 type RenderCellParams = GridRenderCellParams<any, any, any, GridTreeNodeWithRender>;
@@ -458,7 +458,7 @@ export const FilterSearchDataGrid = (props: FilterSearchDataGridProps) => {
       : `(${props.rowCountProp ?? 0} rows)`;
   }, [props.tableOperationMode, rowCount, props.rowCountProp]);
 
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const isAuditor = pimsUser.hasOneOfRoles([Roles.AUDITOR]);
 
   return (

react-app/src/components/users/UserDetail.tsx

@@ -8,7 +8,7 @@ import AutocompleteFormField from '@/components/form/AutocompleteFormField';
 import usePimsApi from '@/hooks/usePimsApi';
 import useDataLoader from '@/hooks/useDataLoader';
 import { User } from '@/hooks/api/useUsersApi';
-import { AuthContext } from '@/contexts/authContext';
+import { UserContext } from '@/contexts/userContext';
 import { Agency } from '@/hooks/api/useAgencyApi';
 import TextFormField from '../form/TextFormField';
 import DetailViewNavigation from '../display/DetailViewNavigation';
@@ -29,7 +29,7 @@ interface UserProfile extends User {
 
 const UserDetail = ({ onClose }: IUserDetail) => {
   const { id } = useParams();
-  const { pimsUser } = useContext(AuthContext);
+  const { pimsUser } = useContext(UserContext);
   const { data: lookupData, getLookupValueById } = useContext(LookupContext);
   const api = usePimsApi();
 

react-app/src/constants/config.ts

@@ -0,0 +1,11 @@
+export interface IConfig {
+  API_HOST: string;
+  NODE_ENV: string;
+}
+
+export const getConfig = (): IConfig => {
+  return {
+    API_HOST: '/api/v2',
+    NODE_ENV: import.meta.env.MODE,
+  };
+};

react-app/src/contexts/lookupContext.tsx

@@ -1,8 +1,9 @@
-import { AuthContext } from '@/contexts/authContext';
 import { LookupAll } from '@/hooks/api/useLookupApi';
 import useDataLoader from '@/hooks/useDataLoader';
 import usePimsApi from '@/hooks/usePimsApi';
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import { useSSO } from '@bcgov/citz-imb-sso-react';
+import { CircularProgress } from '@mui/material';
+import React, { createContext, useCallback, useMemo } from 'react';
 
 type LookupContextValue = {
   data: LookupAll | undefined;
@@ -18,9 +19,9 @@ export const LookupContext = createContext<LookupContextValue>(undefined);
  */
 export const LookupContextProvider: React.FC<React.PropsWithChildren> = (props) => {
   const api = usePimsApi();
-  const { data, loadOnce } = useDataLoader(api.lookup.getAll);
-  const { keycloak } = useContext(AuthContext);
-  if (keycloak.isAuthenticated) {
+  const { data, loadOnce, isLoading } = useDataLoader(api.lookup.getAll);
+  const sso = useSSO();
+  if (!data && sso.isAuthenticated) {
     loadOnce();
   }
 
@@ -55,6 +56,7 @@ export const LookupContextProvider: React.FC<React.PropsWithChildren> = (props)
   );
 
   const contextValue = { data, getLookupValueById };
+  if (isLoading) return <CircularProgress sx={{ position: 'fixed', top: '50%', left: '50%' }} />;
   return <LookupContext.Provider value={contextValue}>{props.children}</LookupContext.Provider>;
 };
 

react-app/src/contexts/userContext.tsx

@@ -0,0 +1,31 @@
+import usePimsUser, { IPimsUser as PimsUser } from '@/hooks/usePimsUser';
+import { CircularProgress } from '@mui/material';
+import React, { createContext } from 'react';
+export interface PimsUserState {
+  pimsUser: PimsUser;
+}
+export const UserContext = createContext<PimsUserState | undefined>(undefined);
+
+/**
+ * Provides access to user data about the logged in user.
+ *
+ * @param {*} props
+ * @return {*}
+ */
+export const UserContextProvider: React.FC<React.PropsWithChildren> = (props) => {
+  const pimsUser = usePimsUser();
+
+  if (pimsUser.isLoading)
+    return <CircularProgress sx={{ position: 'fixed', top: '50%', left: '50%' }} />;
+  return (
+    <UserContext.Provider
+      value={{
+        pimsUser,
+      }}
+    >
+      {props.children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContextProvider;