fix: trial showing again after logged user refreshes page

Author: danieldanielecki

components/TrialWarning.tsx

@@ -2,9 +2,11 @@
 
 import React, { useState } from "react";
 import { useSecureTrial } from "../hooks/useSecureTrial";
+import { useAuth } from "../contexts/AuthContext";
 import { AuthModal } from "./AuthModal";
 
 export const TrialWarning: React.FC = () => {
+  const { isAuthenticated } = useAuth();
   const {
     trialExpired,
     timeRemaining,
@@ -40,7 +42,13 @@ export const TrialWarning: React.FC = () => {
     );
   }
 
-  if (!isInTrial && !trialExpired && !trialBlocked) return null;
+  // Don't show anything while loading, if user is authenticated, or if no trial state
+  if (
+    isLoading ||
+    isAuthenticated ||
+    (!isInTrial && !trialExpired && !trialBlocked)
+  )
+    return null;
 
   return (
     <>

hooks/useSecureTrial.tsx

@@ -24,7 +24,7 @@ interface TrialRecord {
 }
 
 export const useSecureTrial = () => {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, isLoading: authLoading } = useAuth();
   const [trialStartTime, setTrialStartTime] = useState<number | null>(null);
   const [trialExpired, setTrialExpired] = useState(false);
   const [timeRemaining, setTimeRemaining] = useState<number>(TRIAL_DURATION_MS);
@@ -329,6 +329,11 @@ export const useSecureTrial = () => {
 
   useEffect(() => {
     const initializeTrial = async () => {
+      // Wait for auth to finish loading before initializing trial
+      if (authLoading) {
+        return;
+      }
+
       setIsLoading(true);
 
       // If user is authenticated, no trial needed
@@ -424,7 +429,7 @@ export const useSecureTrial = () => {
     };
 
     initializeTrial();
-  }, [isAuthenticated]);
+  }, [isAuthenticated, authLoading]);
 
   // Update timer every second
   useEffect(() => {
@@ -475,6 +480,6 @@ export const useSecureTrial = () => {
     isInTrial,
     isAccessBlocked,
     trialBlocked,
-    isLoading,
+    isLoading: isLoading || authLoading,
   };
 };