@vtex/faststore-plugin-buyer-portal 1.1.114 → 1.1.115

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.114",
+	"version": "1.1.115",
 	"description": "A plugin for faststore with buyer portal",
 	"main": "index.js",
 	"scripts": {

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

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

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

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

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

@@ -2,7 +2,6 @@ import { useEffect, useRef, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { PageLoader } from "../components";
 import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
@@ -16,7 +15,7 @@ export const withAuth = <T extends Record<string, unknown>>(
 ) => {
   return function AuthenticatedComponent(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const hasCookie = useCookieMonitor();
+    const { hasCookie, timedOut } = useCookieMonitor();
     const reloadAttemptedRef = useRef(false);
 
     // Debug logging
@@ -25,9 +24,10 @@ export const withAuth = <T extends Record<string, unknown>>(
         authorized: props?.authorized,
         loading: props?.loading,
         hasCookie,
+        timedOut,
         reloadAttempted: reloadAttemptedRef.current,
       });
-    }, [props?.authorized, props?.loading, hasCookie]);
+    }, [props?.authorized, props?.loading, hasCookie, timedOut]);
 
     useEffect(() => {
       // If not authorized and not loading, reload the page
@@ -56,14 +56,28 @@ export const withAuth = <T extends Record<string, unknown>>(
       }
     }, [props?.loading, hasCookie, router]);
 
-    if (!props?.authorized) {
-      if (props?.loading) {
-        return <PageLoader />;
+    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
       return null;
     }
 
-    // If authorized, render the component with the data
-    return <Component {...(props.data as T)} />;
+    // 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} />;
   };
 };

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, type ComponentType } from "react";
 
 import { useRouter } from "next/router";
 
-import { BuyerPortalProvider, PageLoader } from "../components";
+import { BuyerPortalProvider } from "../components";
 import { useCookieMonitor } from "../hooks/useCookieMonitor";
 
 import type { AuthRouteProps } from "../types";
@@ -18,7 +18,7 @@ export const withAuthProvider = <T,>(
 ) => {
   return function WrappedPage(props: AuthRouteProps<T>) {
     const router = useRouter();
-    const hasCookie = useCookieMonitor();
+    const { hasCookie, timedOut } = useCookieMonitor();
     const reloadAttemptedRef = useRef(false);
     const isProduction = process.env.NODE_ENV === "production";
 
@@ -29,6 +29,7 @@ export const withAuthProvider = <T,>(
           authorized: props?.authorized,
           loading: props?.loading,
           hasCookie,
+          timedOut,
           reloadAttempted: reloadAttemptedRef.current,
           routerPath: router.asPath,
         });
@@ -37,6 +38,7 @@ export const withAuthProvider = <T,>(
       props?.authorized,
       props?.loading,
       hasCookie,
+      timedOut,
       router.asPath,
       isProduction,
     ]);
@@ -71,17 +73,35 @@ export const withAuthProvider = <T,>(
       }
     }, [props?.loading, hasCookie, router]);
 
-    if (!props?.authorized) {
-      if (props?.loading) {
-        console.log("[withAuthProvider] Loading state");
-        return <PageLoader />;
+    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
       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);
+
     return (
-      <BuyerPortalProvider clientContext={props?.clientContext}>
-        <Component {...props.data} clientContext={props?.clientContext} />
+      <BuyerPortalProvider clientContext={clientContext}>
+        <Component {...componentProps} clientContext={clientContext} />
       </BuyerPortalProvider>
     );
   };