change(ui): update authDetails to expire after a hour

frontend/app/PublicRoutes.tsx

@@ -19,14 +19,14 @@ const Spot = lazy(() => import('Components/Spots/SpotPlayer/SpotPlayer'));
 
 function PublicRoutes() {
   const { userStore } = useStore();
-  const authDetails = userStore.authDetails;
+  const authDetails = userStore.authStore.authDetails;
   const isEnterprise = userStore.isEnterprise;
   const hideSupport = isEnterprise || location.pathname.includes('spots') || location.pathname.includes('view-spot');
   const [loading, setLoading] = React.useState(true);
 
   useEffect(() => {
     if (authDetails && !authDetails.tenants) {
-      userStore.fetchTenants().then(() => setLoading(false));
+      userStore.authStore.fetchTenants().then(() => setLoading(false));
     } else {
       setLoading(false);
     }

frontend/app/components/Login/Login.tsx

@@ -35,9 +35,8 @@ const Login = ({
   const { loginStore, userStore } = useStore();
   const errors = userStore.loginRequest.errors;
   const loading = loginStore.loading;
-  const authDetails = userStore.authDetails;
+  const authDetails = userStore.authStore.authDetails;
   const setJwt = userStore.updateJwt;
-  const fetchTenants = userStore.fetchTenants;
   const history = useHistory();
   const params = new URLSearchParams(location.search);
 

frontend/app/components/Signup/Signup.tsx

@@ -26,7 +26,7 @@ type SignupProps = RouteComponentProps;
 
 const Signup: React.FC<SignupProps> = ({ history }) => {
   const { userStore } = useStore();
-  const authDetails = userStore.authDetails;
+  const authDetails = userStore.authStore.authDetails;
   const [healthModalPassed, setHealthModalPassed] = useState<boolean>(localStorage.getItem(healthStatusCheck_key) === 'true');
   const [healthStatusLoading, setHealthStatusLoading] = useState<boolean>(true);
   const [healthStatus, setHealthStatus] = useState<any>(null);

frontend/app/mstore/index.tsx

@@ -168,4 +168,4 @@ export const withStore = (Component: any) => (props: any) => {
   return <Component {...props} mstore={useStore()} />;
 };
 
-export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client };
+export { userStore, sessionStore, searchStore, searchStoreLive, projectStore, client };

frontend/app/mstore/userStore.ts

@@ -27,7 +27,6 @@ class UserStore {
   passwordRequestError: boolean = false;
   passwordErrors: string[] = [];
   tenants: any[] = [];
-  authDetails: Record<string, any> = {};
   onboarding: boolean = false;
   sites: any[] = [];
   jwt: string | null = null;
@@ -50,10 +49,12 @@ class UserStore {
     errors: [] as string[],
   };
   scopeState: number | null = null;
-  client = new Client();
+  client = new Client()
+  authStore: AuthStore;
 
-  constructor() {
+  constructor(authStore: AuthStore) {
     makeAutoObservable(this);
+    this.authStore = authStore;
 
     void makePersistable(
       this,
@@ -65,7 +66,6 @@ class UserStore {
           'jwt',
           'spotJwt',
           'scopeState',
-          'authDetails',
           'onboarding',
           {
             key: 'account',
@@ -76,15 +76,6 @@ class UserStore {
               return new Account(JSON.parse(json));
             },
           },
-          {
-            key: 'authDetails',
-            serialize: (ad) => {
-              return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({});
-            },
-            deserialize: (json) => {
-              return JSON.parse(json)
-            },
-          },
         ],
         storage: window.localStorage,
       },
@@ -98,7 +89,7 @@ class UserStore {
     return (
       this.account?.edition === 'ee' ||
       this.account?.edition === 'msaas' ||
-      this.authDetails?.edition === 'ee'
+      this.authStore.authDetails?.edition === 'ee'
     );
   }
 
@@ -446,17 +437,6 @@ class UserStore {
     }
   };
 
-  fetchTenants = async () => {
-    try {
-      const response = await userService.fetchTenants();
-      runInAction(() => {
-        this.authDetails = response;
-      });
-    } catch (error) {
-      // TODO error handling
-    }
-  };
-
   fetchUserInfo = async () => {
     runInAction(() => {
       this.fetchInfoRequest = { loading: true, errors: [] };
@@ -603,7 +583,6 @@ class UserStore {
     this.passwordRequestError = false;
     this.passwordErrors = [];
     this.tenants = [];
-    this.authDetails = {};
     this.onboarding = false;
     this.sites = [];
     this.jwt = null;
@@ -628,6 +607,60 @@ class UserStore {
   };
 }
 
-const userStore = new UserStore();
+type AuthDetails = {
+  tenants: boolean;
+  sso: string | null;
+  ssoProvider: string | null;
+  enforceSSO: boolean | null;
+  edition: 'foss' | 'ee' | 'msaas';
+};
+
+class AuthStore {
+  authDetails: AuthDetails = {
+    tenants: false,
+    sso: null,
+    ssoProvider: null,
+    enforceSSO: null,
+    edition: 'foss',
+  };
+
+  constructor() {
+    makeAutoObservable(this);
+
+    void makePersistable(this, {
+      name: 'AuthStore',
+      properties: [
+        'authDetails',
+        {
+          key: 'authDetails',
+          serialize: (ad) => {
+            return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({});
+          },
+          deserialize: (json) => {
+            return JSON.parse(json)
+          },
+        },
+      ],
+      expireIn: 60000 * 60,
+      removeOnExpiration: true,
+      storage: window.localStorage,
+    });
+  }
+
+  fetchTenants = async () => {
+    try {
+      const response = await userService.fetchTenants();
+      runInAction(() => {
+        this.authDetails = response;
+      });
+    } catch (error) {
+      // TODO error handling
+    }
+  };
+}
+
+
+export const authStore = new AuthStore();
+const userStore = new UserStore(authStore);
 
 export default userStore;