Fix auth routing issue

app/_layout.tsx

@@ -1,77 +1,61 @@
-import i18next, { getLanguage } from "../services/i18n/index";
-import { Stack, useRouter } from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
+// app/_layout.tsx
+import { Stack } from "expo-router";
 import { useEffect, useState } from "react";
-import "react-native-reanimated";
-import { I18nextProvider } from "react-i18next";
-import { Provider } from "react-redux";
-import { store } from "@/store";
+import { Provider, useDispatch, useSelector } from "react-redux";
+import { store, AppDispatch, RootState } from "@/store";
 import { PaperProvider } from "react-native-paper";
+import { I18nextProvider } from "react-i18next";
+import i18next from "@/services/i18n";
 import SnackbarProvider from "@/contexts/Snackbar";
-
-export { ErrorBoundary } from "expo-router";
-
-export const unstable_settings = {
-  initialRouteName: "(tabs)",
-};
+import * as SplashScreen from "expo-splash-screen";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { STORAGE_KEYS } from "@/constants/config";
+import { setIsLoggedIn } from "@/store/authSlice";
 
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
-  const [appIsReady, setAppIsReady] = useState(false);
-  const [shouldRedirect, setShouldRedirect] = useState(false);
-  const router = useRouter();
-
-  useEffect(() => {
-    const initLang = async () => {
-      const lang = await getLanguage();
-      if (!lang) {
-        setShouldRedirect(true);
-      }
-      setAppIsReady(true);
-    };
-
-    initLang();
-  }, []);
-
-  useEffect(() => {
-    if (appIsReady) {
-      SplashScreen.hideAsync();
-      router.replace("/init/language");
-    }
-  }, [appIsReady]);
-
-  // useEffect(() => {
-  //   if (appIsReady && shouldRedirect) {
-  //     router.replace("/init/language");
-  //     setShouldRedirect(false);
-  //   }
-  // }, [appIsReady, shouldRedirect]);
-
-  if (!appIsReady) {
-    return null;
-  }
-
-  return <RootLayoutNav />;
-}
-
-function RootLayoutNav() {
   return (
     <PaperProvider>
       <SnackbarProvider>
         <Provider store={store}>
           <I18nextProvider i18n={i18next}>
-            <Stack
-              screenOptions={{
-                headerShown: false,
-                animation: "fade",
-              }}
-            >
-              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            </Stack>
+            <SplashAndAuthRouter />
           </I18nextProvider>
         </Provider>
       </SnackbarProvider>
     </PaperProvider>
   );
 }
+
+function SplashAndAuthRouter() {
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoggedIn = useSelector((state: RootState) => state.auth.isLoggedIn);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadAuth = async () => {
+      const token = await AsyncStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
+      dispatch(setIsLoggedIn(!!token));
+      setLoading(false);
+      SplashScreen.hideAsync();
+    };
+    loadAuth();
+  }, []);
+
+  if (loading) return null;
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Protected guard={isLoggedIn}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="user" />
+      </Stack.Protected>
+
+      <Stack.Protected guard={!isLoggedIn}>
+        <Stack.Screen name="init/language" />
+        <Stack.Screen name="auth" />
+      </Stack.Protected>
+    </Stack>
+  );
+}