mobile: Do the session routing in the homescreen

4 files changed, 50 insertions, 17 deletions

diff --git a/packages/mobile/app/dashboard.tsx b/packages/mobile/app/dashboard.tsx
index 8be57615..b4f535c5 100644
--- a/packages/mobile/app/dashboard.tsx
+++ b/packages/mobile/app/dashboard.tsx
@@ -4,24 +4,27 @@ import { Text, View } from "react-native";
 
 import Logo from "@/components/Logo";
 import { Button } from "@/components/ui/Button";
-import useAppSettings from "@/lib/settings";
+import { useSession } from "@/lib/session";
 import { api } from "@/lib/trpc";
 
-export default function Main() {
+export default function Dashboard() {
   const router = useRouter();
-  const { settings, setSettings, isLoading } = useAppSettings();
+
+  const { isLoggedIn, logout } = useSession();
 
   useEffect(() => {
-    if (!isLoading && !settings.apiKey) {
+    if (isLoggedIn !== undefined && !isLoggedIn) {
       router.replace("signin");
     }
-  }, [settings, isLoading]);
+  }, [isLoggedIn]);
 
-  const onLogout = () => {
-    setSettings({ ...settings, apiKey: undefined });
-  };
+  const { data, error, isLoading } = api.users.whoami.useQuery();
 
-  const { data } = api.users.whoami.useQuery();
+  useEffect(() => {
+    if (error?.data?.code === "UNAUTHORIZED") {
+      logout();
+    }
+  }, [error]);
 
   return (
     <View className="flex h-full items-center justify-center gap-4 px-4">
@@ -29,7 +32,7 @@ export default function Main() {
       <Text className="justify-center">
         Logged in as: {isLoading ? "Loading ..." : data?.email}
       </Text>
-      <Button label="Log Out" onPress={onLogout} />
+      <Button label="Log Out" onPress={logout} />
     </View>
   );
 }
diff --git a/packages/mobile/app/index.tsx b/packages/mobile/app/index.tsx
index 557417d7..5ce20cda 100644
--- a/packages/mobile/app/index.tsx
+++ b/packages/mobile/app/index.tsx
@@ -1,11 +1,20 @@
-import { Link } from "expo-router";
+import { useRouter } from "expo-router";
+import { useEffect } from "react";
 import { View } from "react-native";
 
+import { useSession } from "@/lib/session";
+
 export default function App() {
-  return (
-    <View className="flex-1 items-center justify-center gap-4 bg-white">
-      <Link href="signin">Signin</Link>
-      <Link href="dashboard">Dashboard</Link>
-    </View>
-  );
+  const router = useRouter();
+  const { isLoggedIn } = useSession();
+  useEffect(() => {
+    if (isLoggedIn === undefined) {
+      // Wait until it's loaded
+    } else if (isLoggedIn) {
+      router.replace("dashboard");
+    } else {
+      router.replace("signin");
+    }
+  }, [isLoggedIn]);
+  return <View />;
 }
diff --git a/packages/mobile/lib/session.ts b/packages/mobile/lib/session.ts
new file mode 100644
index 00000000..e2ab245b
--- /dev/null
+++ b/packages/mobile/lib/session.ts
@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from "react";
+
+import useAppSettings from "./settings";
+
+export function useSession() {
+  const { settings, isLoading, setSettings } = useAppSettings();
+  const isLoggedIn = useMemo(() => {
+    return isLoading ? undefined : !!settings.apiKey;
+  }, [isLoading, settings]);
+
+  const logout = useCallback(() => {
+    setSettings({ ...settings, apiKey: undefined });
+  }, [settings]);
+
+  return {
+    isLoggedIn,
+    isLoading,
+    logout,
+  };
+}
diff --git a/packages/mobile/lib/storage-state.ts b/packages/mobile/lib/storage-state.ts
index 09917c79..4988f0e0 100644
--- a/packages/mobile/lib/storage-state.ts
+++ b/packages/mobile/lib/storage-state.ts
@@ -31,6 +31,7 @@ export function useStorageState<T>(key: string): UseStateHook<T> {
   React.useEffect(() => {
     SecureStore.getItemAsync(key).then((value) => {
       if (!value) {
+        setState(null);
         return null;
       }
       setState(JSON.parse(value));