Update structure

app.json

@@ -38,7 +38,8 @@
             "backgroundColor": "#000000"
           }
         }
-      ]
+      ],
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

app/(protected)/(tabs)/calendar.tsx

@@ -0,0 +1 @@
+export { default } from "@/features/calendar/screens/CalendarScreen";

app/(protected)/(tabs)/index.tsx

@@ -0,0 +1,50 @@
+import Button from "@/components/ui/buttons";
+import { useAuth } from "@/features/shared/hooks/useAuth";
+import { router } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function Index() {
+  const { logout } = useAuth();
+
+  const handleLogout = async () => {
+    await logout();
+    router.replace("/login");
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>To-do app</Text>
+      <Text style={styles.subtitle}>You are logged in.</Text>
+      <View style={styles.actions}>
+        <Button
+          label="Go to the Calendar"
+          onPress={() => router.push("/calendar")}
+        />
+        <Button label="Logout" onPress={handleLogout} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 24,
+  },
+  actions: {
+    alignItems: "center",
+    gap: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#555",
+    textAlign: "center",
+  },
+});

app/(protected)/_layout.tsx

@@ -0,0 +1,21 @@
+import { useAuth } from "@/features/shared/hooks/useAuth";
+import { Redirect, Slot } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function ProtectedLayout() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <View>
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Redirect href="/login" />;
+  }
+
+  return <Slot />;
+}

app/(protected)/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function ProtectedIndex() {
+  return <Redirect href="/calendar" />;
+}

app/(public)/_layout.tsx

@@ -0,0 +1,21 @@
+import { useAuth } from "@/features/shared/hooks/useAuth";
+import { Redirect, Slot } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function PublicLayout() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <View>
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  if (isAuthenticated) {
+    return <Redirect href="/calendar" />;
+  }
+
+  return <Slot />;
+}

app/(public)/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function PublicIndex() {
+  return <Redirect href="/login" />;
+}

app/(public)/login.tsx

@@ -0,0 +1,46 @@
+import Button from "@/components/ui/buttons";
+import { useAuth } from "@/features/shared/hooks/useAuth";
+import { router } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function LoginScreen() {
+  const { login, isLoading } = useAuth();
+
+  const handleLogin = async () => {
+    await login();
+    router.replace("/calendar");
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>To-do app</Text>
+      <Text style={styles.subtitle}>
+        Welcome to the app. Login to access all pages.
+      </Text>
+      <Button
+        label={isLoading ? "Loading..." : "Login"}
+        onPress={handleLogin}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#555",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+});