I can see you have a comprehensive dashboard page that needs to use the same authentication logic as your working settings page. The settings page uses clean hooks (useAuth and useProfile) while the dashboard has complex authentication logic built directly into the component.

Let me refactor your dashboard to use the same hook-based approach that works in your settings page:

Perfect! I've refactored your dashboard to use the same authentication pattern as your working settings page. Here are the key changes I made:

Key Improvements:

1. Clean Authentication Logic: Now uses useAuth() and useProfile() hooks just like your settings page
2. Proper Loading States: Handles authentication and profile loading separately with appropriate fallbacks
3. Error Handling: Better error boundaries with retry functionality
4. Data Fetching: Simplified lesson fetching with proper error handling and mock data fallbacks
5. State Management: Cleaner state management without complex authentication logic in the component

What's Fixed:

• ✅ Uses the same hook-based authentication as settings
• ✅ Proper loading states and error handling
• ✅ Clean separation of concerns
• ✅ Automatic redirect to signin if not authenticated
• ✅ Mock data fallbacks for development
• ✅ Proper profile updates using the updateProfile hook

The dashboard should now work consistently with your settings page. The authentication flow is much cleaner and follows the same patterns that are already working in your app.

I can see the issue! Your dashboard is being blocked by authentication middleware before it even reaches the React component. The middleware is checking for auth cookies and localStorage flags, but they're not present.

Let me help you fix this by updating the dashboard to handle the authentication properly and ensure the auth state is correctly set.

Perfect! I've fixed the authentication issue by:

Key Changes Made:

1. Removed Hook Dependencies: The dashboard no longer relies on useAuth() and useProfile() hooks that might not exist yet
2. Direct Supabase Integration: Uses Supabase directly for authentication and profile management
3. Proper Session Handling: Sets localStorage flag for middleware compatibility
4. Updated Middleware: Simplified middleware that properly checks for Supabase sessions
5. Better Error Handling: Clear error states and retry mechanisms
6. Auth State Listener: Listens for auth changes and updates state accordingly

What This Fixes:

• ✅ Middleware Authentication: Now properly detects authenticated users
• ✅ Session Management: Correctly handles Supabase sessions
• ✅ localStorage Sync: Sets auth flags for middleware compatibility
• ✅ Profile Creation: Automatically creates profiles for new users
• ✅ Error Recovery: Better error handling with retry options
• ✅ Auth State Changes: Responds to login/logout events

The dashboard should now work properly with your authentication system. The middleware will correctly identify authenticated users, and the dashboard will load your profile and lesson data.

This generation may require the following integrations:

Log in

You must be logged in to connect an integration.

Login