improve authentication on app pages

frontend/src/core/providers/OverlayProvider/index.js

@@ -117,19 +117,26 @@ const OverlayProvider = ({ children }) => {
 
   useLayoutEffect(() => {
     if (
+      modal.type !== MODAL_TYPES.LOGIN &&
+      !modalDisclosure.isOpen &&
       ui.isAppView &&
-      ui.isInit &&
-      !user?.username &&
-      !ui.isLoggingOut &&
-      !ui.isLoggingIn &&
-      !modal.type
+      !ui.isLoggedIn &&
+      !ui.isLoggingOut
     ) {
       toggleModal({ type: MODAL_TYPES.LOGIN });
-    } else if (user && ui.isLoggingOut) {
+    } else if (
+      (modal.type === MODAL_TYPES.LOGIN || modal.type === MODAL_TYPES.SIGNUP) &&
+      ui.isLoggedIn
+    ) {
       toggleModal({ type: MODAL_TYPES.OFF });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ui.isAppView, ui.isAppReady, user, ui.isLoggingOut, modal.type]);
+  }, [
+    modal.type,
+    modalDisclosure,
+    ui.isAppView,
+    ui.isLoggedIn,
+    ui.isLoggingOut,
+  ]);
 
   const finishNewDashboard = () => {
     toggleDrawer({

frontend/src/core/providers/UserProvider/index.js

@@ -17,9 +17,17 @@ const UserProvider = ({ children }) => {
     const headers = { Authorization: `Bearer ${token}` };
     http
       .get(`${AUTH_URL}/`, { headers })
-      .then((response) => {
-        setUser(response.data);
-      })
+      .then(
+        (response) => {
+          setUser(response.data);
+        },
+        (reason) => {
+          if (reason.response.data === "Access token not found") {
+            localStorage.removeItem("MOONSTREAM_ACCESS_TOKEN");
+            setUser(null);
+          }
+        }
+      )
       .catch(() => setUser(null))
       .finally(() => setInit(true));
   }, []);

frontend/src/layouts/AppLayout.js

@@ -30,7 +30,7 @@ const AppLayout = ({ children }) => {
           left="50%"
           size="xl"
           speed="1s"
-          zIndex={100001}
+          zIndex={1011}
         />
       )}
       {(!ui.isAppReady || !ui.isLoggedIn) && (
@@ -41,7 +41,7 @@ const AppLayout = ({ children }) => {
           left={0}
           right={0}
           bg="rgba(0,0,0,0.7)"
-          zIndex={100000}
+          zIndex={1010}
         />
       )}