feat: Support for OpenID Connect (#2431)

* feat: Add OpenID Connect support, speed up docker rebuilds

* fix: Switch Google Cloud API URL to v1

* chore: Remove redux-oidc and use our own components instead

platform/ui/index.js

@@ -25,6 +25,9 @@ export {
   ViewportGridContext,
   ViewportGridProvider,
   useViewportGrid,
+  UserAuthenticationContext,
+  UserAuthenticationProvider,
+  useUserAuthentication,
 } from './src/contextProviders';
 
 /** COMPONENTS */
@@ -92,7 +95,7 @@ export {
   ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
-  WindowLevelMenuItem
+  WindowLevelMenuItem,
 } from './src/components';
 
 /** VIEWS */

platform/ui/package.json

@@ -40,7 +40,7 @@
     "react-dnd-html5-backend": "10.0.2",
     "react-dom": "16.11.0",
     "react-draggable": "4.4.3",
-    "react-error-boundary": "2.2.x",
+    "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",
     "react-outside-click-handler": "^1.3.0",
     "react-select": "3.0.8",

platform/ui/src/components/Header/Header.jsx

@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 // TODO: This may fail if package is split from PWA build
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
 
 function Header({ children, menuOptions, isReturnEnabled, isSticky, WhiteLabeling }) {
   const { t } = useTranslation('Header');
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // TODO: this should be passed in as a prop instead and the react-router-dom
   // dependency should be dropped
   const onReturnHandler = () => {
     if (isReturnEnabled) {
-      history.push('/');
+      navigate('/');
     }
   };
 

platform/ui/src/contextProviders/UserAuthenticationProvider.js

@@ -0,0 +1,133 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+} from 'react';
+import PropTypes from 'prop-types';
+
+const DEFAULT_STATE = {
+  user: null,
+  enabled: false,
+};
+
+export const UserAuthenticationContext = createContext(DEFAULT_STATE);
+
+export function UserAuthenticationProvider({ children, service }) {
+  const userAuthenticationReducer = (state, action) => {
+    switch (action.type) {
+      case 'SET_USER': {
+        return {
+          ...state,
+          ...{ user: action.payload.user },
+        };
+      }
+      case 'RESET': {
+        return {
+          user: null,
+        };
+      }
+
+      case 'SET': {
+        return {
+          ...state,
+          ...action.payload,
+        };
+      }
+
+      default:
+        return action.payload;
+    }
+  };
+
+  const [userAuthenticationState, dispatch] = useReducer(
+    userAuthenticationReducer,
+    DEFAULT_STATE
+  );
+
+  const getState = useCallback(() => userAuthenticationState, [
+    userAuthenticationState,
+  ]);
+
+  const setUser = useCallback(
+    user =>
+      dispatch({
+        type: 'SET_USER',
+        payload: {
+          user,
+        },
+      }),
+    [dispatch]
+  );
+
+  const getUser = useCallback(() => userAuthenticationState.user, [
+    userAuthenticationState,
+  ]);
+
+  const reset = useCallback(
+    () =>
+      dispatch({
+        type: 'RESET',
+        payload: {},
+      }),
+    [dispatch]
+  );
+
+  const set = useCallback(
+    payload =>
+      dispatch({
+        type: 'SET',
+        payload,
+      }),
+    [dispatch]
+  );
+
+  /**
+   * Sets the implementation of the UserAuthenticationService that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({
+        getState,
+        setUser,
+        getUser,
+        reset,
+        set,
+      });
+    }
+  }, [getState, service, setUser, getUser, reset, set]);
+
+  const api = {
+    getState,
+    setUser,
+    getUser,
+    getAuthorizationHeader: service.getAuthorizationHeader,
+    handleUnauthenticated: service.handleUnauthenticated,
+    reset,
+    set,
+  };
+
+  return (
+    <UserAuthenticationContext.Provider value={[userAuthenticationState, api]}>
+      {children}
+    </UserAuthenticationContext.Provider>
+  );
+}
+
+export default UserAuthenticationProvider;
+
+const UserAuthenticationConsumer = UserAuthenticationContext.Consumer;
+export { UserAuthenticationConsumer };
+
+UserAuthenticationProvider.propTypes = {
+  children: PropTypes.any,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }).isRequired,
+};
+
+export const useUserAuthentication = () =>
+  useContext(UserAuthenticationContext);

platform/ui/src/contextProviders/index.js

@@ -2,7 +2,7 @@ export {
   default as DialogProvider,
   useDialog,
   withDialog,
-} from './DialogProvider'
+} from './DialogProvider';
 
 export { default as DragAndDropProvider } from './DragAndDropProvider';
 
@@ -19,17 +19,13 @@ export {
   useImageViewer,
 } from './ImageViewerProvider';
 
-export {
-  CineContext,
-  default as CineProvider,
-  useCine,
-} from './CineProvider';
+export { CineContext, default as CineProvider, useCine } from './CineProvider';
 
 export {
   default as SnackbarProvider,
   useSnackbar,
   withSnackbar,
-} from './SnackbarProvider'
+} from './SnackbarProvider';
 
 export {
   default as ViewportDialogProvider,
@@ -41,3 +37,9 @@ export {
   ViewportGridProvider,
   useViewportGrid,
 } from './ViewportGridProvider';
+
+export {
+  UserAuthenticationContext,
+  UserAuthenticationProvider,
+  useUserAuthentication,
+} from './UserAuthenticationProvider';