feat: refine authentication flow and dashboard data hooks

Author: mmujtabah

react/features/dashboard/components/Sidebar.tsx

@@ -14,23 +14,51 @@ const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab, isCollapsed,
     const [userProfile, setUserProfile] = useState<any>(null);
 
     useEffect(() => {
-        const fetchProfile = async () => {
+        const getFallbackProfile = (session: any) => {
+            const fullName = session?.user?.user_metadata?.full_name
+                || session?.user?.user_metadata?.name
+                || session?.user?.email?.split('@')[0]
+                || 'User';
+
+            return {
+                full_name: fullName,
+                email: session?.user?.email || ''
+            };
+        };
+
+        const syncProfile = async (session: any) => {
+            if (!session) {
+                setUserProfile(null);
+                return;
+            }
+
+            setUserProfile(getFallbackProfile(session));
+
             try {
-                const { data: { session } } = await supabase.auth.getSession();
-                if (!session) return;
-                
                 const res = await fetch('/api/v1/users/me', {
                     headers: { 'Authorization': `Bearer ${session.access_token}` }
                 });
                 if (res.ok) {
                     const data = await res.json();
-                    setUserProfile(data);
+                    setUserProfile({
+                        ...getFallbackProfile(session),
+                        ...data
+                    });
                 }
             } catch (err) {
                 console.error("Failed to fetch profile:", err);
             }
         };
-        fetchProfile();
+
+        supabase.auth.getSession().then(({ data: { session } }) => {
+            void syncProfile(session);
+        });
+
+        const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+            void syncProfile(session);
+        });
+
+        return () => subscription.unsubscribe();
     }, []);
 
     // Helper to close mobile menu on tab switch

react/features/dashboard/hooks/useDashboardData.ts

@@ -42,6 +42,22 @@ export const useDashboardData = () => {
 
     useEffect(() => {
         void refresh();
+
+        const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+            if (session) {
+                void refresh();
+            } else {
+                setState({
+                    meetings: [],
+                    stats: null,
+                    actionItems: [],
+                    loading: false,
+                    error: 'No active session'
+                });
+            }
+        });
+
+        return () => subscription.unsubscribe();
     }, []);
 
     return {

react/features/supabase-auth/components/Auth.web.tsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import { supabase } from '../client';
 
-interface AuthProps {
-    onLoginSuccess: () => void;
-}
-
-export const Auth: React.FC<AuthProps> = ({ onLoginSuccess }) => {
+export const Auth: React.FC = () => {
     const [isSignUp, setIsSignUp] = useState(false);
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
@@ -31,14 +27,12 @@ export const Auth: React.FC<AuthProps> = ({ onLoginSuccess }) => {
                     password,
                 });
                 if (signInError) throw signInError;
-                onLoginSuccess();
             } else {
                 const { error: signInError } = await supabase.auth.signInWithPassword({
                     email,
                     password,
                 });
                 if (signInError) throw signInError;
-                onLoginSuccess();
             }
         } catch (err: any) {
             setError(err.message || 'An error occurred during authentication.');

react/features/supabase-auth/components/AuthWrapper.web.tsx

@@ -14,27 +14,25 @@ export const AuthWrapper: React.FC<AuthWrapperProps> = ({ children }) => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        supabase.auth.getSession().then(({ data: { session } }) => {
-            if (session) {
-                setSession(session);
+        const syncSession = (nextSession: any) => {
+            setSession(nextSession);
+
+            if (nextSession?.user?.email) {
                 dispatch(updateSettings({
-                    displayName: session.user.email.split('@')[0],
-                    email: session.user.email
+                    displayName: nextSession.user.email.split('@')[0],
+                    email: nextSession.user.email
                 }));
             }
+
             setLoading(false);
+        };
+
+        supabase.auth.getSession().then(({ data: { session } }) => {
+            syncSession(session);
         });
 
         const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
-            if (session) {
-                setSession(session);
-                dispatch(updateSettings({
-                    displayName: session.user.email.split('@')[0],
-                    email: session.user.email
-                }));
-            } else {
-                setSession(null);
-            }
+            syncSession(session);
         });
 
         return () => subscription.unsubscribe();
@@ -49,7 +47,7 @@ export const AuthWrapper: React.FC<AuthWrapperProps> = ({ children }) => {
     }
 
     if (!session) {
-        return <Auth onLoginSuccess={() => setSession(true)} />;
+        return <Auth />;
     }
 
     return <>{children}</>;