create-better-t-stack 3.1.7 → 3.1.8-canary.932e5243

package/templates/auth/better-auth/web/react/next/src/app/dashboard/page.tsx.hbs

@@ -1,13 +1,24 @@
 import { redirect } from "next/navigation";
 import Dashboard from "./dashboard";
 import { headers } from "next/headers";
+{{#if (eq backend "self")}}
 import { auth } from "@{{projectName}}/auth";
+{{/if}}
 import { authClient } from "@/lib/auth-client";
 
 export default async function DashboardPage() {
+	{{#if (eq backend "self")}}
 	const session = await auth.api.getSession({
 		headers: await headers(),
 	});
+	{{else}}
+	const session = await authClient.getSession({
+		fetchOptions: {
+			headers: await headers(),
+			throw: true
+		}
+	});
+	{{/if}}
 
 	if (!session?.user) {
 		redirect("/login");

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";
@@ -16,112 +16,163 @@ 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}}
 
 export default function Home() {
-  {{#if (eq api "orpc")}}
-  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-  {{/if}}
-  {{#if (eq api "trpc")}}
-  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}}
-  const healthCheck = useQuery(api.healthCheck.get);
-  {{/if}}
-  {{/if}}
+{{#if (eq api "orpc")}}
+const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+{{/if}}
+{{#if (eq api "trpc")}}
+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}}
 
-  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"
-              }`}
-            />
-            <View className="flex-1">
-              <Text className="text-sm font-medium text-card-foreground">
-                Convex
-              </Text>
-              <Text className="text-xs text-muted-foreground">
-                {healthCheck === undefined
-                  ? "Checking connection..."
-                  : healthCheck === "OK"
-                    ? "All systems operational"
-                    : "Service unavailable"}
-              </Text>
-            </View>
+return (
+<Container>
+  <ScrollView className="flex-1">
+    <View className="px-4">
+      <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")}}
+        {{#unless (eq auth "better-auth")}}
+        <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-xs text-muted-foreground">
+              {healthCheck === undefined
+              ? "Checking connection..."
+              : healthCheck === "OK"
+              ? "All systems operational"
+              : "Service unavailable"}
+            </Text>
+          </View>
+        </View>
+        {{/unless}}
+        {{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">
+              {{#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>
-          {{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">
-                  {{#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>
-            </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>
+        {{/unless}}
         {{/if}}
-      </ScrollView>
-    </Container>
-  );
-}
+      </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 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 ? "bg-green-500" : "bg-red-500" }`} />
+          <Text className="text-muted-foreground">
+            {healthCheck === undefined
+            ? "Checking..."
+            : healthCheck === "OK"
+            ? "Connected to API"
+            : "API Disconnected"}
+          </Text>
+        </View>
+      </View>
+      {!user && (
+      <>
+        <SignIn />
+        <SignUp />
+      </>
+      )}
+      {{/if}}
+    </View>
+  </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}>

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

@@ -1,4 +1,4 @@
-import { ScrollView, Text, View } from "react-native";
+import { ScrollView, Text, View, TouchableOpacity } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { Container } from "@/components/container";
 
@@ -11,33 +11,47 @@ 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}}
-import { useQuery } from "convex/react";
-import { api } from "@{{ projectName }}/backend/convex/_generated/api";
-{{/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}}
+    {{#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}}
 
 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}}
-  const healthCheck = useQuery(api.healthCheck.get);
-  {{/if}}
+    {{#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}}
 
   return (
@@ -54,86 +68,125 @@ export default function Home() {
               <Text style={styles.statusBadgeText}>LIVE</Text>
             </View>
           </View>
-
           {{#if (eq backend "convex")}}
-          <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 (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}}
           {{else}}
             {{#unless (eq api "none")}}
-            <View style={styles.statusRow}>
+              <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.statusDot,
-                  healthCheck.data
+                  healthCheck === "OK"
                     ? 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}>
-                  {{#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 style={styles.apiStatusText}>
+                {healthCheck === undefined
+                  ? "Checking..."
+                  : healthCheck === "OK"
+                  ? "Connected to API"
+                  : "API Disconnected"}
+              </Text>
             </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>
+          </View>
+          {!user && (
+            <>
+              <SignIn />
+              <SignUp />
+            </>
+          )}
         {{/if}}
       </ScrollView>
     </Container>
@@ -220,5 +273,62 @@ 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,
+  },
+}));