feat: add authentication in native

apps/cli/template/base/apps/native/app.json

@@ -9,7 +9,10 @@
       "output": "static",
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      "expo-secure-store"
+    ],
     "experiments": {
       "typedRoutes": true,
       "tsconfigPaths": true

apps/cli/template/base/apps/native/app/(drawer)/(tabs)/index.tsx

@@ -1,9 +1,17 @@
-import { View, Text } from "react-native";
+import { Container } from "@/components/container";
+import { Text, View } from "react-native";
 
-export default function App() {
-  return (
-    <View>
-      <Text>Hello, World!</Text>
-    </View>
-  );
+export default function TabOne() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab One
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the first tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
 }

apps/cli/template/base/apps/native/app/(drawer)/(tabs)/two.tsx

@@ -1,16 +1,17 @@
-import { Stack } from "expo-router";
-import { View, Text } from "react-native";
-
 import { Container } from "@/components/container";
+import { Text, View } from "react-native";
 
-export default function Home() {
-  return (
-    <>
-      <Container>
-        <View>
-          <Text>Tab Two</Text>
-        </View>
-      </Container>
-    </>
-  );
+export default function TabTwo() {
+	return (
+		<Container>
+			<View className="p-6 flex-1 justify-center">
+				<Text className="text-2xl font-bold text-foreground text-center mb-4">
+					Tab Two
+				</Text>
+				<Text className="text-foreground text-center">
+					This is the second tab of the application.
+				</Text>
+			</View>
+		</Container>
+	);
 }

apps/cli/template/base/apps/native/app/modal.tsx

@@ -1,15 +1,12 @@
+import { Container } from "@/components/container";
 import { Text, View } from "react-native";
 
-import { Container } from "@/components/container";
-
 export default function Modal() {
-  return (
-    <>
-      <Container>
-        <View>
-          <Text>HI MODAL</Text>
-        </View>
-      </Container>
-    </>
-  );
+	return (
+		<Container>
+			<View className="flex-1 justify-center items-center">
+				<Text className="text-xl font-bold text-foreground">Modal View</Text>
+			</View>
+		</Container>
+	);
 }

apps/cli/template/base/apps/native/metro.config.js

@@ -15,6 +15,8 @@ const config = withTurborepoManagedCache(
 
 config.resolver.unstable_enablePackageExports = true;
 
+config.resolver.disableHierarchicalLookup = true;
+
 module.exports = config;
 
 /**

apps/cli/template/base/apps/native/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "expo-router/entry",
   "scripts": {
-    "dev": "expo start",
+    "dev": "expo start --clear",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "prebuild": "expo prebuild",
@@ -19,18 +19,19 @@
     "@trpc/client": "^11.0.0",
     "@trpc/server": "^11.0.0",
     "@trpc/tanstack-react-query": "^11.0.0",
-    "expo": "^52.0.41",
+    "expo": "^52.0.44",
     "expo-constants": "~17.0.8",
     "expo-linking": "~7.0.5",
     "expo-navigation-bar": "~4.0.8",
     "expo-router": "~4.0.19",
+    "expo-secure-store": "~14.0.1",
     "expo-status-bar": "~2.0.1",
     "expo-system-ui": "~4.0.8",
     "expo-web-browser": "~14.0.2",
     "nativewind": "^4.1.23",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.7",
+    "react-native": "0.76.9",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "3.16.2",
     "react-native-safe-area-context": "4.12.0",

apps/cli/template/base/apps/web-tanstack-router/src/main.tsx

@@ -3,13 +3,13 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import ReactDOM from "react-dom/client";
 import Loader from "./components/loader";
 import { routeTree } from "./routeTree.gen";
-import { queryClient, trpcClient } from "./utils/trpc";
+import { queryClient, trpc } from "./utils/trpc";
 
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
   defaultPendingComponent: () => <Loader />,
-  context: { trpcClient },
+  context: { trpc, queryClient },
   Wrap: function WrapComponent({ children }) {
     return (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

apps/cli/template/base/apps/web-tanstack-router/src/routes/__root.tsx

@@ -2,7 +2,8 @@ import Header from "@/components/header";
 import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import type { trpcClient } from "@/utils/trpc";
+import type { trpc } from "@/utils/trpc";
+import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
   HeadContent,
@@ -14,7 +15,8 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
 
 export interface RouterAppContext {
-  trpcClient: typeof trpcClient;
+  trpc: typeof trpc;
+  queryClient: QueryClient;
 }
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({