🛂 Remove page reload on auth failure (#981)

services/get-user.js

@@ -1,15 +1,15 @@
 module.exports = (config, req) => {
   try {
-    if ( config.appConfig.auth.enableHeaderAuth ) {
-      const userHeader = config.appConfig.auth.headerAuth.userHeader;
-      const proxyWhitelist = config.appConfig.auth.headerAuth.proxyWhitelist;
-      if ( proxyWhitelist.includes(req.socket.remoteAddress) ) {
-        return { "success": true, "user": req.headers[userHeader.toLowerCase()] };
+    if (config.appConfig.auth.enableHeaderAuth) {
+      const { userHeader } = config.appConfig.auth.headerAuth;
+      const { proxyWhitelist } = config.appConfig.auth.headerAuth;
+      if (proxyWhitelist.includes(req.socket.remoteAddress)) {
+        return { success: true, user: req.headers[userHeader.toLowerCase()] };
       }
     }
     return {};
   } catch (e) {
-    console.warn("Error get-user: ", e);
-    return { 'success': false };
+    console.warn('Error get-user: ', e);
+    return { success: false };
   }
-};
+};

src/main.js

@@ -23,6 +23,7 @@ import { toastedOptions, tooltipOptions, language as defaultLanguage } from '@/u
 import { initKeycloakAuth, isKeycloakEnabled } from '@/utils/KeycloakAuth';
 import { initHeaderAuth, isHeaderAuthEnabled } from '@/utils/HeaderAuth';
 import Keys from '@/utils/StoreMutations';
+import ErrorHandler from '@/utils/ErrorHandler';
 
 // Initialize global Vue components
 Vue.use(VueI18n);
@@ -61,16 +62,19 @@ const mount = () => new Vue({
 }).$mount('#app');
 
 store.dispatch(Keys.INITIALIZE_CONFIG).then(() => {
-  // Keycloak is enabled, redirect to KC login page
-  if (isKeycloakEnabled()) {
+  if (isKeycloakEnabled()) { // If Keycloak is enabled, initialize auth
     initKeycloakAuth()
       .then(() => mount())
-      .catch(() => window.location.reload());
-  } else if (isHeaderAuthEnabled()) {
+      .catch((e) => {
+        ErrorHandler('Failed to authenticate with Keycloak', e);
+      });
+  } else if (isHeaderAuthEnabled()) { // If header auth is enabled, initialize auth
     initHeaderAuth()
       .then(() => mount())
-      .catch(() => window.location.reload());
-  } else { // If Keycloak not enabled, then proceed straight to the app
+      .catch((e) => {
+        ErrorHandler('Failed to authenticate with server', e);
+      });
+  } else { // If no third-party auth, just mount the app as normal
     mount();
   }
 });

src/utils/HeaderAuth.js

@@ -3,7 +3,7 @@ import sha256 from 'crypto-js/sha256';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { cookieKeys, localStorageKeys, serviceEndpoints } from '@/utils/defaults';
 import { InfoHandler, ErrorHandler, InfoKeys } from '@/utils/ErrorHandler';
-import { logout } from '@/utils/Auth';
+import { logout as authLogout } from '@/utils/Auth';
 
 const getAppConfig = () => {
   const Accumulator = new ConfigAccumulator();
@@ -22,7 +22,6 @@ class HeaderAuth {
     this.users = auth.users;
   }
 
-  /* eslint-disable class-methods-use-this */
   login() {
     return new Promise((resolve, reject) => {
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
@@ -44,6 +43,7 @@ class HeaderAuth {
               }
             });
           } catch (e) {
+            ErrorHandler('Error while trying to login using header authentication', e);
             reject(e);
           }
         }
@@ -51,8 +51,9 @@ class HeaderAuth {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   logout() {
-    logout();
+    authLogout();
   }
 }