create-better-t-stack 3.1.8 → 3.2.1

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

@@ -0,0 +1,145 @@
+import { authClient } from "@/lib/auth-client";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+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 style={styles.container}>
+      <Text style={styles.title}>Create Account</Text>
+
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <TextInput
+        style={styles.input}
+        placeholder="Name"
+        value={name}
+        onChangeText={setName}
+      />
+
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+        autoCapitalize="none"
+      />
+
+      <TextInput
+        style={styles.inputLast}
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+
+      <TouchableOpacity
+        onPress={handleSignUp}
+        disabled={isLoading}
+        style={styles.button}
+      >
+        {isLoading ? (
+          <ActivityIndicator size="small" color="#fff" />
+        ) : (
+          <Text style={styles.buttonText}>Sign Up</Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    marginTop: 24,
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: theme.colors.typography,
+    marginBottom: 16,
+  },
+  errorContainer: {
+    marginBottom: 16,
+    padding: 12,
+    borderRadius: 6,
+  },
+  errorText: {
+    color: theme.colors.destructive,
+    fontSize: 14,
+  },
+  input: {
+    marginBottom: 12,
+    padding: 16,
+    borderRadius: 6,
+    color: theme.colors.typography,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  inputLast: {
+    marginBottom: 16,
+    padding: 16,
+    borderRadius: 6,
+    color: theme.colors.typography,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  button: {
+    backgroundColor: theme.colors.primary,
+    padding: 16,
+    borderRadius: 6,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonText: {
+    fontWeight: "500",
+  },
+}));

package/templates/auth/better-auth/native/{native-base → base}/lib/auth-client.ts.hbs

@@ -1,13 +1,14 @@
 import { expoClient } from "@better-auth/expo/client";
 import { createAuthClient } from "better-auth/react";
 import * as SecureStore from "expo-secure-store";
+import Constants from "expo-constants";
 
 export const authClient = createAuthClient({
   baseURL: process.env.EXPO_PUBLIC_SERVER_URL,
   plugins: [
     expoClient({
-	  scheme: "mybettertapp",
-      storagePrefix: "{{projectName}}",
+      scheme: Constants.expoConfig?.scheme as string,
+      storagePrefix: Constants.expoConfig?.scheme as string,
       storage: SecureStore,
     }),
   ],

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

@@ -1,4 +1,4 @@
-import { View, Text, ScrollView } from "react-native";
+import { View, Text, ScrollView, TouchableOpacity } from "react-native";
 import { Container } from "@/components/container";
 {{#if (eq api "orpc")}}
 import { useQuery } from "@tanstack/react-query";
@@ -8,18 +8,22 @@ import { orpc } from "@/utils/orpc";
 import { useQuery } from "@tanstack/react-query";
 import { trpc } from "@/utils/trpc";
 {{/if}}
-{{#if (eq backend "convex")}}
-{{#if (eq auth "clerk")}}
+{{#if (and (eq backend "convex") (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}}
+{{else if (and (eq backend "convex") (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 if (eq backend "convex")}}
 import { useQuery } from "convex/react";
 import { api } from "@{{ projectName }}/backend/convex/_generated/api";
 {{/if}}
-{{/if}}
 
 export default function Home() {
   {{#if (eq api "orpc")}}
@@ -28,100 +32,147 @@ export default function Home() {
   {{#if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
-  {{#if (eq backend "convex")}}
-  {{#if (eq auth "clerk")}}
+  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
   const { user } = useUser();
   const healthCheck = useQuery(api.healthCheck.get);
   const privateData = useQuery(api.privateData.get);
-  {{else}}
+  {{else if (and (eq backend "convex") (eq auth "better-auth"))}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  const { isAuthenticated } = useConvexAuth();
+  const user = useQuery(api.auth.getCurrentUser, isAuthenticated ? {} : "skip");
+  {{else if (eq backend "convex")}}
   const healthCheck = useQuery(api.healthCheck.get);
-  {{/if}}
   {{/if}}
 
   return (
     <Container>
-      <ScrollView showsVerticalScrollIndicator={false} className="flex-1">
-        <Text className="font-mono text-foreground text-3xl font-bold mb-4">
-          BETTER T STACK
-        </Text>
-        <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
-          {{#if (eq backend "convex")}}
-          <View className="flex-row items-center gap-3">
-            <View
-              className={`h-3 w-3 rounded-full ${
-                healthCheck ? "bg-green-500" : "bg-orange-500"
-              }`}
-            />
+      <ScrollView className="flex-1">
+        <View className="px-4">
+          <Text className="font-mono text-foreground text-3xl font-bold mb-4">
+            BETTER T STACK
+          </Text>
+
+          {{#unless (and (eq backend "convex") (eq auth "better-auth"))}}
+          <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
+            {{#if (eq backend "convex")}}
+            <View className="flex-row items-center gap-3">
+              <View
+                className={`h-3 w-3 rounded-full ${
+                  healthCheck ? "bg-green-500" : "bg-orange-500"
+                }`}
+              />
+              <View className="flex-1">
+                <Text className="text-sm font-medium text-card-foreground">
+                  Convex
+                </Text>
+                <Text className="text-muted-foreground">
+                  {
+                    healthCheck === undefined
+                      ? "Checking..."
+                      : healthCheck === "OK"
+                      ? "Connected to API"
+                      : "API Disconnected"
+                  }
+                </Text>
+              </View>
+            </View>
+            {{else}}
+            {{#unless (eq api "none")}}
+            <View className="flex-row items-center gap-3">
+              <View
+                className={`h-3 w-3 rounded-full ${
+                  healthCheck.data ? "bg-green-500" : "bg-orange-500"
+                }`}
+              />
             <View className="flex-1">
               <Text className="text-sm font-medium text-card-foreground">
-                Convex
+                {{#if (eq api "orpc")}}ORPC{{else}}TRPC{{/if}}
               </Text>
               <Text className="text-xs text-muted-foreground">
-                {healthCheck === undefined
+                {healthCheck.isLoading
                   ? "Checking connection..."
-                  : healthCheck === "OK"
-                    ? "All systems operational"
-                    : "Service unavailable"}
+                  : healthCheck.data
+                  ? "All systems operational"
+                  : "Service unavailable"}
               </Text>
             </View>
+            </View>
+            {{/unless}}
+            {{/if}}
           </View>
-          {{else}}
-            {{#unless (eq api "none")}}
-            <View className="flex-row items-center gap-3">
+          {{/unless}}
+
+          {{#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 className="mb-6 p-4 bg-card rounded-lg border border-border">
+              <View className="flex-row justify-between items-center mb-2">
+                <Text className="text-foreground text-base">
+                  Welcome,{" "}
+                  <Text className="font-medium">{user.name}</Text>
+                </Text>
+              </View>
+              <Text className="text-muted-foreground text-sm mb-4">
+                {user.email}
+              </Text>
+              <TouchableOpacity
+                className="bg-destructive py-2 px-4 rounded-md self-start"
+                onPress={() => {
+                  authClient.signOut();
+                }}
+              >
+                <Text className="text-white font-medium">Sign Out</Text>
+              </TouchableOpacity>
+            </View>
+          ) : null}
+          <View className="mb-6 rounded-lg border border-border p-4">
+            <Text className="mb-3 font-medium text-foreground">
+              API Status
+            </Text>
+            <View className="flex-row items-center gap-2">
               <View
                 className={`h-3 w-3 rounded-full ${
-                    healthCheck.data ? "bg-green-500" : "bg-orange-500"
+                  healthCheck ? "bg-green-500" : "bg-red-500"
                 }`}
               />
-              <View className="flex-1">
-                <Text className="text-sm font-medium text-card-foreground">
-                  {{#if (eq api "orpc")}}
-                  ORPC
-                  {{/if}}
-                  {{#if (eq api "trpc")}}
-                  TRPC
-                  {{/if}}
-                </Text>
-                <Text className="text-xs text-muted-foreground">
-                  {{#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>
+              <Text className="text-muted-foreground">
+                {
+                  healthCheck === undefined
+                    ? "Checking..."
+                    : healthCheck === "OK"
+                    ? "Connected to API"
+                    : "API Disconnected"
+                }
+              </Text>
             </View>
-            {{/unless}}
+          </View>
+          {!user && (
+            <>
+              <SignIn />
+              <SignUp />
+            </>
+          )}
           {{/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>
   );
-}
+}

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

@@ -2,7 +2,13 @@
 import "@/polyfills";
 {{/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";
@@ -98,6 +104,21 @@ export default function RootLayout() {
         </ThemeProvider>
       </ConvexProviderWithClerk>
     </ClerkProvider>
+    {{else if (eq auth "better-auth")}}
+    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
+      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+        <GestureHandlerRootView style=\{{ flex: 1 }}>
+          <Stack>
+            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+            <Stack.Screen
+              name="modal"
+              options=\{{ title: "Modal", presentation: "modal" }}
+            />
+          </Stack>
+        </GestureHandlerRootView>
+      </ThemeProvider>
+    </ConvexBetterAuthProvider>
     {{else}}
     <ConvexProvider client={convex}>
       <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>