intial files

apps/native/app/_layout.tsx

@@ -1,44 +1,53 @@
 import "@/global.css";
-import { env } from "@code/env/native";
-import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
-import { ConvexReactClient } from "convex/react";
+import { NativeAuthProvider } from "@code/auth/native";
+import { useConvexAuth } from "convex/react";
 import { Stack } from "expo-router";
-import { HeroUINativeProvider } from "heroui-native";
+import { HeroUINativeProvider, Spinner } from "heroui-native";
+import { View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 
 import { AppThemeProvider } from "@/contexts/app-theme-context";
-import { authClient } from "@/lib/auth-client";
 
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
+function RootNavigator() {
+  const { isAuthenticated, isLoading } = useConvexAuth();
 
-const convex = new ConvexReactClient(env.EXPO_PUBLIC_CONVEX_URL, {
-  unsavedChangesWarning: false,
-});
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-background">
+        <Spinner size="lg" />
+      </View>
+    );
+  }
 
-function StackLayout() {
   return (
-    <Stack screenOptions={{}}>
-      <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
-      <Stack.Screen name="modal" options={{ title: "Modal", presentation: "modal" }} />
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Protected guard={!isAuthenticated}>
+        <Stack.Screen name="(auth)" />
+      </Stack.Protected>
+      <Stack.Protected guard={isAuthenticated}>
+        <Stack.Screen name="(drawer)" />
+        <Stack.Screen
+          name="modal"
+          options={{ headerShown: true, presentation: "modal", title: "Modal" }}
+        />
+      </Stack.Protected>
     </Stack>
   );
 }
 
 export default function Layout() {
   return (
-    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
+    <NativeAuthProvider>
       <GestureHandlerRootView style={{ flex: 1 }}>
         <KeyboardProvider>
           <AppThemeProvider>
             <HeroUINativeProvider>
-              <StackLayout />
+              <RootNavigator />
             </HeroUINativeProvider>
           </AppThemeProvider>
         </KeyboardProvider>
       </GestureHandlerRootView>
-    </ConvexBetterAuthProvider>
+    </NativeAuthProvider>
   );
 }