Merge pull request #1633 from solita-topip/feature/session-expired-logout

Add session expired dialog

Author: testower

src/auth/auth.test.tsx

@@ -21,6 +21,9 @@ vi.mock("react-oidc-context", async () => {
       },
       signoutRedirect: () => Promise.resolve(),
       signinRedirect: () => Promise.resolve(),
+      events: {
+        addAccessTokenExpired: () => {},
+      },
     }),
   };
 });
@@ -79,4 +82,11 @@ describe("useAuth", () => {
       result.current.logout({ returnTo: "/" }),
     ).resolves.not.toThrowError();
   });
+
+  test("addAccessTokenExpiredCb", async () => {
+    const { result } = testHook();
+    expect(
+      typeof result.current.addAccessTokenExpiredCallback === "function",
+    ).toBeTruthy();
+  });
 });

src/auth/auth.tsx

@@ -18,15 +18,22 @@ export interface Auth {
   getAccessToken: () => Promise<string>;
   logout: ({ returnTo }: { returnTo?: string }) => Promise<void>;
   login: (redirectUri?: string) => Promise<void>;
+  addAccessTokenExpiredCallback: (cb: () => void) => () => void;
 }
 
 /**
  * Wraps the useAuth hook from react-oidc-context and returns a facade for
  * the auth state.
  */
 export const useAuth = (): Auth => {
-  const { isLoading, isAuthenticated, user, signoutRedirect, signinRedirect } =
-    useOidcAuth();
+  const {
+    isLoading,
+    isAuthenticated,
+    user,
+    signoutRedirect,
+    signinRedirect,
+    events,
+  } = useOidcAuth();
 
   const { claimsNamespace, preferredNameNamespace } = useConfig();
 
@@ -66,6 +73,7 @@ export const useAuth = (): Auth => {
     getAccessToken,
     logout,
     login,
+    addAccessTokenExpiredCallback: events.addAccessTokenExpired.bind(events),
   };
 };
 

src/components/Dialogs/SessionExpiredDialog.tsx

@@ -0,0 +1,53 @@
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import { useEffect, useState } from "react";
+import { injectIntl, IntlShape } from "react-intl";
+import { useAuth } from "../../auth/auth";
+
+interface SessionExpiredDialogProps {
+  intl: IntlShape;
+}
+
+const SessionExpiredDialog = ({ intl }: SessionExpiredDialogProps) => {
+  const { login, logout, addAccessTokenExpiredCallback } = useAuth();
+  const { formatMessage } = intl;
+  const [showSessionExpiredDialog, setShowSessionExpiredDialog] =
+    useState(false);
+
+  useEffect(() => {
+    return addAccessTokenExpiredCallback(() =>
+      setShowSessionExpiredDialog(true),
+    );
+  }, [setShowSessionExpiredDialog, addAccessTokenExpiredCallback]);
+
+  return (
+    <Dialog open={showSessionExpiredDialog}>
+      <DialogTitle>
+        {formatMessage({ id: "session_expired_title" })}
+      </DialogTitle>
+      <DialogContent>
+        {formatMessage({ id: "session_expired_body" })}
+      </DialogContent>
+      <DialogActions>
+        <ButtonGroup fullWidth sx={{ justifyContent: "space-between", gap: 2 }}>
+          <Button
+            variant="text"
+            onClick={() => logout({ returnTo: window.location.origin })}
+            color="secondary"
+          >
+            {formatMessage({ id: "log_out" })}
+          </Button>
+          <Button variant="text" onClick={() => login()} color="primary">
+            {formatMessage({ id: "log_in" })}
+          </Button>
+        </ButtonGroup>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default injectIntl(SessionExpiredDialog);

src/containers/App.js

@@ -25,6 +25,7 @@ import { useDispatch } from "react-redux";
 import { StopPlaceActions, UserActions } from "../actions";
 import { fetchUserPermissions, updateAuth } from "../actions/UserActions";
 import { useAuth } from "../auth/auth";
+import SessionExpiredDialog from "../components/Dialogs/SessionExpiredDialog";
 import Header from "../components/Header/Header";
 import { OPEN_STREET_MAP } from "../components/Map/mapDefaults";
 import SnackbarWrapper from "../components/SnackbarWrapper";
@@ -125,6 +126,7 @@ const App = ({ children }) => {
             <Header config={config} />
             {children}
             <SnackbarWrapper />
+            <SessionExpiredDialog />
           </div>
         </ComponentToggle>
       </StyledEngineProvider>

src/static/lang/en.json

@@ -401,6 +401,8 @@
   "seconds": "seconds",
   "set_centroid": "Change coordinates",
   "set_coordinates_prompt": "Set coordinates for stop",
+  "session_expired_title": "Session expired",
+  "session_expired_body": "Please log in again to continue using the service",
   "settings": "Settings",
   "show_compass_bearing": "Show compass bearing",
   "show_expired_stops": "Show expired stop places",

src/static/lang/fi.json

@@ -399,6 +399,8 @@
   "search_result_future": "Voimassa tulevaisuudessa",
   "second": "sekunti",
   "seconds": "sekuntia",
+  "session_expired_title": "Sessio on vanhentunut",
+  "session_expired_body": "Kirjaudu uudelleen sisään jatkaaksesi palvelun käyttöä",
   "set_centroid": "Vaihda koordinaatit",
   "set_coordinates_prompt": "Aseta pysäkin koordinaatit",
   "settings": "Asetukset",

src/static/lang/fr.json

@@ -399,6 +399,8 @@
   "search_result_permanently_terminated": "Désactivé de manière définitive",
   "second": "seconde",
   "seconds": "secondes",
+  "session_expired_title": "Session expirée",
+  "session_expired_body": "Veuillez vous reconnecter pour continuer à utiliser le service",
   "set_centroid": "Modifier les coordonnées",
   "set_coordinates_prompt": "Définir les coordonnées pour ce point",
   "settings": "Paramètres",

src/static/lang/nb.json

@@ -399,6 +399,8 @@
   "search_result_permanently_terminated": "Nedlagt",
   "second": "sekund",
   "seconds": "sekunder",
+  "session_expired_title": "Innloggingsøkten har utløpt",
+  "session_expired_body": "Logg inn på nytt for å fortsette å bruke tjenesten",
   "set_centroid": "Sett koordinater",
   "set_coordinates_prompt": "Sett koordinater for stopp",
   "settings": "Innstillinger",

src/static/lang/sv.json

@@ -399,6 +399,8 @@
   "search_result_permanently_terminated": "Nedlagd",
   "second": "sekund",
   "seconds": "sekunder",
+  "session_expired_title": "Sessionen har löpt ut",
+  "session_expired_body": "Logga in igen för att fortsätta använda tjänsten",
   "set_centroid": "Ändra koordinater",
   "set_coordinates_prompt": "Ändra koordinater för hållplats",
   "settings": "Inställningar",