🎨 [Frontend] React to a 401 Unauthorized (#6261)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/Application.js

@@ -73,7 +73,7 @@ qx.Class.define("osparc.Application", {
       const webSocket = osparc.wrapper.WebSocket.getInstance();
       webSocket.addListener("connect", () => osparc.WatchDog.getInstance().setOnline(true));
       webSocket.addListener("disconnect", () => osparc.WatchDog.getInstance().setOnline(false));
-      webSocket.addListener("logout", () => this.logout());
+      webSocket.addListener("logout", () => this.logout(qx.locale.Manager.tr("You were logged out")));
       // alert the users that they are about to navigate away
       // from osparc. unfortunately it is not possible
       // to provide our own message here
@@ -96,7 +96,7 @@ qx.Class.define("osparc.Application", {
       });
 
       // Setting up auth manager
-      osparc.auth.Manager.getInstance().addListener("logout", () => this.__restart(), this);
+      osparc.auth.Manager.getInstance().addListener("loggedOut", () => this.__closeAllAndToLoginPage(), this);
 
       this.__initRouting();
       this.__startupChecks();
@@ -491,7 +491,6 @@ qx.Class.define("osparc.Application", {
 
     __restart: function() {
       let isLogged = osparc.auth.Manager.getInstance().isLoggedIn();
-
       if (isLogged) {
         this.__loadMainPage();
       } else {
@@ -635,13 +634,21 @@ qx.Class.define("osparc.Application", {
       } else {
         osparc.FlashMessenger.getInstance().logAs(this.tr("You are logged out"), "INFO");
       }
+      const isLoggedIn = osparc.auth.Manager.getInstance().isLoggedIn();
+      if (isLoggedIn) {
+        osparc.auth.Manager.getInstance().logout()
+          .finally(() => this.__closeAllAndToLoginPage());
+      } else {
+        this.__closeAllAndToLoginPage();
+      }
+    },
 
+    __closeAllAndToLoginPage: function() {
       osparc.data.PollTasks.getInstance().removeTasks();
       osparc.MaintenanceTracker.getInstance().stopTracker();
       osparc.CookieExpirationTracker.getInstance().stopTracker();
       osparc.NewUITracker.getInstance().stopTracker();
       osparc.announcement.Tracker.getInstance().stopTracker();
-      osparc.auth.Manager.getInstance().logout();
       if ("closeEditor" in this.__mainPage) {
         this.__mainPage.closeEditor();
       }

services/static-webserver/client/source/class/osparc/auth/Manager.js

@@ -33,7 +33,7 @@ qx.Class.define("osparc.auth.Manager", {
   */
 
   events: {
-    "logout": "qx.event.type.Event"
+    "loggedOut": "qx.event.type.Event"
   },
 
 
@@ -212,8 +212,8 @@ qx.Class.define("osparc.auth.Manager", {
           "client_session_id": osparc.utils.Utils.getClientSessionID()
         }
       };
-      osparc.data.Resources.fetch("auth", "postLogout", params)
-        .then(data => this.fireEvent("logout"))
+      return osparc.data.Resources.fetch("auth", "postLogout", params)
+        .then(data => this.fireEvent("loggedOut"))
         .catch(error => console.log("already logged out"))
         .finally(this.__logoutUser());
     },

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -145,7 +145,10 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     reloadResources: function() {
-      if (osparc.data.Permissions.getInstance().canDo("studies.user.read")) {
+      if (
+        osparc.data.Permissions.getInstance().canDo("studies.user.read") &&
+        osparc.auth.Manager.getInstance().isLoggedIn()
+      ) {
         this.__reloadStudies();
       } else {
         this.__resetStudiesList();

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -57,7 +57,6 @@
 
 qx.Class.define("osparc.data.Resources", {
   extend: qx.core.Object,
-
   type: "singleton",
 
   defer: function(statics) {
@@ -1320,6 +1319,21 @@ qx.Class.define("osparc.data.Resources", {
             status = req.getStatus();
           }
           res.dispose();
+
+          // If a 401 is received, make a call to the /me endpoint.
+          // If the backend responds with yet another 401, assume that the backend logged the user out
+          if (status === 401 && resource !== "profile" && osparc.auth.Manager.getInstance().isLoggedIn()) {
+            console.warn("Checking if user is logged in the backend");
+            this.fetch("profile", "getOne")
+              .catch(err => {
+                if ("status" in err && err.status === 401) {
+                  // Unauthorized again, the cookie might have expired.
+                  // We can assume that all calls after this will respond with 401, so bring the user ot the login page.
+                  qx.core.Init.getApplication().logout(qx.locale.Manager.tr("You were logged out"));
+                }
+              });
+          }
+
           if ([404, 503].includes(status)) {
             message += "<br>Please try again later and/or contact support";
           }