@vtex/faststore-plugin-buyer-portal 1.1.115 → 1.1.116-poc-1

package/src/features/shared/hooks/useAuth.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { authClient } from "../clients/Auth";
+
+import { useBuyerPortal } from "./useBuyerPortal";
+
+export type UseAuthResult = {
+  isAuthenticated: boolean | null;
+  isLoading: boolean;
+};
+
+/**
+ * Client-side hook to validate user authentication.
+ * Checks access with the server and redirects to home if unauthorized.
+ *
+ * @returns Object containing authentication status and loading state
+ */
+export const useAuth = (): UseAuthResult => {
+  const { clientContext } = useBuyerPortal();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    const validateAccess = async () => {
+      setIsLoading(true);
+
+      try {
+        const hasAccess = await authClient.validateAccess(clientContext);
+
+        if (!hasAccess) {
+          router.push("/");
+          setIsAuthenticated(false);
+        } else {
+          setIsAuthenticated(true);
+        }
+      } catch {
+        router.push("/");
+        setIsAuthenticated(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    validateAccess();
+  }, [router]);
+
+  return {
+    isAuthenticated,
+    isLoading,
+  };
+};

package/src/features/shared/hooks/useCookieMonitor.ts

@@ -12,7 +12,6 @@ import { AUT_COOKIE_KEY } from "../utils/constants";
  */
 export const useCookieMonitor = () => {
   const [hasCookie, setHasCookie] = useState(false);
-  const [timedOut, setTimedOut] = useState(false);
 
   useEffect(() => {
     const checkCookie = () => {
@@ -59,10 +58,7 @@ export const useCookieMonitor = () => {
 
       // Cleanup after 5 seconds max
       const timeout = setTimeout(() => {
-        console.log(
-          "[useCookieMonitor] Polling timeout reached (5s) - cookie never appeared"
-        );
-        setTimedOut(true);
+        console.log("[useCookieMonitor] Polling timeout reached (5s)");
         clearInterval(interval);
       }, 5000);
 
@@ -73,5 +69,5 @@ export const useCookieMonitor = () => {
     }
   }, []);
 
-  return { hasCookie, timedOut };
+  return hasCookie;
 };

package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx

@@ -18,6 +18,7 @@ export type ContractTabsLayoutProps = {
     image?: ReactNode;
     name: string;
     role?: string;
+    id: string;
   };
   loading?: boolean;
   children?: ReactNode;
@@ -29,8 +30,9 @@ export const ContractTabsLayout = ({
   children,
   orgUnitId,
   contractId,
+  person,
 }: ContractTabsLayoutProps) => {
-  const { currentOrgUnit, currentUser, currentContract } = useBuyerPortal();
+  const { currentOrgUnit, currentContract } = useBuyerPortal();
 
   const verticalLinks = getContractSettingsLinks({
     contractId: currentContract?.id ?? contractId ?? "",
@@ -43,9 +45,9 @@ export const ContractTabsLayout = ({
         orgUnit={currentOrgUnit}
         pageName={pageName}
         person={{
-          name: currentUser?.name ?? "",
-          role: currentUser?.role ?? "",
-          id: currentUser?.id ?? "",
+          name: person.name,
+          role: person.role,
+          id: person.id,
         }}
         loading={loading}
       />

package/src/features/shared/layouts/ErrorTabsLayout/ErrorTabsLayout.tsx

@@ -82,6 +82,7 @@ export const ErrorTabsLayout = ({ children, error }: ErrorTabsLayoutProps) => {
             image: undefined,
             name: user?.name ?? "",
             role: user?.role ?? "",
+            id: user?.id ?? "",
           }}
         >
           <ErrorTabsLayoutContent title={pageTitle} error={error} />

package/src/features/shared/layouts/LoadingTabsLayout/LoadingTabsLayout.tsx

@@ -78,6 +78,7 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
             image: undefined,
             name: "",
             role: "",
+            id: "",
           }}
           loading={true}
         >
@@ -100,33 +101,7 @@ export const LoadingTabsLayout = ({ children }: LoadingTabsLayoutProps) => {
       );
 
     case "OrgUnitDetailsLayout":
-      return (
-        <OrgUnitsDetailsLayout
-          loading={true}
-          data={{
-            contracts: [],
-            orgUnit: {
-              contractMode: "Single",
-              customerGroup: { customerIds: [] },
-              id: routeParams.orgUnitId,
-              name: "",
-              path: {
-                ids: "",
-                names: "",
-              },
-            },
-            user: {
-              name: "",
-              roles: [],
-              id: "",
-              orgUnit: {
-                id: routeParams.orgUnitId,
-                name: "",
-              },
-            },
-          }}
-        />
-      );
+      return <OrgUnitsDetailsLayout loading={true} orgUnitId="" userId="" />;
 
     default:
       return <LoadingTabsLayoutContent />;

package/src/features/shared/types/AuthRouteProps.ts

@@ -1,11 +1,5 @@
 import { ClientContext } from "../utils";
 
 export type AuthRouteProps<T> =
-  | { authorized: true; data: T; clientContext: ClientContext; loading: false }
-  | { authorized: false; loading: false }
-  | {
-      authorized: false;
-      loading: true;
-      data?: Partial<T>;
-      clientContext?: ClientContext;
-    };
+  | { authorized: true; data: T; clientContext: ClientContext }
+  | { authorized: false };

package/src/features/shared/utils/withAuth.tsx

@@ -1,83 +1,31 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { useCookieMonitor } from "../hooks/useCookieMonitor";
-
 import type { AuthRouteProps } from "../types";
 
 /**
- * HOC that checks only for authorization.
- * Now handles loading state for pre-fetch scenarios.
+ * HOC that checks only for authorization
  */
 export const withAuth = <T extends Record<string, unknown>>(
   Component: ComponentType<T>
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
-    const reloadAttemptedRef = useRef(false);
-
-    // Debug logging
-    useEffect(() => {
-      console.log("[withAuth] Props state:", {
-        authorized: props?.authorized,
-        loading: props?.loading,
-        hasCookie,
-        timedOut,
-        reloadAttempted: reloadAttemptedRef.current,
-      });
-    }, [props?.authorized, props?.loading, hasCookie, timedOut]);
-
-    useEffect(() => {
-      // If not authorized and not loading, reload the page
-      if (
-        !props?.authorized &&
-        !props?.loading &&
-        !reloadAttemptedRef.current
-      ) {
-        console.log("[withAuth] Reloading: not authorized and not loading");
-        reloadAttemptedRef.current = true;
-        // Use replace to bypass Next.js data cache
-        router.replace(router.asPath);
-      }
-    }, [props?.authorized, props?.loading, router]);
 
     useEffect(() => {
-      if (props?.loading && hasCookie && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuth] Cookie available, performing hard reload to bypass cache"
-        );
-        reloadAttemptedRef.current = true;
-        // Hard reload to completely bypass Next.js cache
-        if (typeof window !== "undefined") {
-          window.location.href = router.asPath;
-        }
+      // If not authorized, reload the page
+      if (!props?.authorized) {
+        router.reload();
       }
-    }, [props?.loading, hasCookie, router]);
+    }, [props?.authorized, router]);
 
-    useEffect(() => {
-      // If we're in loading state and timeout reached, redirect to home
-      if (props?.loading && timedOut && !reloadAttemptedRef.current) {
-        console.log("[withAuth] Cookie timeout - redirecting to home page");
-        reloadAttemptedRef.current = true;
-        router.push("/");
-      }
-    }, [props?.loading, timedOut, router]);
-
-    // Always render the component, but pass loading state
-    // This allows components to handle their own loading states
-    if (!props?.authorized && !props?.loading) {
-      // Not authorized and not loading = permanently denied
+    // If not authorized, render nothing
+    if (!props?.authorized) {
       return null;
     }
 
-    // Render with whatever data we have (might be empty/partial if loading)
-    const componentProps = {
-      ...(props?.data || ({} as T)),
-      loading: props?.loading || false,
-    } as T & { loading: boolean };
-
-    return <Component {...componentProps} />;
+    // If authorized, render the component with the data
+    return <Component {...(props.data as T)} />;
   };
 };

package/src/features/shared/utils/withAuthLoader.ts

@@ -1,6 +1,5 @@
 import { validateAccessService } from "../services";
 
-import { getAuthCookie } from "./cookie";
 import { ClientContext, getClientContext } from "./getClientContext";
 
 import type { AuthRouteProps } from "../types";
@@ -9,57 +8,31 @@ import type { LoaderData } from "../types";
 /**
  * Utility function to encapsulate access validation in loaders.
  * Similar to withAuthProvider but for server-side usage.
- *
- * Now supports a loading state for when cookies are not yet available during pre-fetch.
  */
 export const withAuthLoader = async <T>(
   data: LoaderData,
   dataLoader: (clientContext: ClientContext) => Promise<T>
 ): Promise<AuthRouteProps<T>> => {
   try {
-    // Check if auth cookie exists before proceeding
-    const authCookie = getAuthCookie(data);
-
-    console.log("[withAuthLoader] Cookie check:", {
-      hasCookie: !!authCookie,
-      cookieLength: authCookie?.length,
-    });
-
-    if (!authCookie || authCookie === "") {
-      console.log("[withAuthLoader] Returning loading state (no cookie)");
-      return {
-        authorized: false,
-        loading: true,
-      };
-    }
-
     const { cookie, userId, ...clientContext } = await getClientContext(data);
 
     const hasAccess = await validateAccessService({ cookie });
 
-    console.log("[withAuthLoader] Access validation result:", hasAccess);
-
     if (!hasAccess) {
-      console.log("[withAuthLoader] Access denied, redirecting to /");
       data.res?.writeHead(302, { Location: "/" });
       data.res?.end();
 
       return {
         authorized: false,
-        loading: false,
       };
     }
 
     const pageData = await dataLoader({ cookie, userId, ...clientContext });
 
-    console.log(
-      "[withAuthLoader] Successfully loaded data, returning authorized"
-    );
     return {
       authorized: true,
       data: pageData,
       clientContext: { cookie, userId, ...clientContext },
-      loading: false,
     };
   } catch (error) {
     console.error("[withAuthLoader] Auth validation failed:", error);
@@ -69,7 +42,6 @@ export const withAuthLoader = async <T>(
 
     return {
       authorized: false,
-      loading: false,
     };
   }
 };

package/src/features/shared/utils/withAuthProvider.tsx

@@ -1,107 +1,37 @@
-import { useEffect, useRef, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
 import { BuyerPortalProvider } from "../components";
-import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
 import type { ClientContext } from "./getClientContext";
 
 /**
- * HOC que encapsula lógica de autenticação e provider.
- * Now handles loading state for pre-fetch scenarios.
- * Monitors cookie availability and reloads when cookie becomes available.
+ * HOC que encapsula lógica de autenticação e provider
  */
 export const withAuthProvider = <T,>(
   Component: ComponentType<T & { clientContext: ClientContext }>
 ) => {
   return function WrappedPage(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const { hasCookie, timedOut } = useCookieMonitor();
-    const reloadAttemptedRef = useRef(false);
-    const isProduction = process.env.NODE_ENV === "production";
 
-    // Debug logging (only in development or when needed)
     useEffect(() => {
-      if (!isProduction) {
-        console.log("[withAuthProvider] Props state:", {
-          authorized: props?.authorized,
-          loading: props?.loading,
-          hasCookie,
-          timedOut,
-          reloadAttempted: reloadAttemptedRef.current,
-          routerPath: router.asPath,
-        });
+      // Se não está autorizado, recarrega a página
+      if (!props?.authorized) {
+        router.reload();
       }
-    }, [
-      props?.authorized,
-      props?.loading,
-      hasCookie,
-      timedOut,
-      router.asPath,
-      isProduction,
-    ]);
+    }, [props?.authorized, router]);
 
-    useEffect(() => {
-      // Se não está autorizado e não está carregando, recarrega a página
-      if (
-        !props?.authorized &&
-        !props?.loading &&
-        !reloadAttemptedRef.current
-      ) {
-        console.log(
-          "[withAuthProvider] Reloading: not authorized and not loading"
-        );
-        reloadAttemptedRef.current = true;
-        // Use replace to bypass Next.js data cache
-        router.replace(router.asPath);
-      }
-    }, [props?.authorized, props?.loading, router]);
-
-    useEffect(() => {
-      // If we're in loading state and cookie becomes available, do hard reload
-      if (props?.loading && hasCookie && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuthProvider] Cookie available, performing hard reload to bypass cache"
-        );
-        reloadAttemptedRef.current = true;
-        // Hard reload to completely bypass Next.js cache
-        if (typeof window !== "undefined") {
-          window.location.href = router.asPath;
-        }
-      }
-    }, [props?.loading, hasCookie, router]);
-
-    useEffect(() => {
-      // If we're in loading state and timeout reached, redirect to home
-      if (props?.loading && timedOut && !reloadAttemptedRef.current) {
-        console.log(
-          "[withAuthProvider] Cookie timeout - redirecting to home page"
-        );
-        reloadAttemptedRef.current = true;
-        router.push("/");
-      }
-    }, [props?.loading, timedOut, router]);
-
-    // Always render the component, but pass loading state
-    // This allows components to handle their own loading states
-    if (!props?.authorized && !props?.loading) {
-      // Not authorized and not loading = permanently denied
+    // Se não está autorizado, não renderiza nada
+    if (!props?.authorized) {
       return null;
     }
 
-    // Render with whatever data we have (might be empty/partial if loading)
-    const componentProps = {
-      ...(props?.data || ({} as T)),
-      loading: props?.loading || false,
-    } as T & { loading: boolean };
-
-    const clientContext = props?.clientContext || ({} as ClientContext);
-
+    // Se autorizado, renderiza o componente envolvido no provider
     return (
-      <BuyerPortalProvider clientContext={clientContext}>
-        <Component {...componentProps} clientContext={clientContext} />
+      <BuyerPortalProvider clientContext={props?.clientContext}>
+        <Component {...props.data} clientContext={props?.clientContext} />
       </BuyerPortalProvider>
     );
   };

package/src/features/shared/utils/withLoaderErrorBoundary.ts

@@ -1,4 +1,4 @@
-// import { getClientContext } from "./getClientContext";
+import { getClientContext } from "./getClientContext";
 import { serializeLoaderData } from "./serializeLoaderData";
 
 import type { LoaderData } from "../types";
@@ -11,85 +11,77 @@ interface WithLoaderErrorBoundaryOptions {
 
 export function withLoaderErrorBoundary<TQuery, TReturn>(
   loaderFn: (data: LoaderData<TQuery>) => Promise<TReturn>,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _options: WithLoaderErrorBoundaryOptions = {}
+  options: WithLoaderErrorBoundaryOptions = {}
 ) {
-  // Bypass: Just call the loader function and serialize the result
+  const { componentName, onError, redirectToError = true } = options;
+
   return async (data: LoaderData<TQuery>): Promise<TReturn> => {
-    const result = await loaderFn(data);
-    return serializeLoaderData(result);
-  };
+    try {
+      const result = await loaderFn(data);
+      return serializeLoaderData(result);
+    } catch (error) {
+      console.error(`[${componentName || "Loader"}] Error:`, {
+        message: (error as Error).message,
+        query: data.query,
+      });
+
+      if (onError) {
+        onError(error as Error, data.query);
+      }
+
+      if (redirectToError) {
+        let clientContext;
+        try {
+          clientContext = await getClientContext(data);
+        } catch (contextError) {
+          console.error(
+            `[${componentName || "Loader"}] Failed to get client context:`,
+            contextError
+          );
+          clientContext = {
+            cookie: "",
+            customerId: "",
+            userId: "",
+            vtexIdclientAutCookie: "",
+          };
+        }
 
-  // Old error handling code - commented out for bypass
-  // const { componentName, onError, redirectToError = true } = options;
-  //
-  // return async (data: LoaderData<TQuery>): Promise<TReturn> => {
-  //   try {
-  //     const result = await loaderFn(data);
-  //     return serializeLoaderData(result);
-  //   } catch (error) {
-  //     console.error(`[${componentName || "Loader"}] Error:`, {
-  //       message: (error as Error).message,
-  //       query: data.query,
-  //     });
-  //
-  //     if (onError) {
-  //       onError(error as Error, data.query);
-  //     }
-  //
-  //     if (redirectToError) {
-  //       let clientContext;
-  //       try {
-  //         clientContext = await getClientContext(data);
-  //       } catch (contextError) {
-  //         console.error(
-  //           `[${componentName || "Loader"}] Failed to get client context:`,
-  //           contextError
-  //         );
-  //         clientContext = {
-  //           cookie: "",
-  //           customerId: "",
-  //           userId: "",
-  //           vtexIdclientAutCookie: "",
-  //         };
-  //       }
-  //
-  //       // Serialize query to ensure it's JSON-safe (use null instead of undefined)
-  //       const serializedQuery = data.query
-  //         ? JSON.parse(JSON.stringify(data.query))
-  //         : null;
-  //
-  //       const errorResponse = {
-  //         error: {
-  //           error: {
-  //             message: (error as Error).message,
-  //             name: (error as Error).name,
-  //             stack: (error as Error).stack || null,
-  //             query: serializedQuery,
-  //           },
-  //           tags: {
-  //             component: componentName || "Unknown",
-  //             errorType: "loader_error",
-  //           },
-  //           extra: {
-  //             query: serializedQuery,
-  //           },
-  //         },
-  //         hasError: true,
-  //         context: {
-  //           clientContext,
-  //           currentOrgUnit: null,
-  //           currentContract: null,
-  //           currentUser: null,
-  //         },
-  //         data: null,
-  //       };
-  //
-  //       // Ensure error response is also JSON-serializable
-  //       return serializeLoaderData(errorResponse) as TReturn;
-  //     }
-  //
-  //     throw error;
-  //   }
-  // };
+        // Serialize query to ensure it's JSON-safe (use null instead of undefined)
+        const serializedQuery = data.query
+          ? JSON.parse(JSON.stringify(data.query))
+          : null;
+
+        const errorResponse = {
+          error: {
+            error: {
+              message: (error as Error).message,
+              name: (error as Error).name,
+              stack: (error as Error).stack || null,
+              query: serializedQuery,
+            },
+            tags: {
+              component: componentName || "Unknown",
+              errorType: "loader_error",
+            },
+            extra: {
+              query: serializedQuery,
+            },
+          },
+          hasError: true,
+          context: {
+            clientContext,
+            currentOrgUnit: null,
+            currentContract: null,
+            currentUser: null,
+          },
+          data: null,
+        };
+
+        // Ensure error response is also JSON-serializable
+        return serializeLoaderData(errorResponse) as TReturn;
+      }
+
+      throw error;
+    }
+  };
 }

package/src/features/shared/utils/withProviders.tsx

@@ -1,6 +1,5 @@
 import { type ComponentType } from "react";
 
-import { withAuth } from "./withAuth";
 import { withBuyerPortal } from "./withBuyerPortal";
 
 /**
@@ -14,7 +13,7 @@ type ProviderHOC = (Component: ComponentType<any>) => ComponentType<any>;
  * Default project providers applied to all pages.
  * Order: right to left (like pipe/compose)
  */
-const projectProviders: ProviderHOC[] = [withAuth, withBuyerPortal];
+const projectProviders: ProviderHOC[] = [withBuyerPortal];
 
 /**
  * HOC that applies all default project providers.