Handle 401 unauthorized error in the UI

CHANGELOG.md

@@ -74,6 +74,8 @@
   highly-available when we have multiple Prometheus instances
   (PR[#3573](https://github.com/scality/metalk8s/pull/3573))
 
+- Handle 401 unauthorized error in MetalK8s UI
+  (PR[#3640](https://github.com/scality/metalk8s/pull/3640))
 ## Bug fixes
 
 - [#3601](https://github.com/scality/metalk8s/issues/3601) - Marks

shell-ui/package.json

@@ -47,7 +47,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@scality/core-ui": "github:scality/core-ui.git#v0.24.2",
+    "@scality/core-ui": "github:scality/core-ui.git#v0.25.0",
     "@scality/module-federation": "github:scality/module-federation.git#1.0.0",
     "oidc-client": "^1.11.3",
     "oidc-react": "^1.1.5",

shell-ui/src/FederatedApp.jsx

@@ -37,11 +37,7 @@ import {
   useConfigRetriever,
   useDiscoveredViews,
 } from './initFederation/ConfigurationProviders';
-import {
-  Route,
-  Switch,
-  Router,
-} from 'react-router-dom';
+import { Route, Switch, Router } from 'react-router-dom';
 import {
   ShellConfigProvider,
   useShellConfig,
@@ -203,13 +199,17 @@ function WithInitFederationProviders({ children }: { children: Node }) {
 export default function App(): Node {
   return (
     <ScrollbarWrapper>
-      <QueryClientProvider client={queryClient} contextSharing={true}>
-        <ShellConfigProvider shellConfigUrl={'/shell/config.json'}>
-          <WithInitFederationProviders>
-            <InternalApp />
-          </WithInitFederationProviders>
-        </ShellConfigProvider>
-      </QueryClientProvider>
+      <div
+        style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <QueryClientProvider client={queryClient} contextSharing={true}>
+          <ShellConfigProvider shellConfigUrl={'/shell/config.json'}>
+            <WithInitFederationProviders>
+              <InternalApp />
+            </WithInitFederationProviders>
+          </ShellConfigProvider>
+        </QueryClientProvider>
+      </div>
     </ScrollbarWrapper>
   );
 }

ui/package.json

@@ -9,7 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.2-63-g579d066",
-    "@scality/core-ui": "github:scality/core-ui.git#v0.24.2",
+    "@scality/core-ui": "github:scality/core-ui.git#v0.25.0",
     "@scality/module-federation": "github:scality/module-federation.git#1.0.0",
     "axios": "^0.21.1",
     "formik": "2.2.5",

ui/src/FederableApp.js

@@ -18,13 +18,21 @@ import { useTypedSelector } from './hooks';
 import { setHistory as setReduxHistory } from './ducks/history';
 import { setApiConfigAction } from './ducks/config';
 import { initToggleSideBarAction } from './ducks/app/layout';
+import { authErrorAction } from './ducks/app/authError';
+import { AuthError } from './services/errorhandler';
 
 const composeEnhancers =
   typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
     : compose;
 
-const sagaMiddleware = createSagaMiddleware();
+const sagaMiddleware = createSagaMiddleware({
+  onError: (error) => {
+    if (error instanceof AuthError) {
+      store.dispatch(authErrorAction());
+    }
+  },
+});
 const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
 export const store = createStore(reducer, enhancer);
 

ui/src/containers/PrivateRoute.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Route } from 'react-router-dom';
-import { ErrorPage500, ErrorPageAuth } from '@scality/core-ui';
+import { useHistory } from 'react-router';
+import { ErrorPage500, ErrorPageAuth, ErrorPage401 } from '@scality/core-ui';
 import { useTypedSelector } from '../hooks';
 import { ComponentWithFederatedImports } from '@scality/module-federation';
 import { useDispatch } from 'react-redux';
@@ -13,16 +14,28 @@ const InternalPrivateRoute = ({
   ...rest
 }) => {
   const { language, api } = useTypedSelector((state) => state.config);
+  const { isAuthError } = useTypedSelector((state) => state.app.authError);
   const url_support = api?.url_support;
   const { userData } = moduleExports['./auth/AuthProvider'].useAuth();
   const dispatch = useDispatch();
+  const history = useHistory();
 
   useMemo(() => {
     dispatch(updateAPIConfigAction(userData));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [!userData]);
 
-  if (userData.token && userData.username) {
+  if (isAuthError) {
+    return (
+      <ErrorPage401
+        supportLink={url_support}
+        locale={language}
+        onReturnHomeClick={() => {
+          history.push('/');
+        }}
+      />
+    );
+  } else if (userData.token && userData.username) {
     return <Route {...rest} component={component} />;
   } else {
     return (

ui/src/ducks/app/authError.js

@@ -0,0 +1,29 @@
+//@flow
+export type AuthErrorState = {
+  isAuthError: boolean,
+};
+
+type AuthErrorAction = {
+  type: 'AUTH_ERROR',
+};
+
+const defaultState: AuthErrorState = {
+  isAuthError: false,
+};
+
+export default function reducer(
+  state: AuthErrorState = defaultState,
+  action: AuthErrorAction,
+) {
+  switch (action.type) {
+    case 'AUTH_ERROR': {
+      return { ...state, isAuthError: true };
+    }
+    default:
+      return { ...state };
+  }
+}
+
+export function authErrorAction() {
+  return { type: 'AUTH_ERROR' };
+}

ui/src/ducks/reducer.js

@@ -9,6 +9,8 @@ import pods from './app/pods';
 import type { PodsState } from './app/pods';
 import volumes from './app/volumes';
 import type { VolumesState } from './app/volumes';
+import authError from './app/authError';
+import type { AuthErrorState } from './app/authError';
 import login from './login';
 import type { LoginState } from './login';
 import layout from './app/layout';
@@ -31,6 +33,7 @@ const rootReducer = combineReducers({
     salt,
     monitoring,
     volumes,
+    authError,
   }),
   oidc: oidcReducer,
   history: historyReducer,
@@ -49,6 +52,7 @@ export type RootState = {
     layout: LayoutState,
     salt: SaltState,
     monitoring: MonitoringState,
+    authError: AuthErrorState,
   },
 };
 

ui/src/services/errorhandler.js

@@ -0,0 +1,13 @@
+export class AuthError extends Error {}
+
+export function handleUnAuthorizedError({ error }) {
+  if (
+    error?.response?.statusCode === 401 ||
+    error?.response?.statusCode === 403 ||
+    error?.response?.status === 401 ||
+    error?.response?.status === 403
+  ) {
+    throw new AuthError();
+  }
+  return { error };
+}

ui/src/services/k8s/core.js

@@ -1,18 +1,19 @@
+import { handleUnAuthorizedError } from '../errorhandler';
 import { coreV1, appsV1 } from './api';
 
 export async function getNodes() {
   try {
     return await coreV1.listNode();
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
 export async function getPods() {
   try {
     return await coreV1.listPodForAllNamespaces();
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -25,15 +26,15 @@ export async function getKubeSystemNamespace() {
       'metadata.name=kube-system',
     );
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
 export async function createNode(payload) {
   try {
     return await coreV1.createNode(payload);
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -57,7 +58,7 @@ export async function listNamespaces({
       options,
     );
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -72,7 +73,7 @@ export async function queryPodInNamespace(namespace, podLabel) {
       `app=${podLabel}`,
     );
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -86,7 +87,7 @@ export async function createNamespacedConfigMap(name, namespace, restProps) {
   try {
     return await coreV1.createNamespacedConfigMap(namespace, body);
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -115,30 +116,30 @@ export async function patchNamespacedConfigMap(
       { headers: { 'Content-Type': cTypeHeader } },
     );
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
 export async function getNamespacedDeployment(name, namespace) {
   try {
     return await appsV1.readNamespacedDeployment(name, namespace);
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
 export async function readNode(name) {
   try {
     return await coreV1.readNode(name);
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
 export async function readNamespacedConfigMap(nameConfigMap, namespace) {
   try {
     return await coreV1.readNamespacedConfigMap(nameConfigMap, namespace);
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }

ui/src/services/k8s/volumes.js

@@ -1,4 +1,5 @@
 //@flow
+import { handleUnAuthorizedError } from '../errorhandler';
 import { coreV1, storage } from './api';
 
 export async function getPersistentVolumes() {
@@ -8,7 +9,7 @@ export async function getPersistentVolumes() {
   try {
     return await coreV1.listPersistentVolume();
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -19,7 +20,7 @@ export async function getStorageClass() {
   try {
     return await storage.listStorageClass();
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }
 
@@ -30,6 +31,6 @@ export async function getPersistentVolumeClaims() {
   try {
     return await coreV1.listPersistentVolumeClaimForAllNamespaces();
   } catch (error) {
-    return { error };
+    return handleUnAuthorizedError({ error });
   }
 }