From 3192c5c84bf557b3f92a886ea0f99c20460593c3 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Fri, 25 Oct 2024 16:11:44 -0300
Subject: [PATCH] Add user store

---
 .../app/src/utils/OpenIdConnectRoutes.tsx     | 67 ++++++++++++-------
 platform/app/src/utils/legacyOIDCClient.ts    |  3 +-
 platform/app/src/utils/nextOIDCClient.ts      |  3 +-
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/platform/app/src/utils/OpenIdConnectRoutes.tsx b/platform/app/src/utils/OpenIdConnectRoutes.tsx
index 4be2b9abd1c..cf246faad4d 100644
--- a/platform/app/src/utils/OpenIdConnectRoutes.tsx
+++ b/platform/app/src/utils/OpenIdConnectRoutes.tsx
@@ -5,6 +5,7 @@ import CallbackPage from '../routes/CallbackPage';
 import SignoutCallbackComponent from '../routes/SignoutCallbackComponent';
 import LegacyClient from './legacyOIDCClient';
 import NextClient from './nextOIDCClient';
+import PropTypes from 'prop-types';
 
 function _isAbsoluteUrl(url) {
   return url.includes('http://') || url.includes('https://');
@@ -44,7 +45,7 @@ const initUserManager = (oidc, routerBasename) => {
     post_logout_redirect_uri: _makeAbsoluteIfNecessary(post_logout_redirect_uri, baseUri),
   });
 
-  const client = firstOpenIdClient.useAuthorizationCodeFlow ? NextClient : LegacyClient
+  const client = firstOpenIdClient.useAuthorizationCodeFlow ? NextClient : LegacyClient;
 
   return client(openIdConnectConfiguration);
 };
@@ -96,29 +97,6 @@ function LoginComponent(userManager) {
 function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }) {
   const userManager = initUserManager(oidc, routerBasename);
 
-  const getAuthorizationHeader = () => {
-    const user = userAuthenticationService.getUser();
-
-    // if the user is null return early, next time
-    // we hit this function we will have a user
-    if (!user) {
-      return;
-    }
-
-    return {
-      Authorization: `Bearer ${user.access_token}`,
-    };
-  };
-
-  const handleUnauthenticated = () => {
-    // Note: Don't await the redirect. If you make this component async it
-    // causes a react error before redirect as it returns a promise of a component rather than a component.
-    userManager.signinRedirect();
-
-    // return null because this is used in a react component
-    return null;
-  };
-
   const navigate = useNavigate();
 
   //for multi-tab logout
@@ -136,16 +114,37 @@ function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }
     return () => {
       window.removeEventListener('storage', storageEventListener);
     };
-  }, []);
+  }, [navigate]);
 
   useEffect(() => {
+    const handleUnauthenticated = async () => {
+      await userManager.signinRedirect();
+
+      // return null because this is used in a react component
+      return null;
+    };
+
+    const getAuthorizationHeader = () => {
+      const user = userAuthenticationService.getUser();
+
+      // if the user is null return early, next time
+      // we hit this function we will have a user
+      if (!user) {
+        return;
+      }
+
+      return {
+        Authorization: `Bearer ${user.access_token}`,
+      };
+    };
+
     userAuthenticationService.set({ enabled: true });
 
     userAuthenticationService.setServiceImplementation({
       getAuthorizationHeader,
       handleUnauthenticated,
     });
-  }, []);
+  }, [userAuthenticationService, userManager]);
 
   const oidcAuthority = oidc[0].authority;
 
@@ -171,6 +170,16 @@ function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }
     sessionStorage.setItem('ohif-redirect-to', JSON.stringify({ pathname, search }));
   }
 
+  useEffect(() => {
+    userManager.getUser().then(user => {
+      if (user && !user.expired) {
+        userAuthenticationService.setUser(user);
+      } else {
+        userManager.signinRedirect();
+      }
+    });
+  }, [userAuthenticationService, userManager]);
+
   return (
     <Routes>
       <Route
@@ -227,4 +236,10 @@ function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }
   );
 }
 
+OpenIdConnectRoutes.propTypes = {
+  oidc: PropTypes.array.isRequired,
+  routerBasename: PropTypes.string.isRequired,
+  userAuthenticationService: PropTypes.object.isRequired,
+};
+
 export default OpenIdConnectRoutes;
diff --git a/platform/app/src/utils/legacyOIDCClient.ts b/platform/app/src/utils/legacyOIDCClient.ts
index ebd076dedc3..a360653d192 100644
--- a/platform/app/src/utils/legacyOIDCClient.ts
+++ b/platform/app/src/utils/legacyOIDCClient.ts
@@ -1,4 +1,4 @@
-import { UserManager } from 'oidc-client';
+import { UserManager, WebStorageStateStore } from 'oidc-client';
 
 /**
  * Creates a userManager from oidcSettings
@@ -23,6 +23,7 @@ export default function getUserManagerForOpenIdConnectClient(oidcSettings) {
     revokeAccessTokenOnSignout: true,
     filterProtocolClaims: true,
     loadUserInfo: true,
+    userStore: new WebStorageStateStore({ store: window.localStorage }),
   };
 
   const userManager = new UserManager(settings);
diff --git a/platform/app/src/utils/nextOIDCClient.ts b/platform/app/src/utils/nextOIDCClient.ts
index 24213698e0c..b2908b24402 100644
--- a/platform/app/src/utils/nextOIDCClient.ts
+++ b/platform/app/src/utils/nextOIDCClient.ts
@@ -1,4 +1,4 @@
-import { UserManager } from 'oidc-client-ts';
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts';
 
 /**
  * Creates a userManager from oidcSettings
@@ -29,6 +29,7 @@ export default function getUserManagerForOpenIdConnectClient(oidcSettings) {
     revokeTokensOnSignout: oidcSettings.revokeAccessTokenOnSignout ?? true,
     filterProtocolClaims: true,
     loadUserInfo: true,
+    userStore: new WebStorageStateStore({ store: window.localStorage }),
     // the followings are default values in the lib so no need to set them
     // automaticSilentRenew: true,
   };