Merge pull request #501 from MeasureAuthoringTool/MAT-10041

MAT 10041 Okta SDK Cross-Tab Token Synchronization

Author: sb-prateekkeerthi

package-lock.json

@@ -1,9 +1,12 @@
 import React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
-import OktaSecurity from "./OktaSecurity";
+import OktaSecurity, {
+  transformAuthState,
+  resetSessionCheckCache,
+} from "./OktaSecurity";
 import * as madieUtil from "@madie/madie-util";
+import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
 import { Security } from "@okta/okta-react";
-import { toRelativeUrl } from "@okta/okta-auth-js";
 import { MADIE_TIMEOUT_RETURN_URL } from "../services/timeoutReturnUrl";
 
 // Mock dependencies
@@ -16,7 +19,7 @@ jest.mock("@okta/okta-react", () => ({
   )),
 }));
 jest.mock("@okta/okta-auth-js", () => ({
-  OktaAuth: jest.fn().mockImplementation(() => ({})),
+  OktaAuth: jest.fn().mockImplementation((config) => ({ options: config })),
   toRelativeUrl: jest.fn((uri) => uri),
 }));
 jest.mock("./../router/Router", () =>
@@ -93,6 +96,20 @@ describe("OktaSecurity", () => {
       redirectUri: "http://localhost:3000/login/callback",
       scopes: ["openid", "profile", "email"],
     });
+    render(<OktaSecurity />);
+    await waitFor(() => expect(OktaAuth).toHaveBeenCalled());
+
+    const config = (OktaAuth as unknown as jest.Mock).mock.calls[0][0];
+    expect(config.tokenManager).toEqual({
+      autoRenew: true,
+      storage: "localStorage",
+    });
+    expect(config.services).toEqual({
+      autoRenew: true,
+      syncStorage: true,
+      renewOnTabActivation: true,
+      tabInactivityDuration: 1800,
+    });
 
     sessionStorage.setItem(MADIE_TIMEOUT_RETURN_URL, "/libraries");
     render(<OktaSecurity />);
@@ -153,4 +170,71 @@ describe("OktaSecurity", () => {
       window.location.origin
     );
   });
+
+  describe("transformAuthState", () => {
+    const buildOktaAuth = (existsMock: jest.Mock) => ({
+      session: { exists: existsMock },
+    });
+
+    beforeEach(() => {
+      resetSessionCheckCache();
+    });
+
+    it("returns the auth state untouched when not authenticated, without a session check", async () => {
+      const exists = jest.fn();
+      const authState = { isAuthenticated: false };
+
+      const result = await transformAuthState(buildOktaAuth(exists), authState);
+
+      expect(result.isAuthenticated).toBe(false);
+      expect(exists).not.toHaveBeenCalled();
+    });
+
+    it("keeps the user authenticated when the Okta session exists", async () => {
+      const exists = jest.fn().mockResolvedValue(true);
+      const authState = { isAuthenticated: true };
+
+      const result = await transformAuthState(buildOktaAuth(exists), authState);
+
+      expect(result.isAuthenticated).toBe(true);
+      expect(exists).toHaveBeenCalledTimes(1);
+    });
+
+    it("trusts a recent successful session check instead of re-verifying", async () => {
+      const exists = jest.fn().mockResolvedValue(true);
+      const oktaAuth = buildOktaAuth(exists);
+
+      await transformAuthState(oktaAuth, { isAuthenticated: true });
+      const result = await transformAuthState(oktaAuth, {
+        isAuthenticated: true,
+      });
+
+      // second call within the TTL should not hit the network again
+      expect(exists).toHaveBeenCalledTimes(1);
+      expect(result.isAuthenticated).toBe(true);
+    });
+
+    it("retries once before dropping auth when the session check fails transiently", async () => {
+      const exists = jest
+        .fn()
+        .mockResolvedValueOnce(false) // transient failure
+        .mockResolvedValueOnce(true); // retry succeeds
+      const authState = { isAuthenticated: true };
+
+      const result = await transformAuthState(buildOktaAuth(exists), authState);
+
+      expect(exists).toHaveBeenCalledTimes(2);
+      expect(result.isAuthenticated).toBe(true);
+    });
+
+    it("drops authentication when the Okta session is really gone", async () => {
+      const exists = jest.fn().mockResolvedValue(false);
+      const authState = { isAuthenticated: true };
+
+      const result = await transformAuthState(buildOktaAuth(exists), authState);
+
+      expect(exists).toHaveBeenCalledTimes(2);
+      expect(result.isAuthenticated).toBe(false);
+    });
+  });
 });

src/okta/OktaSecurity.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Security } from "@okta/okta-react";
 import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
 import { getOktaConfig } from "@madie/madie-util";
@@ -15,6 +15,31 @@ interface OktaConfig {
   redirectUri: string;
 }
 
+/**
+ * How long one successful Okta session check is trusted before we verify
+ * against the server again.
+ *
+ * Why this cache exists: `transformAuthState` runs on EVERY auth-state
+ * recalculation — page load, token renewal, and (because `syncStorage` is on)
+ * every token event mirrored from other tabs. Each run used to make a network
+ * call to /api/v1/sessions/me, and `session.exists()` reports `false` for ANY
+ * failure (network blip, 429 rate limit, aborted request), not just a dead
+ * session. So a burst of refreshes/route changes could hammer that endpoint
+ * and a single transient failure logged an active user out with no warning.
+ * Trusting a recent positive result removes both the call volume and the
+ * false-logout window.
+ */
+export const SESSION_CHECK_TTL_MS = 5 * 60 * 1000; // 5 minutes
+let lastSessionConfirmedAt = 0;
+
+/**
+ * Test-only: module state survives between test cases, so tests reset the
+ * session-check cache here to keep each case independent.
+ */
+export const resetSessionCheckCache = (): void => {
+  lastSessionConfirmedAt = 0;
+};
+
 export const transformAuthState = async (oktaAuth, authState) => {
   // verifies unexpired tokens are available from the tokenManager (default behavior)
   if (localStorage.getItem("madieDebug") || (window as any).madieDebug) {
@@ -29,13 +54,25 @@ export const transformAuthState = async (oktaAuth, authState) => {
   if (!authState.isAuthenticated) {
     return authState;
   }
-  // extra requirement:  user must have valid Okta session
-  authState.isAuthenticated = await oktaAuth.session.exists();
+  const now = Date.now();
+  if (now - lastSessionConfirmedAt < SESSION_CHECK_TTL_MS) {
+    return authState;
+  }
+  let sessionExists = await oktaAuth.session.exists();
+  if (!sessionExists) {
+    // `session.exists()` returns false for BOTH "session is gone" and "the
+    // request failed". Retry once so a transient network failure doesn't end
+    // an otherwise-valid session.
+    sessionExists = await oktaAuth.session.exists();
+  }
+  if (sessionExists) {
+    lastSessionConfirmedAt = now;
+  }
+  authState.isAuthenticated = sessionExists;
   return authState;
 };
 
 function OktaSecurity() {
-  // const navigate = useNavigate();
   const [oktaConfig, setOktaConfig] = useState<OktaConfig>();
   const [oktaConfigErr, setOktaConfigErr] = useState<string>();
 
@@ -58,20 +95,18 @@ function OktaSecurity() {
     );
   };
 
-  if (!oktaConfig && !oktaConfigErr) {
-    (async () => {
-      await getOktaConfig()
-        .then((config) => {
-          setOktaConfig(config);
-        })
-        .catch((err) => {
-          console.error(err);
-          setOktaConfigErr(
-            "Unable to load Login page, Please contact administration"
-          );
-        });
-    })();
-  }
+  useEffect(() => {
+    getOktaConfig()
+      .then((config) => {
+        setOktaConfig(config);
+      })
+      .catch((err) => {
+        console.error(err);
+        setOktaConfigErr(
+          "Unable to load Login page, Please contact administration"
+        );
+      });
+  }, []);
 
   const routerProps = {
     props: {
@@ -84,11 +119,38 @@ function OktaSecurity() {
     },
   };
 
+  // Memoized so the OktaAuth instance (and its token/renew/leader-election
+  // services) is created exactly once per loaded config. Re-instantiating it
+  // on a re-render restarts every service mid-flight, which destabilizes
+  // renewals and cross-tab sync.
+  const oktaAuth = useMemo(
+    () =>
+      oktaConfig
+        ? new OktaAuth({
+            ...oktaConfig, // other config
+            transformAuthState,
+            // Keep tokens valid and synchronized across all open tabs so background
+            // tabs don't hit auth errors / unexpected logouts.
+            // NOTE: `scopes` (incl. `offline_access` for refresh-token silent renewal)
+            // is intentionally left to the env-provided oktaConfig for now — enabling
+            // offline_access depends on the Okta/HARP app allowing refresh tokens and
+            // is being decided separately.
+            tokenManager: {
+              autoRenew: true, // expired tokens are renewed, not removed
+              storage: "localStorage", // required for cross-tab token sync
+            },
+            services: {
+              autoRenew: true,
+              syncStorage: true, // propagate renewed tokens to all tabs via storage events
+              renewOnTabActivation: true, // refresh tokens when a background tab regains focus
+              tabInactivityDuration: 1800, // seconds (30 min) — matches the idle timeout
+            },
+          })
+        : null,
+    [oktaConfig]
+  );
+
   if (!!oktaConfig) {
-    const oktaAuth = new OktaAuth({
-      ...oktaConfig, // other config
-      transformAuthState,
-    });
     return (
       <Security
         oktaAuth={oktaAuth}