Fix authentication setup - add AuthProvider and auto-visitor authentication

src/contexts/AuthContext.tsx

@@ -5,7 +5,7 @@ interface User {
   id: string;
   username: string;
   email: string;
-  role: 'student' | 'instructor' | 'admin';
+  role: 'student' | 'instructor' | 'admin' | 'visitor';
   targetCultures: string[];
   nativeLanguage?: string;
 }
@@ -53,10 +53,39 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
       fetchUser();
     } else {
-      setLoading(false);
+      // Auto-setup visitor authentication
+      setupVisitorAuth();
     }
   }, []);
 
+  const setupVisitorAuth = async () => {
+    try {
+      const response = await api.post('/api/auth/login', { 
+        email: 'visitor@example.com' 
+      });
+      const { token, user } = response.data;
+      
+      localStorage.setItem('token', token);
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error) {
+      console.error('Failed to setup visitor auth:', error);
+      // Set a fallback visitor token
+      const fallbackToken = `visitor_${Date.now()}`;
+      localStorage.setItem('token', fallbackToken);
+      api.defaults.headers.common['Authorization'] = `Bearer ${fallbackToken}`;
+      setUser({
+        id: 'visitor',
+        username: 'Visitor',
+        email: 'visitor@example.com',
+        role: 'visitor',
+        targetCultures: []
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const fetchUser = async () => {
     try {
       const response = await api.get('/api/auth/profile');
@@ -65,6 +94,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       console.error('Failed to fetch user:', error);
       localStorage.removeItem('token');
       delete api.defaults.headers.common['Authorization'];
+      // Try to setup visitor auth as fallback
+      setupVisitorAuth();
+      return;
     } finally {
       setLoading(false);
     }
@@ -100,28 +132,28 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     localStorage.removeItem('token');
     delete api.defaults.headers.common['Authorization'];
     setUser(null);
+    // Setup visitor auth after logout
+    setupVisitorAuth();
   };
 
   const updateProfile = async (data: Partial<User>) => {
     try {
       const response = await api.put('/api/auth/profile', data);
-      setUser(response.data.user);
+      setUser(response.data);
     } catch (error: any) {
       throw new Error(error.response?.data?.error || 'Profile update failed');
     }
   };
 
-  const value: AuthContextType = {
-    user,
-    loading,
-    login,
-    register,
-    logout,
-    updateProfile,
-  };
-
   return (
-    <AuthContext.Provider value={value}>
+    <AuthContext.Provider value={{
+      user,
+      loading,
+      login,
+      register,
+      logout,
+      updateProfile
+    }}>
       {children}
     </AuthContext.Provider>
   );

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from './contexts/AuthContext';
 import './index.css';
 import App from './App';
 
@@ -11,7 +12,9 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <AuthProvider>
+        <App />
+      </AuthProvider>
     </BrowserRouter>
   </React.StrictMode>
 );