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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.113",
+	"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 = () => {
@@ -24,19 +25,33 @@ export const useCookieMonitor = () => {
         cookie.trim().startsWith(`${cookieName}=`)
       );
 
-      return !!authCookie && authCookie.split("=")[1]?.trim() !== "";
+      const hasCookieValue =
+        !!authCookie && authCookie.split("=")[1]?.trim() !== "";
+
+      console.log("[useCookieMonitor] Checking cookie:", {
+        cookieName,
+        hasCookie: hasCookieValue,
+        cookieValue: authCookie
+          ? authCookie.split("=")[1]?.substring(0, 10) + "..."
+          : "none",
+      });
+
+      return hasCookieValue;
     };
 
     // Check immediately
     const initialCheck = checkCookie();
+    console.log("[useCookieMonitor] Initial check:", initialCheck);
     setHasCookie(initialCheck);
 
     // If no cookie yet, poll for it
     if (!initialCheck) {
+      console.log("[useCookieMonitor] Starting cookie polling...");
       const interval = setInterval(() => {
         const hasAuthCookie = checkCookie();
 
         if (hasAuthCookie) {
+          console.log("[useCookieMonitor] Cookie found! Stopping poll.");
           setHasCookie(true);
           clearInterval(interval);
         }
@@ -44,6 +59,10 @@ export const useCookieMonitor = () => {
 
       // Cleanup after 5 seconds max
       const timeout = setTimeout(() => {
+        console.log(
+          "[useCookieMonitor] Polling timeout reached (5s) - cookie never appeared"
+        );
+        setTimedOut(true);
         clearInterval(interval);
       }, 5000);
 
@@ -54,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

@@ -1,8 +1,7 @@
-import { useEffect, type ComponentType } from "react";
+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,29 +15,69 @@ 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
+    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) {
-        router.reload();
+      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) {
-        router.reload();
+      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;
+        }
       }
     }, [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/withAuthLoader.ts

@@ -20,7 +20,13 @@ export const withAuthLoader = async <T>(
     // 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,
@@ -31,7 +37,10 @@ export const withAuthLoader = async <T>(
 
     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();
 
@@ -43,6 +52,9 @@ export const withAuthLoader = async <T>(
 
     const pageData = await dataLoader({ cookie, userId, ...clientContext });
 
+    console.log(
+      "[withAuthLoader] Successfully loaded data, returning authorized"
+    );
     return {
       authorized: true,
       data: pageData,
@@ -50,7 +62,7 @@ export const withAuthLoader = async <T>(
       loading: false,
     };
   } catch (error) {
-    console.error("Auth validation failed:", error);
+    console.error("[withAuthLoader] Auth validation failed:", error);
 
     data.res?.writeHead(302, { Location: "/" });
     data.res?.end();

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

@@ -1,8 +1,8 @@
-import { useEffect, type ComponentType } from "react";
+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,32 +18,90 @@ 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";
+
+    // 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,
+        });
+      }
+    }, [
+      props?.authorized,
+      props?.loading,
+      hasCookie,
+      timedOut,
+      router.asPath,
+      isProduction,
+    ]);
 
     useEffect(() => {
       // Se não está autorizado e não está carregando, recarrega a página
-      if (!props?.authorized && !props?.loading) {
-        router.reload();
+      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, reload to fetch data
-      if (props?.loading && hasCookie) {
-        router.reload();
+      // 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]);
 
-    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(
+          "[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>
     );
   };