Add profile and login screen + first api logic draft

app/(protected)/_layout.tsx

@@ -0,0 +1,84 @@
+import { Redirect, Tabs } from 'expo-router';
+import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
+import { useContext } from 'react';
+import { AuthContext } from '@/utils/authContext';
+
+export default function ProtectedLayout() {
+  const authState = useContext(AuthContext);
+
+  if (!authState.isReady) {
+    return null;
+  }
+
+  if (!authState.isAuthenticated) {
+    return <Redirect href="/login" />;
+  }
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: '#ffffff',
+          borderTopWidth: 1,
+          borderTopColor: '#f3f4f6',
+          height: 80,
+          paddingBottom: 20,
+          paddingTop: 10,
+        },
+        tabBarActiveTintColor: '#099499',
+        tabBarInactiveTintColor: '#9ca3af',
+        tabBarLabelStyle: {
+            fontSize: 10,
+            fontWeight: '600',
+            marginTop: 4
+        }
+      }}
+      backBehavior='history'
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="attendance/index"
+        options={{
+          title: 'Presenze',
+          tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="permits/index"
+        options={{
+          title: 'Permessi',
+          tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="documents/index"
+        options={{
+          title: 'Moduli',
+          tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
+        }}
+      />
+      <Tabs.Screen
+        name="automation"
+        options={{
+          title: 'Domotica',
+          tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
+        }}
+      />
+      {/* TODO: Da rimuovere */}
+      <Tabs.Screen
+        name="profile"
+        options={{
+          href: null,
+          title: 'Profilo',
+        }}
+      />
+    </Tabs>
+  );
+}

app/(protected)/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { useRouter } from 'expo-router';
-import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { AlertTriangle, Bell, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native';
-import { Bell, User, AlertTriangle, QrCode, FileText, CheckCircle2 } from 'lucide-react-native';
+import React from 'react';
-import { MOCK_USER, ATTENDANCE_DATA, DOCUMENTS_DATA } from '../data/data';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ATTENDANCE_DATA, DOCUMENTS_DATA, MOCK_USER } from '../../data/data';
 
 export default function HomeScreen() {
     const router = useRouter();
@@ -16,7 +16,7 @@ export default function HomeScreen() {
                     <View className="flex-row items-center gap-4">
                         <View>
                             <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
-                            <Text className="text-white text-3xl font-bold">{MOCK_USER.name}</Text>
+                            <Text className="text-white text-3xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
                             <Text className="text-teal-200">{MOCK_USER.role}</Text>
                         </View>
                     </View>
@@ -25,7 +25,7 @@ export default function HomeScreen() {
                             <Bell size={28} color="white" />
                             <View className="absolute top-2.5 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-[#099499]" />
                         </TouchableOpacity>
-                        <TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20">
+                        <TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
                             <User size={28} color="white" />
                         </TouchableOpacity>
                     </View>

app/(protected)/profile/_layout.tsx

@@ -0,0 +1,7 @@
+import { Stack } from "expo-router";
+
+export default function ProfileLayout() {
+  return (
+    <Stack screenOptions={{headerShown: false}} />
+  );
+}

app/(protected)/profile/index.tsx

@@ -0,0 +1,132 @@
+import { useRouter } from 'expo-router';
+import { ChevronLeft, LogOut, Mail, Settings, Smartphone, User } from 'lucide-react-native';
+import React, { useContext } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { MOCK_USER } from '@/data/data';
+import { AuthContext } from '@/utils/authContext';
+
+export default function ProfileScreen() {
+    const authContext = useContext(AuthContext);
+    const router = useRouter();
+
+    // Dati fittizi aggiuntivi (possono essere presi dal backend in seguito)
+    const email = `${MOCK_USER.name.toLowerCase().replace(/\s+/g, '.')}@example.com`;
+    const phone = '+39 345 123 4567';
+
+    const initials = MOCK_USER.name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
+
+    return (
+        <View className="flex-1 bg-[#099499]">
+            {/* --- SEZIONE HEADER (INVARIATA) --- */}
+            <View className="pt-16 pb-6 px-6">
+                <View className="flex-row justify-start items-center gap-4">
+                    <TouchableOpacity
+                        onPress={() => router.back()}
+                    >
+                        <ChevronLeft size={28} color="white" />
+                    </TouchableOpacity>
+                    <View className="flex-row items-center gap-4">
+                        <View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center">
+                            <Text className="text-white font-bold text-2xl">{initials}</Text>
+                        </View>
+                        <View>
+                            <Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text>
+                            <Text className="text-white text-2xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+
+            <ScrollView
+                className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-8"
+                contentContainerStyle={{ paddingBottom: 60, gap: 24 }}
+                showsVerticalScrollIndicator={false}
+            >
+                {/* Card info - Testi ingranditi */}
+                <View className="bg-white p-7 rounded-3xl shadow-sm border border-gray-100">
+                    {/* Titolo sezione ingrandito */}
+                    <Text className="text-2xl font-bold text-gray-800">Informazioni</Text>
+
+                    <View className="mt-6 gap-5">
+                        <View className="flex-row items-center gap-5">
+                            {/* Icona leggermente più grande e container adattato */}
+                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
+                                <Mail size={24} color="#374151" />
+                            </View>
+                            <View>
+                                {/* Label e valore ingranditi */}
+                                <Text className="text-lg text-gray-700 font-bold">Email</Text>
+                                <Text className="text-gray-500 text-base">{email}</Text>
+                            </View>
+                        </View>
+
+                        {/* // TODO: Rimuovere telefono, si potrebbe sostituire con altro dato? */}
+                        {/* <View className="flex-row items-center gap-5">
+                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
+                                <Smartphone size={24} color="#374151" />
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-700 font-bold">Telefono</Text>
+                                <Text className="text-gray-500 text-base">{phone}</Text>
+                            </View>
+                        </View> */}
+
+                        <View className="flex-row items-center gap-5">
+                            <View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
+                                <User size={24} color="#374151" />
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
+                                <Text className="text-gray-500 text-base capitalize">{MOCK_USER.role}</Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+
+                {/* Actions - Testi e Pulsanti ingranditi */}
+                <View>
+                    <Text className="text-gray-800 text-2xl font-bold mb-5 px-1">Azioni</Text>
+
+                    <TouchableOpacity onPress={() => router.push('/permits')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
+                        <View className="flex-row items-center gap-5">
+                            <View className="bg-[#099499]/10 p-3.5 rounded-2xl">
+                                <Settings size={26} color="#099499" />
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-800 font-bold">I miei permessi</Text>
+                                <Text className="text-base text-gray-400 mt-0.5">Richiedi o controlla lo stato</Text>
+                            </View>
+                        </View>
+                        <Text className="text-[#099499] text-base font-bold">Apri</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={() => console.log('Apri impostazioni')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
+                        <View className="flex-row items-center gap-5">
+                            <View className="bg-gray-100 p-3.5 rounded-2xl">
+                                <Settings size={26} color="#374151" />
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-800 font-bold">Impostazioni</Text>
+                                <Text className="text-base text-gray-400 mt-0.5">Preferenze e privacy</Text>
+                            </View>
+                        </View>
+                        <Text className="text-gray-400 text-base font-bold">Apri</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity onPress={authContext.logOut} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
+                        <View className="flex-row items-center gap-5">
+                            <View className="bg-red-50 p-3.5 rounded-2xl">
+                                <LogOut size={26} color="#ef4444" />
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-800 font-bold">Esci</Text>
+                                <Text className="text-base text-gray-400 mt-0.5">Chiudi la sessione corrente</Text>
+                            </View>
+                        </View>
+                        <Text className="text-red-500 text-base font-bold">Esci</Text>
+                    </TouchableOpacity>
+                </View>
+            </ScrollView>
+        </View>
+    );
+}

app/_layout.tsx

@@ -1,64 +1,14 @@
 import '../global.css';
-import { Tabs } from 'expo-router';
+import { AuthProvider } from '@/utils/authContext';
-import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
+import { Stack } from 'expo-router';
 
 export default function AppLayout() {
-  return (
+    return (
-    <Tabs
+        <AuthProvider>
-      screenOptions={{
+            <Stack screenOptions={{ headerShown: false }}>
-        headerShown: false,
+                <Stack.Screen name="(protected)" />
-        tabBarStyle: {
+                <Stack.Screen name="login" />
-          backgroundColor: '#ffffff',
+            </Stack>
-          borderTopWidth: 1,
+        </AuthProvider>
-          borderTopColor: '#f3f4f6',
+    );
-          height: 80,
-          paddingBottom: 20,
-          paddingTop: 10,
-        },
-        tabBarActiveTintColor: '#099499',
-        tabBarInactiveTintColor: '#9ca3af',
-        tabBarLabelStyle: {
-            fontSize: 10,
-            fontWeight: '600',
-            marginTop: 4
-        }
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
-        }}
-      />
-      <Tabs.Screen
-        name="attendance/index"
-        options={{
-          title: 'Presenze',
-          tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
-        }}
-      />
-      <Tabs.Screen
-        name="permits/index"
-        options={{
-          title: 'Permessi',
-          tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
-        }}
-      />
-      <Tabs.Screen
-        name="documents/index"
-        options={{
-          title: 'Moduli',
-          tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
-        }}
-      />
-      <Tabs.Screen
-        name="automation"
-        options={{
-          title: 'Domotica',
-          tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
-        }}
-      />
-    </Tabs>
-  );
 }

app/login.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useContext } from 'react';
+import { Eye, EyeOff, Lock, LogIn, Mail } from 'lucide-react-native';
+import {
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+    Image
+} from 'react-native';
+import { AuthContext } from '@/utils/authContext';
+
+export default function LoginScreen() {
+    const authContext = useContext(AuthContext);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleLogin = () => {
+        setIsLoading(true);
+        // Simulazione login
+        setTimeout(() => {
+            setIsLoading(false);
+            authContext.logIn();
+        }, 1500);
+    };
+
+    return (
+        <View className="flex-1 bg-[#099499] h-screen overflow-hidden">
+            {/* Header con Logo/Titolo */}
+            <View className="h-[35%] flex-column justify-center items-center">
+                <Image
+                    source={require('@/assets/images/mariani-logo.png')}
+                    className='h-24 w-80'
+                    resizeMode="contain"
+                />
+            </View>
+
+            {/* Form Container */}
+            <View className="flex-1 bg-white rounded-t-[2.5rem] px-8 pt-10 shadow-xl w-full">
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    className="flex-1"
+                >
+                    <ScrollView showsVerticalScrollIndicator={false} className="h-full">
+                        <View className="gap-6 flex flex-col" style={{ gap: '1.5rem' }}>
+                            {/* Input Email */}
+                            <View>
+                                <Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Email o Username</Text>
+                                <View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
+                                    <Mail size={24} color="#9ca3af" />
+                                    <TextInput
+                                        className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
+                                        placeholder="mario.rossi@esempio.com"
+                                        placeholderTextColor="#9ca3af"
+                                        value={email}
+                                        onChangeText={setEmail}
+                                        autoCapitalize="none"
+                                        keyboardType="email-address"
+                                    />
+                                </View>
+                            </View>
+
+                            {/* Input Password */}
+                            <View>
+                                <Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Password</Text>
+                                <View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
+                                    <Lock size={24} color="#9ca3af" />
+                                    <TextInput
+                                        className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
+                                        placeholder="••••••••"
+                                        placeholderTextColor="#9ca3af"
+                                        value={password}
+                                        onChangeText={setPassword}
+                                        secureTextEntry={!showPassword}
+                                    />
+                                    <TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
+                                        {showPassword ? (
+                                            <EyeOff size={24} color="#6b7280" />
+                                        ) : (
+                                            <Eye size={24} color="#6b7280" />
+                                        )}
+                                    </TouchableOpacity>
+                                </View>
+                                <TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
+                                    <Text className="text-[#099499] font-bold text-base">Password dimenticata?</Text>
+                                </TouchableOpacity>
+                            </View>
+
+                            {/* Tasto Login */}
+                            <TouchableOpacity
+                                onPress={handleLogin}
+                                activeOpacity={0.8}
+                                className={`bg-[#099499] h-16 rounded-2xl flex-row justify-center items-center shadow-md mt-4 flex ${isLoading ? 'opacity-70' : ''}`}
+                                disabled={isLoading}
+                            >
+                                <Text className="text-white text-xl font-bold mr-2">
+                                    {isLoading ? 'Accesso in corso...' : 'Accedi'}
+                                </Text>
+                                {!isLoading && <LogIn size={24} color="white" />}
+                            </TouchableOpacity>
+                        </View>
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            </View>
+        </View>
+    );
+}

data/data.ts

@@ -1,8 +1,11 @@
-import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '../types/types';
+import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '@/types/types';
 
 // --- MOCK DATA (File: data.ts) ---
 export const MOCK_USER: UserData = {
-  name: "Mario Rossi",
+  name: "Mario",
+  surname: "Rossi",
+  username: "mario.rossi",
+  email: "mario.rossi@esempio.com",
   role: "Tecnico Specializzato",
   id: "EMP-8842"
 };

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",
+    "axios": "^1.13.2",
     "expo": "~54.0.25",
     "expo-constants": "~18.0.10",
     "expo-font": "~14.0.9",
@@ -22,6 +24,7 @@
     "expo-image": "~3.0.10",
     "expo-linking": "~8.0.9",
     "expo-router": "~6.0.15",
+    "expo-secure-store": "~15.0.8",
     "expo-splash-screen": "~31.0.11",
     "expo-status-bar": "~3.0.8",
     "expo-symbols": "~1.0.7",

types/types.ts

@@ -1,9 +1,11 @@
 // --- TYPES & export INTERFACES (File: types.ts) ---
-// In un progetto reale, metti queste interfacce in un file separato 'types.ts'
 
 export interface UserData {
   name: string;
-  role: string;
+  surname: string;
+  username: string;
+  role?: string;
+  email?: string;
   id: string;
 }
 

utils/api.ts

@@ -0,0 +1,43 @@
+import axios from 'axios';
+import * as SecureStore from 'expo-secure-store';
+
+// CONFIGURAZIONE GATEWAY (Adatta questi valori al tuo DDEV)
+// Se sei su emulatore Android usa 10.0.2.2, se su iOS o fisico usa il tuo IP LAN (es 192.168.1.x)
+const GATEWAY_BASE_URL = "http://10.0.2.2:PORTA"; 
+export const GATEWAY_ENDPOINT = `${GATEWAY_BASE_URL}/tuo_endpoint_gateway`; 
+export const GATEWAY_TOKEN = "il_tuo_token_statico_se_esiste";
+
+const api = axios.create({
+    
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// INTERCEPTOR: Configura ogni chiamata al volo
+api.interceptors.request.use(async (config) => {
+    try {
+        // 1. Cerchiamo se abbiamo già salvato l'URL finale del backend (post-gateway)
+        const savedBaseUrl = await SecureStore.getItemAsync('App_URL');
+        
+        if (savedBaseUrl) {
+            config.baseURL = savedBaseUrl;
+        } else {
+            // Se non c'è, usiamo il gateway come fallback o gestiamo l'errore
+            // (La logica di init nell'AuthContext dovrebbe averlo già settato)
+            config.baseURL = GATEWAY_BASE_URL; 
+        }
+
+        // 2. Cerchiamo il token utente
+        const token = await SecureStore.getItemAsync('auth-token');
+        if (token) {
+            // Adatta l'header in base al tuo backend (Bearer, x-access-tokens, etc.)
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+    } catch (error) {
+        console.error("Errore interceptor:", error);
+    }
+    return config;
+});
+
+export default api;

utils/authContext.tsx

@@ -0,0 +1,176 @@
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { SplashScreen, useRouter, useSegments } from 'expo-router';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { UserData } from '@/types/types';
+import * as SecureStore from 'expo-secure-store';
+import api, { GATEWAY_ENDPOINT, GATEWAY_TOKEN } from './api';
+import axios from 'axios';
+
+type AuthState = {
+    isAuthenticated: boolean;
+    isReady: boolean;
+    user: UserData | null;
+    logIn: (token: string, userData: UserData) => void;
+    logOut: () => void;
+};
+
+SplashScreen.preventAutoHideAsync();
+
+const KEY_TOKEN = 'auth-token';
+const KEY_URL = 'App_URL';
+
+export const AuthContext = createContext<AuthState>({
+    isAuthenticated: false,
+    isReady: false,
+    user: null,
+    logIn: () => { },
+    logOut: () => { },
+});
+
+export const useAuth = () => useContext(AuthContext);
+
+export function AuthProvider({ children }: PropsWithChildren) {
+    const [isReady, setIsReady] = useState(false);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [user, setUser] = useState<UserData | null>(null);
+    const router = useRouter();
+    const segments = useSegments();
+
+    const storeAuthState = async (newState: { isAuthenticated: boolean }) => {
+        try {
+            const jsonValue = JSON.stringify(newState);
+            await AsyncStorage.setItem(KEY_TOKEN, jsonValue);
+        } catch (error) {
+            console.error('Errore nel salvataggio dello stato di autenticazione:', error);
+        }
+    }
+
+    const logIn = async (token: string, userData: UserData) => {
+        try {
+            await SecureStore.setItemAsync(KEY_TOKEN, token);
+            setIsAuthenticated(true);
+            setUser(userData);
+            storeAuthState({ isAuthenticated: true }); // TODO: can be removed later
+            router.replace('/');
+        } catch (error) {
+            console.error('Errore durante il login:', error);
+        }
+    };
+
+    const logOut = async () => {
+        try {
+            await SecureStore.deleteItemAsync(KEY_TOKEN);
+            setIsAuthenticated(false);
+            setUser(null);
+            storeAuthState({ isAuthenticated: false });
+            router.replace('/login');
+        } catch (error) {
+            console.error('Errore durante il logout:', error);
+        }
+    };
+
+    useEffect(() => {
+        const initApp = async () => {
+            try {
+                // 1. Gestione URL Gateway (Logica "else" del vecchio snippet)
+                let currentApiUrl = await SecureStore.getItemAsync(KEY_URL);
+
+                if (!currentApiUrl) {
+                    console.log("URL non trovato, contatto Gateway...");
+                    try {
+                        // Chiamata diretta al gateway (senza interceptor api.ts)
+                        const gwResponse = await axios.get(GATEWAY_ENDPOINT, {
+                            headers: { "x-access-tokens": GATEWAY_TOKEN }
+                        });
+
+                        // Supponiamo che il backend ritorni { url: "http://..." }
+                        // Adatta questo parsing alla risposta reale del tuo backend
+                        const newUrl = gwResponse.data.url + "/api/app_cantieri";
+
+                        await SecureStore.setItemAsync(KEY_URL, newUrl);
+                        currentApiUrl = newUrl;
+                        console.log("URL acquisito:", newUrl);
+                    } catch (gwError) {
+                        console.error("Errore connessione Gateway:", gwError);
+                        // Qui potresti decidere di non bloccare l'app o mostrare un errore
+                    }
+                }
+
+                // 2. Controllo Token e Recupero User (Logica "if" del vecchio snippet)
+                const savedToken = await SecureStore.getItemAsync(KEY_TOKEN);
+
+                if (savedToken && currentApiUrl) {
+                    // Verifichiamo il token chiamando /user
+                    // Qui usiamo l'istanza 'api' importata che ora userà l'URL e il token
+                    const userRes = await api.get("/user");
+
+                    const result = userRes.data;
+                    const loadedUser: UserData = {
+                        name: result.nome,
+                        surname: result.cognome,
+                        username: result.username,
+                        email: result.email,
+                        role: result.role,
+                        id: result.id,
+                    };
+
+                    setUser(loadedUser);
+                    setIsAuthenticated(true);
+                }
+            } catch (error) {
+                console.error('Errore durante l\'inizializzazione dell\'app:', error);
+                // Se il token è scaduto o l'API fallisce, consideriamo l'utente non loggato
+                await SecureStore.deleteItemAsync(KEY_TOKEN);
+                setIsAuthenticated(false);
+                setUser(null);
+            } finally {
+                setIsReady(true);
+                await SplashScreen.hideAsync();
+            }
+        };
+
+
+        // TODO: can be removed later
+        // const getAuthFromStorage = async () => {
+        //     try {
+        //         const jsonValue = await AsyncStorage.getItem(KEY_TOKEN);
+        //         if (jsonValue != null) {
+        //             const auth = JSON.parse(jsonValue);
+        //             setIsAuthenticated(auth.isAuthenticated);
+        //         }
+        //     } catch (error) {
+        //         console.error('Errore nel recupero dello stato di autenticazione:', error);
+        //     }
+        //     setIsReady(true);
+        // };
+        // getAuthFromStorage();
+
+        initApp();
+    }, []);
+
+    // TODO: Can be removed later
+    // useEffect(() => {
+    //     if (isReady) {
+    //         SplashScreen.hideAsync();
+    //     }
+    // }, [isReady]);
+
+    // Protezione rotte (opzionale, ma consigliata qui o nel Layout)
+    useEffect(() => {
+        if (!isReady) return;
+
+        const inAuthGroup = segments[0] === '(protected)';
+
+        if (!isAuthenticated && inAuthGroup) {
+            router.replace('/login');
+        } else if (isAuthenticated && !inAuthGroup) {
+            // router.replace('/(protected)/home'); // Decommenta se vuoi redirect automatico da login a home
+        }
+    }, [isReady, isAuthenticated, segments]);
+
+    return (
+        <AuthContext.Provider value={{ isReady, isAuthenticated, user, logIn, logOut }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}