VIA-172 AJ Handle change of authentication status to log the user out

Author: ankur-jain-nhs

src/app/_components/inactivity/InactivityDialog.test.tsx

@@ -18,13 +18,6 @@ jest.mock("next-auth/react", () => ({
 jest.mock("@src/utils/auth/inactivity-timer");
 jest.mock("@src/utils/auth/user-logout");
 
-const mockRouterPush = jest.fn();
-jest.mock("next/navigation", () => ({
-  useRouter: () => ({
-    push: mockRouterPush,
-  }),
-}));
-
 let idleSession = false;
 let timedOutSession = false;
 
@@ -132,11 +125,6 @@ describe("InactivityDialog", () => {
       idleSession = timedOutSession = false;
     });
 
-    it("should redirect to session logout page", async () => {
-      render(<InactivityDialog />);
-      expect(mockRouterPush).toHaveBeenCalledWith(SESSION_LOGOUT_ROUTE);
-    });
-
     it("should not show warning when user is idle", async () => {
       idleSession = true;
 
@@ -160,4 +148,19 @@ describe("InactivityDialog", () => {
       expect(userLogout).not.toHaveBeenCalled();
     });
   });
+
+  describe("when user goes from authenticated to unauthenticated", () => {
+    beforeEach(() => {
+      mockSession = { data: mockSessionValue, status: "authenticated" };
+      idleSession = timedOutSession = false;
+    });
+
+    it("should try to log the user out", async () => {
+      const { rerender } = render(<InactivityDialog />);
+      expect(userLogout).not.toHaveBeenCalled();
+      mockSession = { data: mockSessionValue, status: "unauthenticated" };
+      rerender(<InactivityDialog />);
+      expect(userLogout).toHaveBeenCalledWith(true);
+    })
+  })
 });

src/app/_components/inactivity/InactivityDialog.tsx

@@ -1,18 +1,16 @@
 "use client";
 
-import { SESSION_LOGOUT_ROUTE } from "@src/app/session-logout/constants";
-import { createRef, JSX, useEffect } from "react";
+import { createRef, JSX, useEffect, useRef } from "react";
 import styles from "./styles.module.css";
 import { userLogout } from "@src/utils/auth/user-logout";
 import useInactivityTimer from "@src/utils/auth/inactivity-timer";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
 
 const InactivityDialog = (): JSX.Element => {
-  const router = useRouter();
   const { status } = useSession();
   const { isIdle, isTimedOut } = useInactivityTimer();
   const dialogRef = createRef<HTMLDialogElement>();
+  const previousStatusRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (status === "authenticated") {
@@ -22,11 +20,19 @@ const InactivityDialog = (): JSX.Element => {
       } else if (isIdle) {
         dialogRef.current?.showModal();
       }
-    } else if (status === "unauthenticated") {
+    }
+  }, [dialogRef, isIdle, isTimedOut, status]);
+
+  useEffect(() => {
+    const prevStatus = previousStatusRef.current;
+
+    // only trigger logout if the user has been authenticated and then unauthenticated
+    if (prevStatus === "authenticated" && status === "unauthenticated") {
       dialogRef.current?.close();
-      router.push(SESSION_LOGOUT_ROUTE);
+      userLogout(true);
     }
-  }, [dialogRef, isIdle, isTimedOut, router, status]);
+    previousStatusRef.current = status;
+  }, [dialogRef, status]);
 
   return (
     <dialog ref={dialogRef} className={styles.warningDialog}>