intial files

apps/native/app/(auth)/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

apps/native/app/(auth)/login.tsx

@@ -0,0 +1,24 @@
+import { NativeLoginForm } from "@code/auth/native";
+import { router } from "expo-router";
+import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
+
+export default function LoginScreen() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      className="flex-1 bg-background"
+    >
+      <ScrollView
+        contentContainerClassName="flex-grow justify-center p-6"
+        keyboardShouldPersistTaps="handled"
+      >
+        <View className="mx-auto w-full max-w-md">
+          <NativeLoginForm
+            onNavigateSignUp={() => router.push("/(auth)/signup")}
+            onSuccess={() => router.replace("/")}
+          />
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/signup.tsx

@@ -0,0 +1,24 @@
+import { NativeSignupForm } from "@code/auth/native";
+import { router } from "expo-router";
+import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
+
+export default function SignupScreen() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      className="flex-1 bg-background"
+    >
+      <ScrollView
+        contentContainerClassName="flex-grow justify-center p-6"
+        keyboardShouldPersistTaps="handled"
+      >
+        <View className="mx-auto w-full max-w-md py-6">
+          <NativeSignupForm
+            onNavigateSignIn={() => router.push("/(auth)/login")}
+            onSuccess={() => router.replace("/")}
+          />
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(drawer)/index.tsx

@@ -1,72 +1,53 @@
+import { authClient } from "@code/auth/native";
 import { api } from "@code/backend/convex/_generated/api";
-import { useConvexAuth, useQuery } from "convex/react";
-import { Button, Chip, Separator, Spinner, Surface, useThemeColor } from "heroui-native";
+import { useQuery } from "convex/react";
+import { Button, Spinner, Surface } from "heroui-native";
 import { Text, View } from "react-native";
 
 import { Container } from "@/components/container";
-import { SignIn } from "@/components/sign-in";
-import { SignUp } from "@/components/sign-up";
-import { authClient } from "@/lib/auth-client";
 
 export default function Home() {
   const healthCheck = useQuery(api.healthCheck.get);
-  const { isAuthenticated } = useConvexAuth();
-  const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
-  const successColor = useThemeColor("success");
-  const dangerColor = useThemeColor("danger");
-
-  const isConnected = healthCheck === "OK";
-  const isLoading = healthCheck === undefined;
+  const user = useQuery(api.auth.getCurrentUser);
 
   return (
     <Container className="px-4 pb-4">
-      <View className="py-6 mb-5">
-        <Text className="text-3xl font-semibold text-foreground tracking-tight">
-          Better T Stack
-        </Text>
-        <Text className="text-muted text-sm mt-1">Full-stack TypeScript starter</Text>
+      <View className="mb-5 py-6">
+        <Text className="text-3xl font-semibold tracking-tight text-foreground">Zopu</Text>
+        <Text className="mt-1 text-sm text-muted">Your authenticated workspace</Text>
       </View>
 
-      {user ? (
-        <Surface variant="secondary" className="mb-4 p-4 rounded-xl">
-          <View className="flex-row items-center justify-between">
+      <Surface className="mb-4 rounded-xl p-4" variant="secondary">
+        {user === undefined ? (
+          <Spinner size="sm" />
+        ) : (
+          <View className="flex-row items-center justify-between gap-4">
             <View className="flex-1">
-              <Text className="text-foreground font-medium">{user.name}</Text>
-              <Text className="text-muted text-xs mt-0.5">{user.email}</Text>
+              <Text className="font-medium text-foreground">{user?.name ?? "Signed in"}</Text>
+              <Text className="mt-0.5 text-xs text-muted">{user?.email}</Text>
             </View>
-            <Button
-              variant="danger"
-              size="sm"
-              onPress={() => {
-                authClient.signOut();
-              }}
-            >
-              Sign Out
+            <Button onPress={() => void authClient.signOut()} size="sm" variant="danger">
+              <Button.Label>Sign out</Button.Label>
             </Button>
           </View>
-        </Surface>
-      ) : null}
-      <Surface variant="secondary" className="p-4 rounded-xl">
-        <Text className="text-foreground font-medium mb-2">API Status</Text>
+        )}
+      </Surface>
+
+      <Surface className="rounded-xl p-4" variant="secondary">
+        <Text className="mb-2 font-medium text-foreground">API status</Text>
         <View className="flex-row items-center gap-2">
           <View
-            className={`w-2 h-2 rounded-full ${healthCheck === "OK" ? "bg-success" : "bg-danger"}`}
+            className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-success" : "bg-danger"}`}
           />
-          <Text className="text-muted text-xs">
+          <Text className="text-xs text-muted">
             {healthCheck === undefined
-              ? "Checking..."
+              ? "Checking…"
               : healthCheck === "OK"
-                ? "Connected to API"
-                : "API Disconnected"}
+                ? "Connected to Convex"
+                : "Convex unavailable"}
           </Text>
         </View>
       </Surface>
-      {!user && (
-        <View className="mt-5 gap-4">
-          <SignIn />
-          <SignUp />
-        </View>
-      )}
     </Container>
   );
 }

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>
   );
 }