fix(oidc): resolve navigation throttling and blank screen during sign-in/sign-out with Keycloak + dcm4chee + Traefik (#5373)

platform/app/src/routes/SignoutCallbackComponent.tsx

@@ -1,24 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 function SignoutCallbackComponent({ userManager }) {
   const navigate = useNavigate();
 
-  const onRedirectSuccess = (/* user */) => {
-    const { pathname, search = '' } = JSON.parse(sessionStorage.getItem('ohif-redirect-to'));
+  useEffect(() => {
+    const onRedirectSuccess = (/* user */) => {
+      const { pathname, search = '' } = JSON.parse(
+        sessionStorage.getItem('ohif-redirect-to')
+      );
 
-    navigate(`${pathname}?${search}`);
-  };
+      navigate(`${pathname}?${search}`);
+    };
 
-  const onRedirectError = error => {
-    throw new Error(error);
-  };
+    const onRedirectError = error => {
+      throw new Error(error);
+    };
 
-  userManager
-    .signoutRedirectCallback()
-    .then(user => onRedirectSuccess(user))
-    .catch(error => onRedirectError(error));
+    userManager
+      .signoutRedirectCallback()
+      .then(user => onRedirectSuccess(user))
+      .catch(error => onRedirectError(error));
+  }, [navigate, userManager]);
 
   return null;
 }

platform/app/src/utils/OpenIdConnectRoutes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router';
 import CallbackPage from '../routes/CallbackPage';
 import SignoutCallbackComponent from '../routes/SignoutCallbackComponent';
@@ -94,7 +94,7 @@ function LoginComponent(userManager) {
 }
 
 function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }) {
-  const userManager = initUserManager(oidc, routerBasename);
+  const userManager = useMemo(() => initUserManager(oidc, routerBasename), [oidc, routerBasename]);
 
   const getAuthorizationHeader = () => {
     const user = userAuthenticationService.getUser();