create-better-t-stack 3.1.8-canary.65dbf382 → 3.1.8

package/templates/frontend/native/unistyles/app/(drawer)/index.tsx.hbs

@@ -1,4 +1,4 @@
-import { ScrollView, Text, View, TouchableOpacity } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { Container } from "@/components/container";
 
@@ -11,47 +11,33 @@ import { useQuery } from "@tanstack/react-query";
 import { trpc } from "@/utils/trpc";
 {{/if}}
 {{#if (eq backend "convex")}}
-  {{#if (eq auth "clerk")}}
-    import { Link } from "expo-router";
-    import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
-    import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-    import { useUser } from "@clerk/clerk-expo";
-    import { SignOutButton } from "@/components/sign-out-button";
-  {{else}}
-    {{#if (eq auth "better-auth")}}
-      import { useConvexAuth, useQuery } from "convex/react";
-      import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-      import { authClient } from "@/lib/auth-client";
-      import { SignIn } from "@/components/sign-in";
-      import { SignUp } from "@/components/sign-up";
-    {{else}}
-      import { useQuery } from "convex/react";
-      import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-    {{/if}}
-  {{/if}}
+{{#if (eq auth "clerk")}}
+import { Link } from "expo-router";
+import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { useUser } from "@clerk/clerk-expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else}}
+import { useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+{{/if}}
 {{/if}}
 
 export default function Home() {
   {{#if (eq api "orpc")}}
-    const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
   {{/if}}
   {{#if (eq api "trpc")}}
-    const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
   {{#if (eq backend "convex")}}
-    {{#if (eq auth "clerk")}}
-      const { user } = useUser();
-      const healthCheck = useQuery(api.healthCheck.get);
-      const privateData = useQuery(api.privateData.get);
-    {{else}}
-      {{#if (eq auth "better-auth")}}
-        const healthCheck = useQuery(api.healthCheck.get);
-        const { isAuthenticated } = useConvexAuth();
-        const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
-      {{else}}
-        const healthCheck = useQuery(api.healthCheck.get);
-      {{/if}}
-    {{/if}}
+  {{#if (eq auth "clerk")}}
+  const { user } = useUser();
+  const healthCheck = useQuery(api.healthCheck.get);
+  const privateData = useQuery(api.privateData.get);
+  {{else}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
   {{/if}}
 
   return (
@@ -68,125 +54,86 @@ export default function Home() {
               <Text style={styles.statusBadgeText}>LIVE</Text>
             </View>
           </View>
+
           {{#if (eq backend "convex")}}
-            {{#unless (eq auth "better-auth")}}
-              <View style={styles.statusRow}>
-                <View
-                  style={[
-                    styles.statusDot,
-                    healthCheck === "OK"
-                      ? styles.statusDotSuccess
-                      : styles.statusDotWarning,
-                  ]}
-                />
-                <View style={styles.statusContent}>
-                  <Text style={styles.statusLabel}>Convex</Text>
-                  <Text style={styles.statusDescription}>
-                    {healthCheck === undefined
-                      ? "Checking connection..."
-                      : healthCheck === "OK"
-                      ? "All systems operational"
-                      : "Service unavailable"}
-                  </Text>
-                </View>
-              </View>
-            {{/unless}}
+          <View style={styles.statusRow}>
+            <View
+              style={[
+                styles.statusDot,
+                healthCheck === "OK"
+                  ? styles.statusDotSuccess
+                  : styles.statusDotWarning,
+              ]}
+            />
+            <View style={styles.statusContent}>
+              <Text style={styles.statusLabel}>Convex</Text>
+              <Text style={styles.statusDescription}>
+                {healthCheck === undefined
+                  ? "Checking connection..."
+                  : healthCheck === "OK"
+                    ? "All systems operational"
+                    : "Service unavailable"}
+              </Text>
+            </View>
+          </View>
           {{else}}
             {{#unless (eq api "none")}}
-              <View style={styles.statusRow}>
-                <View
-                  style={[
-                    styles.statusDot,
-                    healthCheck.data
-                      ? styles.statusDotSuccess
-                      : styles.statusDotWarning,
-                  ]}
-                />
-                <View style={styles.statusContent}>
-                  <Text style={styles.statusLabel}>
-                    {{#if (eq api "orpc")}}ORPC{{/if}}
-                    {{#if (eq api "trpc")}}TRPC{{/if}}
-                  </Text>
-                  <Text style={styles.statusDescription}>
-                    {(healthCheck.isLoading)
-                      ? "Checking connection..."
-                      : healthCheck.data
-                      ? "All systems operational"
-                      : "Service unavailable"}
-                  </Text>
-                </View>
-              </View>
-            {{/unless}}
-          {{/if}}
-        </View>
-        {{#if (and (eq backend "convex") (eq auth "clerk"))}}
-          <Authenticated>
-            <Text>
-              Hello {user?.emailAddresses[0].emailAddress}
-            </Text>
-            <Text>
-              Private Data: {privateData?.message}
-            </Text>
-            <SignOutButton />
-          </Authenticated>
-          <Unauthenticated>
-            <Link href="/(auth)/sign-in">
-              <Text>Sign in</Text>
-            </Link>
-            <Link href="/(auth)/sign-up">
-              <Text>Sign up</Text>
-            </Link>
-          </Unauthenticated>
-          <AuthLoading>
-            <Text>Loading...</Text>
-          </AuthLoading>
-        {{/if}}
-        {{#if (and (eq backend "convex") (eq auth "better-auth"))}}
-          {user ? (
-            <View style={styles.userCard}>
-              <View style={styles.userHeader}>
-                <Text style={styles.userWelcome}>
-                  Welcome,{" "}
-                  <Text style={styles.userName}>{user.name}</Text>
-                </Text>
-              </View>
-              <Text style={styles.userEmail}>{user.email}</Text>
-              <TouchableOpacity
-                style={styles.signOutButton}
-                onPress={() => {
-                  authClient.signOut();
-                }}
-              >
-                <Text style={styles.signOutText}>Sign Out</Text>
-              </TouchableOpacity>
-            </View>
-          ) : null}
-          <View style={styles.apiStatusCard}>
-            <Text style={styles.apiStatusTitle}>API Status</Text>
-            <View style={styles.apiStatusRow}>
+            <View style={styles.statusRow}>
               <View
                 style={[
                   styles.statusDot,
-                  healthCheck === "OK"
+                  healthCheck.data
                     ? styles.statusDotSuccess
                     : styles.statusDotWarning,
                 ]}
               />
-              <Text style={styles.apiStatusText}>
-                {healthCheck === undefined
-                  ? "Checking..."
-                  : healthCheck === "OK"
-                  ? "Connected to API"
-                  : "API Disconnected"}
-              </Text>
+              <View style={styles.statusContent}>
+                <Text style={styles.statusLabel}>
+                  {{#if (eq api "orpc")}}
+                  ORPC
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  TRPC
+                  {{/if}}
+                </Text>
+                <Text style={styles.statusDescription}>
+                  {{#if (eq api "orpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                </Text>
+              </View>
             </View>
-          </View>
-          {!user && (
-            <>
-              <SignIn />
-              <SignUp />
-            </>
-          )}
+            {{/unless}}
+          {{/if}}
+        </View>
+        {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+        <Authenticated>
+          <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
+          <Text>Private Data: {privateData?.message}</Text>
+          <SignOutButton />
+        </Authenticated>
+        <Unauthenticated>
+          <Link href="/(auth)/sign-in">
+            <Text>Sign in</Text>
+          </Link>
+          <Link href="/(auth)/sign-up">
+            <Text>Sign up</Text>
+          </Link>
+        </Unauthenticated>
+        <AuthLoading>
+          <Text>Loading...</Text>
+        </AuthLoading>
         {{/if}}
       </ScrollView>
     </Container>
@@ -273,62 +220,5 @@ const styles = StyleSheet.create((theme) => ({
   statusDescription: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.mutedForeground,
-  },
-  userCard: {
-    backgroundColor: theme.colors.card,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.lg,
-    padding: theme.spacing.md,
-    marginBottom: theme.spacing.md,
-  },
-  userHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: theme.spacing.xs,
-  },
-  userWelcome: {
-    fontSize: theme.fontSize.base,
-    color: theme.colors.foreground,
-  },
-  userName: {
-    fontWeight: "500",
-  },
-  userEmail: {
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.mutedForeground,
-    marginBottom: theme.spacing.md,
-  },
-  signOutButton: {
-    backgroundColor: theme.colors.destructive,
-    paddingVertical: theme.spacing.sm,
-    paddingHorizontal: theme.spacing.md,
-    borderRadius: theme.borderRadius.md,
-    alignSelf: "flex-start",
-  },
-  signOutText: {
-    color: theme.colors.destructiveForeground,
-    fontWeight: "500",
-  },
-  apiStatusCard: {
-    marginBottom: theme.spacing.md,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    padding: theme.spacing.md,
-  },
-  apiStatusTitle: {
-    marginBottom: theme.spacing.sm,
-    fontWeight: "500",
-    color: theme.colors.foreground,
-  },
-  apiStatusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing.xs,
-  },
-  apiStatusText: {
-    color: theme.colors.mutedForeground,
-  },
-}));
+  }
+}));

package/templates/frontend/native/unistyles/app/_layout.tsx.hbs

@@ -8,13 +8,7 @@ import { queryClient } from "@/utils/trpc";
 import { queryClient } from "@/utils/orpc";
 {{/if}}
 {{#if (eq backend "convex")}}
-{{#if (eq auth "better-auth")}}
-import { ConvexReactClient } from "convex/react";
-import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
-import { authClient } from "@/lib/auth-client";
-{{else}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
-{{/if}}
 {{#if (eq auth "clerk")}}
 import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
@@ -73,28 +67,6 @@ export default function RootLayout() {
         </GestureHandlerRootView>
       </ConvexProviderWithClerk>
     </ClerkProvider>
-    {{else if (eq auth "better-auth")}}
-    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack
-          screenOptions=\{{
-            headerStyle: {
-              backgroundColor: theme.colors.background,
-            },
-            headerTitleStyle: {
-              color: theme.colors.foreground,
-            },
-            headerTintColor: theme.colors.foreground,
-          }}}
-        >
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </ConvexBetterAuthProvider>
     {{else}}
     <ConvexProvider client={convex}>
       <GestureHandlerRootView style=\{{ flex: 1 }}>

package/templates/auth/better-auth/convex/native/base/lib/auth-client.ts.hbs

@@ -1,19 +0,0 @@
-import { createAuthClient } from "better-auth/react";
-import { anonymousClient } from "better-auth/client/plugins";
-import { convexClient } from "@convex-dev/better-auth/client/plugins";
-import { expoClient } from "@better-auth/expo/client";
-import Constants from "expo-constants";
-import * as SecureStore from "expo-secure-store";
-
-export const authClient = createAuthClient({
-  baseURL: process.env.EXPO_PUBLIC_CONVEX_SITE_URL,
-  plugins: [
-    anonymousClient(),
-    expoClient({
-      scheme: Constants.expoConfig?.scheme as string,
-      storagePrefix: Constants.expoConfig?.scheme as string,
-      storage: SecureStore,
-    }),
-    convexClient(),
-  ],
-});

package/templates/auth/better-auth/convex/native/nativewind/components/sign-in.tsx.hbs

@@ -1,86 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignIn() {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleLogin = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signIn.email(
-			{
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign in");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setEmail("");
-					setPassword("");
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Sign In
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleLogin}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign In</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}

package/templates/auth/better-auth/convex/native/nativewind/components/sign-up.tsx.hbs

@@ -1,97 +0,0 @@
-import { authClient } from "@/lib/auth-client";
-import { useState } from "react";
-import {
-	ActivityIndicator,
-	Text,
-	TextInput,
-	TouchableOpacity,
-	View,
-} from "react-native";
-
-export function SignUp() {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	const handleSignUp = async () => {
-		setIsLoading(true);
-		setError(null);
-
-		await authClient.signUp.email(
-			{
-				name,
-				email,
-				password,
-			},
-			{
-				onError: (error) => {
-					setError(error.error?.message || "Failed to sign up");
-					setIsLoading(false);
-				},
-				onSuccess: () => {
-					setName("");
-					setEmail("");
-					setPassword("");
-				},
-				onFinished: () => {
-					setIsLoading(false);
-				},
-			},
-		);
-	};
-
-	return (
-		<View className="mt-6 p-4 bg-card rounded-lg border border-border">
-			<Text className="text-lg font-semibold text-foreground mb-4">
-				Create Account
-			</Text>
-
-			{error && (
-				<View className="mb-4 p-3 bg-destructive/10 rounded-md">
-					<Text className="text-destructive text-sm">{error}</Text>
-				</View>
-			)}
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Name"
-				value={name}
-				onChangeText={setName}
-				placeholderTextColor="#9CA3AF"
-			/>
-
-			<TextInput
-				className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Email"
-				value={email}
-				onChangeText={setEmail}
-				placeholderTextColor="#9CA3AF"
-				keyboardType="email-address"
-				autoCapitalize="none"
-			/>
-
-			<TextInput
-				className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
-				placeholder="Password"
-				value={password}
-				onChangeText={setPassword}
-				placeholderTextColor="#9CA3AF"
-				secureTextEntry
-			/>
-
-			<TouchableOpacity
-				onPress={handleSignUp}
-				disabled={isLoading}
-				className="bg-primary p-4 rounded-md flex-row justify-center items-center"
-			>
-				{isLoading ? (
-					<ActivityIndicator size="small" color="#fff" />
-				) : (
-					<Text className="text-primary-foreground font-medium">Sign Up</Text>
-				)}
-			</TouchableOpacity>
-		</View>
-	);
-}