Integrate AppBootstrap and split response interceptors based on flags (#1678)

<!--
Ensure the title clearly reflects what was changed.
Provide a clear and concise description of the changes made. The PR
should only contain the changes related to the issue, and no other
unrelated changes.
-->
Part of OPS-3125

## Additional Notes

<!--
Why was it changed?
Any relevant context or links?
Add refactoring notes (if applicable), preferably as comments in the
code (if you refactored code, explain what was moved/changed and why).
-->

## Testing Checklist

Check all that apply:

- [x] I tested the feature thoroughly, including edge cases

- [x] I verified all affected areas still work as expected

- [x] Changes are backwards compatible with any existing data, otherwise
a migration script is provided

## Visual Changes (if applicable)
None

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* App shows a full-screen loading spinner while initializing on startup.
* App initialization now fetches feature flags and completes bootstrap
before rendering.

* **Bug Fixes / Reliability**
* Improved request/response handling to better manage authentication and
error cases during runtime.
* Startup errors are surfaced and prevent partial renders, reducing
inconsistent states.

* **Chores**
* App render tree updated to initialize within a bootstrap and error
boundary.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: alexandrudanpop

packages/react-ui/src/app/app-bootstrap.tsx

@@ -0,0 +1,66 @@
+import { LoadingSpinner } from '@openops/components/ui';
+import { useEffect, useState } from 'react';
+import { QueryKeys } from './constants/query-keys';
+import { flagsApi, FlagsMap } from './lib/flags-api';
+import { initializeInternal } from './lib/initialize-internal';
+import { queryClient } from './lib/query-client';
+
+type AppBootstrapProps = {
+  children: React.ReactNode;
+};
+
+type BootstrapState =
+  | { status: 'loading' }
+  | { status: 'ready' }
+  | { status: 'error'; error: Error };
+
+export function AppBootstrap({ children }: Readonly<AppBootstrapProps>) {
+  const [state, setState] = useState<BootstrapState>({ status: 'loading' });
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function bootstrap() {
+      try {
+        const flags = await flagsApi.getAll();
+        queryClient.setQueryData<FlagsMap>([QueryKeys.flags], flags);
+        await initializeInternal();
+
+        if (mounted) {
+          setState({ status: 'ready' });
+        }
+      } catch (error) {
+        console.error('Bootstrap failed:', error);
+        if (mounted) {
+          setState({
+            status: 'error',
+            error:
+              error instanceof Error
+                ? error
+                : new Error('Failed to initialize application'),
+          });
+        }
+      }
+    }
+
+    bootstrap();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (state.status === 'loading') {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center">
+        <LoadingSpinner size={50} />
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    throw state.error;
+  }
+
+  return children;
+}

packages/react-ui/src/app/common/guards/allow-logged-in-user-only-guard.tsx

@@ -13,7 +13,9 @@ import { SocketProvider } from '@/app/common/providers/socket-provider';
 // eslint-disable-next-line import/no-restricted-paths
 import { appConnectionsHooks } from '@/app/features/connections/lib/app-connections-hooks';
 import { authenticationSession } from '@/app/lib/authentication-session';
+import { getFronteggApp } from '@/app/lib/frontegg-setup';
 import { navigationUtil } from '@/app/lib/navigation-util';
+import { FlagId } from '@openops/shared';
 import { useQueryClient } from '@tanstack/react-query';
 import { userHooks } from '../hooks/user-hooks';
 
@@ -32,6 +34,30 @@ function isJwtExpired(token: string): boolean {
   }
 }
 
+const LoggedIn = ({ children }: { children: React.ReactNode }) => {
+  const queryClient = useQueryClient();
+
+  projectHooks.prefetchProject();
+  platformHooks.prefetchPlatform();
+  platformHooks.prefetchNewerVersionInfo(queryClient);
+
+  userSettingsHooks.useUserSettings();
+  userHooks.useUserMeta();
+  appConnectionsHooks.useConnectionsMetadata();
+
+  return (
+    <Suspense
+      fallback={
+        <div className=" flex h-screen w-screen items-center justify-center ">
+          <LoadingSpinner size={50}></LoadingSpinner>
+        </div>
+      }
+    >
+      <SocketProvider>{children}</SocketProvider>
+    </Suspense>
+  );
+};
+
 type AllowOnlyLoggedInUserOnlyGuardProps = {
   children: React.ReactNode;
 };
@@ -40,30 +66,32 @@ export const AllowOnlyLoggedInUserOnlyGuard = ({
 }: AllowOnlyLoggedInUserOnlyGuardProps) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
+  const { data: flags } = flagsHooks.useFlags();
+  const { data: isFederatedLogin } = flagsHooks.useFlag<boolean | undefined>(
+    FlagId.FEDERATED_LOGIN_ENABLED,
+  );
 
   const token = authenticationSession.getToken();
-  const isLoggedIn = authenticationSession.isLoggedIn();
+  const fronteggToken =
+    getFronteggApp()?.store.getState().auth.user?.accessToken;
+  const isLoggedIn = isFederatedLogin
+    ? fronteggToken
+    : authenticationSession.isLoggedIn();
   const expired = !token || isJwtExpired(token);
 
-  projectHooks.prefetchProject();
-  platformHooks.prefetchPlatform();
-  platformHooks.prefetchNewerVersionInfo(queryClient);
-
-  const { data: flags } = flagsHooks.useFlags();
-  userSettingsHooks.useUserSettings();
-  userHooks.useUserMeta();
-  appConnectionsHooks.useConnectionsMetadata();
-
   useEffect(() => {
     let isMounted = true;
     async function doLogout() {
       try {
-        await authenticationSession.logOut({
-          userInitiated: false,
-          navigate,
-          federatedLoginUrl: getFederatedUrlBasedOnFlags(flags),
-        });
+        if (isFederatedLogin) {
+          getFronteggApp()?.logout();
+        } else {
+          await authenticationSession.logOut({
+            userInitiated: false,
+            navigate,
+            federatedLoginUrl: getFederatedUrlBasedOnFlags(flags),
+          });
+        }
       } catch (e) {
         if (isMounted) {
           console.error('Logout failed:', e);
@@ -84,21 +112,14 @@ export const AllowOnlyLoggedInUserOnlyGuard = ({
     location.search,
     navigate,
     flags,
+    isFederatedLogin,
   ]);
 
-  if (!isLoggedIn || expired) {
+  if ((!isLoggedIn || expired) && !isFederatedLogin) {
     return <Navigate to="/sign-in" replace />;
+  } else if (!isLoggedIn && isFederatedLogin) {
+    return <Navigate to="/" replace />;
   }
 
-  return (
-    <Suspense
-      fallback={
-        <div className=" flex h-screen w-screen items-center justify-center ">
-          <LoadingSpinner size={50}></LoadingSpinner>
-        </div>
-      }
-    >
-      <SocketProvider>{children}</SocketProvider>
-    </Suspense>
-  );
+  return <LoggedIn>{children}</LoggedIn>;
 };

packages/react-ui/src/app/common/guards/intial-data-guard.tsx

@@ -1,13 +1,25 @@
 import { LoadingSpinner } from '@openops/components/ui';
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { setupResponseInterceptor } from '@/app/interceptors';
 
 type InitialDataGuardProps = {
   children: React.ReactNode;
 };
-export const InitialDataGuard = ({ children }: InitialDataGuardProps) => {
-  flagsHooks.prefetchFlags();
+export const InitialDataGuard = ({
+  children,
+}: Readonly<InitialDataGuardProps>) => {
+  const { data: flags } = flagsHooks.useFlags();
+
+  useEffect(() => {
+    if (!flags) {
+      console.error('Missing flags for response interceptor configuration');
+    }
+    setupResponseInterceptor({
+      isFederatedAuth: Boolean(flags?.FEDERATED_LOGIN_ENABLED),
+    });
+  }, [flags]);
 
   return (
     <Suspense

packages/react-ui/src/app/common/hooks/flags-hooks.ts

@@ -1,4 +1,4 @@
-import { usePrefetchQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { QueryKeys } from '@/app/constants/query-keys';
 import { flagsApi, FlagsMap } from '@/app/lib/flags-api';
@@ -29,14 +29,6 @@ type WebsiteBrand = {
 };
 
 export const flagsHooks = {
-  prefetchFlags: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    usePrefetchQuery<FlagsMap, Error>({
-      queryKey: [QueryKeys.flags],
-      queryFn: flagsApi.getAll,
-      staleTime: Infinity,
-    });
-  },
   useFlags: () => {
     return useSuspenseQuery<FlagsMap, Error>({
       queryKey: [QueryKeys.flags],

packages/react-ui/src/app/interceptors.ts

@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+import { createRequestInterceptor } from './request-interceptor';
+import {
+  createFederatedResponseInterceptor,
+  createResponseInterceptor,
+} from './response-interceptor';
+
+let requestInterceptorId: number | null = null;
+let responseInterceptorId: number | null = null;
+
+function setupRequestInterceptor(): void {
+  if (requestInterceptorId === null) {
+    const requestInterceptor = createRequestInterceptor();
+    requestInterceptorId = axios.interceptors.request.use(requestInterceptor);
+  }
+}
+
+setupRequestInterceptor();
+
+type ResponseInterceptorOptions = {
+  isFederatedAuth: boolean;
+};
+
+export function setupResponseInterceptor({
+  isFederatedAuth,
+}: ResponseInterceptorOptions): void {
+  if (responseInterceptorId === null) {
+    const responseInterceptor = isFederatedAuth
+      ? createFederatedResponseInterceptor()
+      : createResponseInterceptor();
+    responseInterceptorId = axios.interceptors.response.use(
+      responseInterceptor.onFulfilled,
+      responseInterceptor.onRejected,
+    );
+  }
+}

packages/react-ui/src/app/interceptors/index.ts

@@ -0,0 +1,34 @@
+import { API_URL, isUrlRelative } from '@/app/lib/api';
+import { authenticationSession } from '@/app/lib/authentication-session';
+import { InternalAxiosRequestConfig } from 'axios';
+
+const unauthenticatedRoutes = [
+  '/v1/authentication/sign-in',
+  '/v1/authentication/sign-up',
+  '/v1/authn/local/verify-email',
+  '/v1/flags',
+  '/v1/forms/',
+  '/v1/user-invitations/accept',
+];
+
+const needsAuthHeader = (url: string): boolean => {
+  const resolvedUrl = !isUrlRelative(url) ? url : `${API_URL}${url}`;
+  const isLocalUrl = resolvedUrl.includes(API_URL);
+  const isUnauthenticatedRoute = unauthenticatedRoutes.some((route) =>
+    url.startsWith(route),
+  );
+
+  return !isUnauthenticatedRoute && isLocalUrl;
+};
+
+export function createRequestInterceptor(): (
+  config: InternalAxiosRequestConfig,
+) => InternalAxiosRequestConfig {
+  return (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
+    const token = authenticationSession.getToken();
+    if (token && config.url && needsAuthHeader(config.url)) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  };
+}