Merge pull request #59 from OpenLake/persistence

fix: persist user session after refresh & resolve TypeScript errors

Author: gunjjoshi

src/contexts/auth.tsx

@@ -7,6 +7,15 @@ import { toast } from 'react-hot-toast';
 import { api } from '../utils/api';
 import { FirebaseError } from 'firebase/app';
 import { firebaseAuth } from '../utils/firebaseInit';
+import { User as FirebaseUser } from "firebase/auth";
+import { getIdToken } from "firebase/auth";
+
+type User = {
+  id: string;
+  email: string | null;
+  name?: string | null;
+  picture?: string | null;
+};
 
 const AuthContext = createContext({
   isAuthenticated: false,
@@ -19,7 +28,7 @@ const AuthContext = createContext({
 });
 
 export const AuthProvider = ({ children }: any) => {
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState<User | null>(null);
   const [photoURL, setPhotoURL] = useState('');
   const [displayName, setDisplayName] = useState('');
   const [loading, setLoading] = useState(true);
@@ -74,11 +83,11 @@ export const AuthProvider = ({ children }: any) => {
       try {
         const { data } = await api.get('/api/auth/');
         const { result: user } = data;
-        const { picture, name, isAdmin } = user;
         if (user) {
           setUser(user);
-          setPhotoURL(picture);
-          setDisplayName(name);
+          setPhotoURL(user.picture);
+          setDisplayName(user.name);
+          return;
         }
       } catch (err) {
         if ((err as FirebaseError).code === 'auth/id-token-expired') {
@@ -88,21 +97,47 @@ export const AuthProvider = ({ children }: any) => {
         }
       }
     }
+    const authUser = firebaseAuth.currentUser;
+    if (authUser) {
+      setUser({
+        id: authUser.uid,
+        email: authUser.email,
+        name: authUser.displayName,
+        picture: authUser.photoURL,
+      });
+      setPhotoURL(authUser.photoURL || '');
+      setDisplayName(authUser.displayName || '');
+      cookies.set('accessToken', authUser.accessToken || '', { expires: 60 });
+    } else {
+      setUser(null);
+    }
     setLoading(false);
   }
 
   // Effects
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(firebaseAuth, (authUser) => {
+    const unsubscribe = onAuthStateChanged(firebaseAuth, async (authUser: FirebaseUser | null) => {  // ✅ Use firebaseAuth
       if (authUser) {
-        loadUserFromCookie();
+        const token = await authUser.getIdToken();
+  
+        setUser({
+          id: authUser.uid,
+          email: authUser.email,
+          name: authUser.displayName,
+          picture: authUser.photoURL,
+        });
+  
+        setPhotoURL(authUser.photoURL || '');
+        setDisplayName(authUser.displayName || '');
+
+        cookies.set('accessToken', token, { expires: 60 });
       } else {
-        setLoading(false);
+        loadUserFromCookie();
       }
     });
-
+  
     return () => unsubscribe();
-  }, []);
+  }, []);  
 
   return (
     <AuthContext.Provider
@@ -121,15 +156,6 @@ export const AuthProvider = ({ children }: any) => {
   );
 };
 
-// Define a type for the user object
-type User = {
-  // Define the properties of your user object
-  // For example:
-  id: string;
-  email: string;
-  // ... other properties
-};
-
 export const useAuth = () => {
   const authContext = useContext(AuthContext);