fix: handle login expirary

app/(tabs)/index.tsx

@@ -23,6 +23,12 @@ import api from '../../src/services/api';
 import { syncDevicesToWidget } from '../../src/services/widgetSync';
 import { Device } from '../../src/types';
 
+const isAuthError = (error: unknown) =>
+  typeof error === 'object' &&
+  error !== null &&
+  'isAuthError' in error &&
+  (error as { isAuthError?: boolean }).isAuthError === true;
+
 export default function DeviceListScreen() {
   const colorScheme = useColorScheme() ?? 'light';
   const isDark = colorScheme === 'dark';
@@ -44,6 +50,11 @@ export default function DeviceListScreen() {
       // Sync devices to iOS widget
       syncDevicesToWidget(data);
     } catch (error: any) {
+      if (isAuthError(error)) {
+        setDevices([]);
+        return;
+      }
+
       // For background/periodic refreshes, avoid interruptive alerts
       if (showLoading) {
         Alert.alert('Error', error.message || 'Failed to load devices');

app/(tabs)/settings.tsx

@@ -32,8 +32,8 @@ export default function SettingsScreen() {
         text: 'Logout',
         style: 'destructive',
         onPress: async () => {
-          router.replace('/login');
           await logout();
+          router.replace('/login');
         },
       },
     ]);

app/_layout.tsx

@@ -1,9 +1,34 @@
 import { Ionicons } from '@expo/vector-icons';
 import { Stack, useRouter, useSegments } from 'expo-router';
+import { useEffect } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 import { useColorScheme } from '../hooks/use-color-scheme';
 import { AuthProvider, useAuth } from '../src/context/AuthContext';
 
+function AuthRedirect() {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const segments = useSegments();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    const isLoginRoute = segments[0] === 'login';
+
+    if (!isAuthenticated && !isLoginRoute) {
+      router.replace('/login');
+    }
+
+    if (isAuthenticated && isLoginRoute) {
+      router.replace('/(tabs)');
+    }
+  }, [isAuthenticated, isLoading, router, segments]);
+
+  return null;
+}
+
 function DevicesHeader() {
   const router = useRouter();
   const isDark = useColorScheme() === 'dark';
@@ -45,6 +70,7 @@ export default function RootLayout() {
 
   return (
     <AuthProvider>
+      <AuthRedirect />
       <Stack>
         {/* Root index that performs auth redirect (app/index.tsx) */}
         <Stack.Screen name="index" options={{ headerShown: false }} />