apk/app/(auth)/_layout.tsx

@@ -1,18 +1,5 @@
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
-import { useAuth } from "@/context/auth-context";
-import { useEffect } from "react";
 
 export default function AuthLayout() {
-  const { user } = useAuth();
+  return <Stack screenOptions={{ headerShown: false }} />;
-  const router = useRouter();
-
-  useEffect(() => {
-    if (user) {
-      router.replace("/(tabs)");
-    } else {
-        router.replace("/(auth)/login");
-    }
-  }, [user]);
-
-  return <Stack />;
 }

apk/app/(auth)/login.tsx

@@ -48,7 +48,7 @@ function LoginScreen({ onSwitch }) {
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onSwitch}>
-        <Text style={styles.link}>Don't have an account? Register</Text>
+        <Text style={styles.link}>Don&apos;t have an account? Register</Text>
       </TouchableOpacity>
     </View>
   );

apk/app/(tabs)/_layout.tsx

@@ -1,13 +1,5 @@
-// app/(tabs)/_layout.tsx
+import { Tabs } from "expo-router";
-import { Redirect, Tabs } from "expo-router";
-import { useAuth } from "@/context/auth-context";
 
 export default function TabsLayout() {
-  const { user } = useAuth();
-
-  if (!user) {
-    return <Redirect href="/(auth)/login" />;
-  }
-
   return <Tabs />;
 }

apk/components/scroll-view.tsx

@@ -1,10 +1,8 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
 
-import { useColorScheme } from "@/hooks/use-color-scheme";
 import { useThemeColor } from "@/hooks/use-theme-color";
 import { PropsWithChildren } from "react";
-import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type Props = PropsWithChildren<{
@@ -14,7 +12,6 @@ type Props = PropsWithChildren<{
 export default function ScrollView({ children, headerBackgroundColor }: Props) {
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const insets = useSafeAreaInsets();
-  const colorScheme = useColorScheme() ?? "light";
   const backgroundColor = useThemeColor({}, "background");
 
   return (

apk/components/views/root-navigation.tsx

@@ -1,9 +1,33 @@
-import { useEffect } from "react";
+import { BirthdaysProvider } from "@/context/birthdays-context";
-import { Stack, useRouter, useSegments } from "expo-router";
 import { useAuth } from "@/context/auth-context";
+import { Stack, router, useRootNavigationState, useSegments } from "expo-router";
+import { useEffect } from "react";
 
 export default function RootLayout() {
+  const { user, isHydrated } = useAuth();
+  const navigationState = useRootNavigationState();
+  const segments = useSegments();
+
+  useEffect(() => {
+    if (!isHydrated || !navigationState?.key) {
+      return;
+    }
+
+    const inAuthGroup = segments[0] === "(auth)";
+
+    if (!user && !inAuthGroup) {
+      router.replace("/(auth)/login");
+      return;
+    }
+
+    if (user && inAuthGroup) {
+      router.replace("/(tabs)");
+    }
+  }, [isHydrated, navigationState?.key, segments, user]);
+
   return (
-    <Stack screenOptions={{ headerShown: false }} />
+    <BirthdaysProvider>
+      <Stack screenOptions={{ headerShown: false }} />
+    </BirthdaysProvider>
   );
 }

apk/context/auth-context.tsx

@@ -7,29 +7,49 @@ interface User {
 
 interface AuthContextValue {
     user: User | null;
+    isHydrated: boolean;
     login: (email: string, password: string) => Promise<void>;
-    logout: () => void;
+    logout: () => Promise<void>;
 }
 
 const authContext = React.createContext<AuthContextValue | undefined>(undefined);
+const STORAGE_KEY = "user";
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
     const [user, setUser] = React.useState<User | null>(null);
+    const [isHydrated, setIsHydrated] = React.useState(false);
+
+    React.useEffect(() => {
+        const restoreUser = async () => {
+            try {
+                const storedUser = await AsyncStorage.getItem(STORAGE_KEY);
+                if (storedUser) {
+                    setUser(JSON.parse(storedUser) as User);
+                }
+            } catch (error) {
+                console.log("Error restoring user", error);
+            } finally {
+                setIsHydrated(true);
+            }
+        };
+
+        restoreUser();
+    }, []);
     
     const login = async (email: string, password: string) => {
         const fakeUser = { email };
 
-        await AsyncStorage.setItem("user", JSON.stringify(fakeUser));
+        await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(fakeUser));
         setUser(fakeUser);
     }
 
     const logout = async () => {
-        await AsyncStorage.removeItem("user");
+        await AsyncStorage.removeItem(STORAGE_KEY);
         setUser(null);
     }
 
     return (
-        <authContext.Provider value={{ user, login, logout }}>
+        <authContext.Provider value={{ user, isHydrated, login, logout }}>
             {children}
         </authContext.Provider>
     );
@@ -44,4 +64,3 @@ export function useAuth() {
 }
 
 
-