COMP-797 logout user if session expires (#773)

Author: tom0827

compliance-web/src/App.tsx

@@ -13,7 +13,9 @@ import PopoverProvider from "@/components/Shared/Popover/PopoverProvider";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false } },
+});
 
 function App() {
   const environment = AppConfig.environment;

compliance-web/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SessionExpiredRouteImport } from './routes/session-expired'
 import { Route as OidcCallbackRouteImport } from './routes/oidc-callback'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as IndexRouteImport } from './routes/index'
@@ -26,6 +27,11 @@ import { Route as AuthenticatedCeDatabaseInspectionsInspectionNumberRouteImport
 import { Route as AuthenticatedCeDatabaseComplaintsComplaintNumberRouteImport } from './routes/_authenticated/ce-database/complaints/$complaintNumber'
 import { Route as AuthenticatedCeDatabaseCaseFilesCaseFileNumberRouteImport } from './routes/_authenticated/ce-database/case-files/$caseFileNumber'
 
+const SessionExpiredRoute = SessionExpiredRouteImport.update({
+  id: '/session-expired',
+  path: '/session-expired',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const OidcCallbackRoute = OidcCallbackRouteImport.update({
   id: '/oidc-callback',
   path: '/oidc-callback',
@@ -121,6 +127,7 @@ const AuthenticatedCeDatabaseCaseFilesCaseFileNumberRoute =
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/oidc-callback': typeof OidcCallbackRoute
+  '/session-expired': typeof SessionExpiredRoute
   '/review-board': typeof AuthenticatedReviewBoardRoute
   '/admin/agencies': typeof AuthenticatedAdminAgenciesRoute
   '/admin/proponents': typeof AuthenticatedAdminProponentsRoute
@@ -138,6 +145,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/oidc-callback': typeof OidcCallbackRoute
+  '/session-expired': typeof SessionExpiredRoute
   '/review-board': typeof AuthenticatedReviewBoardRoute
   '/admin/agencies': typeof AuthenticatedAdminAgenciesRoute
   '/admin/proponents': typeof AuthenticatedAdminProponentsRoute
@@ -157,6 +165,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/_authenticated': typeof AuthenticatedRouteWithChildren
   '/oidc-callback': typeof OidcCallbackRoute
+  '/session-expired': typeof SessionExpiredRoute
   '/_authenticated/review-board': typeof AuthenticatedReviewBoardRoute
   '/_authenticated/admin/agencies': typeof AuthenticatedAdminAgenciesRoute
   '/_authenticated/admin/proponents': typeof AuthenticatedAdminProponentsRoute
@@ -176,6 +185,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/oidc-callback'
+    | '/session-expired'
     | '/review-board'
     | '/admin/agencies'
     | '/admin/proponents'
@@ -193,6 +203,7 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/oidc-callback'
+    | '/session-expired'
     | '/review-board'
     | '/admin/agencies'
     | '/admin/proponents'
@@ -211,6 +222,7 @@ export interface FileRouteTypes {
     | '/'
     | '/_authenticated'
     | '/oidc-callback'
+    | '/session-expired'
     | '/_authenticated/review-board'
     | '/_authenticated/admin/agencies'
     | '/_authenticated/admin/proponents'
@@ -230,10 +242,18 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
   OidcCallbackRoute: typeof OidcCallbackRoute
+  SessionExpiredRoute: typeof SessionExpiredRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/session-expired': {
+      id: '/session-expired'
+      path: '/session-expired'
+      fullPath: '/session-expired'
+      preLoaderRoute: typeof SessionExpiredRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/oidc-callback': {
       id: '/oidc-callback'
       path: '/oidc-callback'
@@ -397,6 +417,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AuthenticatedRoute: AuthenticatedRouteWithChildren,
   OidcCallbackRoute: OidcCallbackRoute,
+  SessionExpiredRoute: SessionExpiredRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

compliance-web/src/router/RouterProviderWithAuthContext.tsx

@@ -1,7 +1,7 @@
 import { RouterProvider } from "@tanstack/react-router";
 import { useAuth } from "react-oidc-context";
 import router from "./router";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useStaffUserValidation } from "@/hooks/useAuthorization";
 import { trackAnalytics } from "@epic/centre-analytics";
 import { AppConfig } from "@/utils/config";
@@ -16,38 +16,52 @@ declare module "@tanstack/react-router" {
 export default function RouterProviderWithAuthContext() {
   const authentication = useAuth();
   const { isAccessDenied, preferredUsername } = useStaffUserValidation();
+  const [signedOut, setSignedOut] = useState(false);
 
   useEffect(() => {
     const removeExpiring = authentication.events.addAccessTokenExpiring(() => {
       // eslint-disable-next-line no-console
       console.log("AccessTokenExpiring: Refreshing token");
-      try{
+      try {
         authentication.signinSilent();
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error("Silent renew failed", error);
-        authentication.signoutRedirect();
+        setSignedOut(true);
       }
     });
 
-    const removeSilentRenewError = authentication.events.addSilentRenewError((error) => {
-      // eslint-disable-next-line no-console
-      console.log("Silent renew failed, logging out", error);
-      authentication.signoutRedirect();
-    });
+    const removeSilentRenewError = authentication.events.addSilentRenewError(
+      (error) => {
+        // eslint-disable-next-line no-console
+        console.log("Silent renew failed, logging out", error);
+        setSignedOut(true);
+      },
+    );
 
     const removeExpired = authentication.events.addAccessTokenExpired(() => {
       // eslint-disable-next-line no-console
       console.log("Token expired, logging out");
-      authentication.signoutRedirect();
+      setSignedOut(true);
     });
 
     return () => {
       removeExpiring();
       removeSilentRenewError();
       removeExpired();
     };
-  }, [authentication, authentication.events, authentication.signinSilent, authentication.signoutRedirect]);
+  }, [
+    authentication,
+    authentication.events,
+    authentication.signinSilent,
+    authentication.signoutRedirect,
+  ]);
+
+  useEffect(() => {
+    if (signedOut) {
+      router.navigate({ to: "/session-expired" });
+    }
+  }, [signedOut]);
 
   // Show access denied if user is authenticated but not a valid staff user
   if (authentication.isAuthenticated && isAccessDenied) {
@@ -57,7 +71,7 @@ export default function RouterProviderWithAuthContext() {
         <p>You are not authorized to access this application.</p>
         <p>User ID: {preferredUsername}</p>
         <p>Please contact your administrator to get access.</p>
-        <button 
+        <button
           onClick={() => authentication.signoutRedirect()}
           style={{
             padding: "0.5rem 1rem",
@@ -66,7 +80,7 @@ export default function RouterProviderWithAuthContext() {
             color: "white",
             border: "none",
             borderRadius: "4px",
-            cursor: "pointer"
+            cursor: "pointer",
           }}
         >
           Sign Out

compliance-web/src/routes/__root.tsx

@@ -26,6 +26,8 @@ function Layout() {
 
   const matches = useMatches();
 
+  const isSessionExpired = matches.some((route) => route.routeId === "/session-expired");
+
   const isProfileLayout = matches.some((route) =>
     [
       "/_authenticated/ce-database/case-files/$caseFileNumber",
@@ -40,6 +42,23 @@ function Layout() {
     }
   }, [setAppHeaderHeight]);
 
+  // If session expired, show only the content without header/sidebar
+  if (isSessionExpired) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          width: "100vw",
+        }}
+      >
+        <Outlet />
+      </Box>
+    );
+  }
+
   return (
     <>
       <EAOAppBar ref={appBarRef} />

compliance-web/src/routes/session-expired.tsx

@@ -0,0 +1,33 @@
+import { Box, Button, Typography } from "@mui/material";
+import { createFileRoute } from "@tanstack/react-router";
+import { BCDesignTokens } from "epic.theme";
+import { useAuth } from "react-oidc-context";
+
+export const Route = createFileRoute("/session-expired")({
+  component: SessionExpired,
+});
+
+function SessionExpired() {
+  const authentication = useAuth();
+
+  return (
+    <Box
+      sx={{ padding: "2rem", textAlign: "center" }}
+      gap={2}
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+    >
+      <Typography
+        variant="h1"
+        sx={{ color: BCDesignTokens.typographyColorLink }}
+      >
+        Session Expired
+      </Typography>
+      <Typography variant="body1">
+        Your session has expired. Please sign in again to continue.
+      </Typography>
+      <Button onClick={() => authentication.signinRedirect()}>Sign In</Button>
+    </Box>
+  );
+}