Merge pull request #6 from solid/feat/my-storages

Feat/my storages

Author: PreciousOritsedere

app/components/AuthWrapper.tsx

@@ -22,19 +22,46 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     async function checkAuth() {
       try {
         setError(null);
-        const redirectInfo = await handleIncomingRedirect();
+        
+        // Always handle incoming redirect first - this is necessary to restore sessions
+        // The library uses this to restore session state from localStorage
+        // Set restorePreviousSession to true to enable session restoration on page refresh
+        const redirectInfo = await handleIncomingRedirect({
+          restorePreviousSession: true,
+        });
+        
+        // Get the session instance after handling redirect
         const session = getDefaultSession();
 
-        // Log authentication response after redirect
-        console.log("=== Authentication Response ===");
+        // development logs (will remove later)
+        console.log("=== Session Check ===");
         console.log("Redirect Info:", redirectInfo);
         console.log("Session Info:", session.info);
-        console.log("WebID:", session.info.webId);
         console.log("Is Logged In:", session.info.isLoggedIn);
+        console.log("WebID:", session.info.webId);
         console.log("Session ID:", session.info.sessionId);
-        console.log("===============================");
+        if (session.info.expirationDate) {
+          const expDate = new Date(session.info.expirationDate);
+          console.log("Expiration Date:", expDate.toISOString());
+          console.log("Is Expired:", expDate <= new Date());
+        }
 
-        setIsAuthenticated(session.info.isLoggedIn);
+        // Check if we have a valid session
+        let isLoggedIn = session.info.isLoggedIn && !!session.info.webId;
+        
+        // Check expiration if session exists
+        if (isLoggedIn && session.info.expirationDate) {
+          const expirationDate = new Date(session.info.expirationDate);
+          const now = new Date();
+          if (expirationDate <= now) {
+            console.log("Session expired, user needs to re-login");
+            isLoggedIn = false;
+          }
+        }
+        
+      
+        
+        setIsAuthenticated(isLoggedIn);
       } catch (err) {
         console.error("Auth check failed:", err);
         const errorMessage =
@@ -51,11 +78,13 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
 
   // Re-check authentication state periodically in case user logs in from another tab
   useEffect(() => {
-    if (!isAuthenticated && !error) {
-      const interval = setInterval(async () => {
-        try {
-          const redirectInfo = await handleIncomingRedirect();
-          const session = getDefaultSession();
+      if (!isAuthenticated && !error) {
+        const interval = setInterval(async () => {
+          try {
+            const redirectInfo = await handleIncomingRedirect({
+              restorePreviousSession: true,
+            });
+            const session = getDefaultSession();
           if (session.info.isLoggedIn) {
             // Log authentication response after redirect (from polling)
             console.log("=== Authentication Response (from polling) ===");
@@ -83,7 +112,7 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     setIsChecking(true);
     setIsAuthenticated(null);
     // Trigger re-check
-    handleIncomingRedirect()
+    handleIncomingRedirect({ restorePreviousSession: true })
       .then(() => {
         const session = getDefaultSession();
         setIsAuthenticated(session.info.isLoggedIn);

app/lib/hooks/useSolidStorages.ts

@@ -155,8 +155,13 @@ export function useSolidStorages(): UseSolidStoragesResult {
   const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
+    let isMounted = true;
+    let checkInterval: NodeJS.Timeout | null = null;
+    
     async function fetchStorages() {
       try {
+        if (!isMounted) return;
+        
         setIsLoading(true);
         setError(null);
 
@@ -171,19 +176,37 @@ export function useSolidStorages(): UseSolidStoragesResult {
           console.log("=========================");
 
           // Set up a polling mechanism to check when authentication completes
-          const checkInterval = setInterval(() => {
+          // Keep isLoading as true while waiting for authentication
+          checkInterval = setInterval(() => {
+            if (!isMounted) {
+              if (checkInterval) clearInterval(checkInterval);
+              return;
+            }
+            
             const currentSession = getDefaultSession();
             if (currentSession.info.isLoggedIn && currentSession.info.webId) {
-              clearInterval(checkInterval);
-              // Trigger re-fetch by updating state
+              if (checkInterval) clearInterval(checkInterval);
+              // Trigger re-fetch by calling fetchStorages again
               fetchStorages();
             }
           }, 500);
 
           // Clear interval after 10 seconds to avoid infinite polling
-          setTimeout(() => clearInterval(checkInterval), 10000);
+          setTimeout(() => {
+            if (checkInterval) {
+              clearInterval(checkInterval);
+              checkInterval = null;
+            }
+            // Only set loading to false if we've given up waiting and component is still mounted
+            if (isMounted) {
+              const finalSession = getDefaultSession();
+              if (!finalSession.info.isLoggedIn || !finalSession.info.webId) {
+                setIsLoading(false);
+              }
+            }
+          }, 10000);
 
-          setIsLoading(false);
+          // Don't set isLoading to false here - keep it true while waiting
           return;
         }
 
@@ -581,14 +604,23 @@ export function useSolidStorages(): UseSolidStoragesResult {
 
     // Also set up a listener for session changes
     const checkSession = setInterval(() => {
+      if (!isMounted) {
+        clearInterval(checkSession);
+        return;
+      }
+      
       const session = getDefaultSession();
       if (session.info.isLoggedIn && session.info.webId && storages.length === 0 && !isLoading) {
         console.log("Session state changed, re-fetching storages...");
         fetchStorages();
       }
     }, 1000);
 
-    return () => clearInterval(checkSession);
+    return () => {
+      isMounted = false;
+      if (checkInterval) clearInterval(checkInterval);
+      clearInterval(checkSession);
+    };
   }, []);
 
   return { storages, isLoading, error };