feat(cli): add better-auth + convex + native app support (#634)

Author: AmanVarshney01

apps/cli/src/helpers/addons/ruler-setup.ts

@@ -46,16 +46,16 @@ export async function setupRuler(config: ProjectConfig) {
 			crush: { label: "Crush" },
 			zed: { label: "Zed" },
 			qwen: { label: "Qwen" },
-			amazonqcli: {label: "Amazon Q CLI"},
-			augmentcode: {label: "AugmentCode"},
-			firebender: {label: "Firebender"},
-			goose: {label: "Goose"},
-			jules: {label: "Jules"},
-			kiro: {label: "Kiro"},
-			openhands: {label: "Open Hands"},
-			roo: {label: "RooCode"},
-			trae: {label: "Trae AI"},
-			warp: {label: "Warp"},
+			amazonqcli: { label: "Amazon Q CLI" },
+			augmentcode: { label: "AugmentCode" },
+			firebender: { label: "Firebender" },
+			goose: { label: "Goose" },
+			jules: { label: "Jules" },
+			kiro: { label: "Kiro" },
+			openhands: { label: "Open Hands" },
+			roo: { label: "RooCode" },
+			trae: { label: "Trae AI" },
+			warp: { label: "Warp" },
 		} as const;
 
 		const selectedEditors = await autocompleteMultiselect({

apps/cli/src/helpers/core/auth-setup.ts

@@ -51,12 +51,23 @@ export async function setupAuth(config: ProjectConfig) {
 				const convexBackendDir = path.join(projectDir, "packages/backend");
 				const convexBackendDirExists = await fs.pathExists(convexBackendDir);
 
+				const hasNativeForBA =
+					frontend.includes("native-nativewind") ||
+					frontend.includes("native-unistyles");
+
 				if (convexBackendDirExists) {
 					await addPackageDependency({
 						dependencies: ["better-auth", "@convex-dev/better-auth"],
 						customDependencies: { "better-auth": "1.3.27" },
 						projectDir: convexBackendDir,
 					});
+					if (hasNativeForBA) {
+						await addPackageDependency({
+							dependencies: ["@better-auth/expo"],
+							customDependencies: { "@better-auth/expo": "1.3.27" },
+							projectDir: convexBackendDir,
+						});
+					}
 				}
 
 				if (clientDirExists) {
@@ -86,6 +97,23 @@ export async function setupAuth(config: ProjectConfig) {
 						});
 					}
 				}
+
+				const hasNativeWind = frontend.includes("native-nativewind");
+				const hasUnistyles = frontend.includes("native-unistyles");
+				if (nativeDirExists && (hasNativeWind || hasUnistyles)) {
+					await addPackageDependency({
+						dependencies: [
+							"better-auth",
+							"@better-auth/expo",
+							"@convex-dev/better-auth",
+						],
+						customDependencies: {
+							"better-auth": "1.3.27",
+							"@better-auth/expo": "1.3.27",
+						},
+						projectDir: nativeDir,
+					});
+				}
 			}
 
 			const hasNativeWind = frontend.includes("native-nativewind");

apps/cli/src/helpers/core/env-setup.ts

@@ -258,6 +258,14 @@ export async function setupEnvironmentVariables(config: ProjectConfig) {
 					condition: true,
 				});
 			}
+
+			if (backend === "convex" && auth === "better-auth") {
+				nativeVars.push({
+					key: "EXPO_PUBLIC_CONVEX_SITE_URL",
+					value: "https://<YOUR_CONVEX_URL>",
+					condition: true,
+				});
+			}
 			await addEnvVariablesToFile(path.join(nativeDir, ".env"), nativeVars);
 		}
 	}
@@ -268,6 +276,11 @@ export async function setupEnvironmentVariables(config: ProjectConfig) {
 			if (await fs.pathExists(convexBackendDir)) {
 				const envLocalPath = path.join(convexBackendDir, ".env.local");
 
+				const hasNative =
+					frontend.includes("native-nativewind") ||
+					frontend.includes("native-unistyles");
+				const hasWeb = hasWebFrontend;
+
 				if (
 					!(await fs.pathExists(envLocalPath)) ||
 					!(await fs.readFile(envLocalPath, "utf8")).includes(
@@ -276,27 +289,40 @@ export async function setupEnvironmentVariables(config: ProjectConfig) {
 				) {
 					const convexCommands = `# Set Convex environment variables
 # npx convex env set BETTER_AUTH_SECRET=$(openssl rand -base64 32)
-# npx convex env set SITE_URL http://localhost:3001
-
+${hasWeb ? "# npx convex env set SITE_URL http://localhost:3001\n" : ""}
 `;
 					await fs.appendFile(envLocalPath, convexCommands);
 				}
 
-				const convexBackendVars: EnvVariable[] = [
-					{
-						key: hasNextJs
-							? "NEXT_PUBLIC_CONVEX_SITE_URL"
-							: "VITE_CONVEX_SITE_URL",
+				const convexBackendVars: EnvVariable[] = [];
+
+				if (hasNative) {
+					convexBackendVars.push({
+						key: "EXPO_PUBLIC_CONVEX_SITE_URL",
 						value: "",
 						condition: true,
 						comment: "Same as CONVEX_URL but ends in .site",
-					},
-					{
-						key: "SITE_URL",
-						value: "http://localhost:3001",
-						condition: true,
-					},
-				];
+					});
+				}
+
+				if (hasWeb) {
+					convexBackendVars.push(
+						{
+							key: hasNextJs
+								? "NEXT_PUBLIC_CONVEX_SITE_URL"
+								: "VITE_CONVEX_SITE_URL",
+							value: "",
+							condition: true,
+							comment: "Same as CONVEX_URL but ends in .site",
+						},
+						{
+							key: "SITE_URL",
+							value: "http://localhost:3001",
+							condition: true,
+						},
+					);
+				}
+
 				await addEnvVariablesToFile(envLocalPath, convexBackendVars);
 			}
 		}

apps/cli/src/helpers/core/template-manager.ts

@@ -207,7 +207,7 @@ export async function setupFrontendTemplates(
 
 		const nativeBaseCommonDir = path.join(
 			PKG_ROOT,
-			"templates/frontend/native/native-base",
+			"templates/frontend/native/base",
 		);
 		if (await fs.pathExists(nativeBaseCommonDir)) {
 			await processAndCopyFiles(
@@ -513,6 +513,39 @@ export async function setupAuthTemplate(
 				}
 			}
 		}
+
+		if (nativeAppDirExists) {
+			const convexBetterAuthNativeBaseSrc = path.join(
+				PKG_ROOT,
+				"templates/auth/better-auth/convex/native/base",
+			);
+			if (await fs.pathExists(convexBetterAuthNativeBaseSrc)) {
+				await processAndCopyFiles(
+					"**/*",
+					convexBetterAuthNativeBaseSrc,
+					nativeAppDir,
+					context,
+				);
+			}
+
+			let nativeFrameworkPath = "";
+			if (hasNativeWind) nativeFrameworkPath = "nativewind";
+			else if (hasUnistyles) nativeFrameworkPath = "unistyles";
+			if (nativeFrameworkPath) {
+				const convexBetterAuthNativeFrameworkSrc = path.join(
+					PKG_ROOT,
+					`templates/auth/better-auth/convex/native/${nativeFrameworkPath}`,
+				);
+				if (await fs.pathExists(convexBetterAuthNativeFrameworkSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						convexBetterAuthNativeFrameworkSrc,
+						nativeAppDir,
+						context,
+					);
+				}
+			}
+		}
 		return;
 	}
 
@@ -645,7 +678,7 @@ export async function setupAuthTemplate(
 	if (hasNative && nativeAppDirExists) {
 		const authNativeBaseSrc = path.join(
 			PKG_ROOT,
-			`templates/auth/${authProvider}/native/native-base`,
+			`templates/auth/${authProvider}/native/base`,
 		);
 		if (await fs.pathExists(authNativeBaseSrc)) {
 			await processAndCopyFiles(

apps/cli/src/prompts/auth.ts

@@ -12,7 +12,13 @@ export async function getAuthChoice(
 	if (auth !== undefined) return auth;
 	if (backend === "convex") {
 		const supportedBetterAuthFrontends = frontend?.some((f) =>
-			["tanstack-router", "tanstack-start", "next"].includes(f),
+			[
+				"tanstack-router",
+				"tanstack-start",
+				"next",
+				"native-nativewind",
+				"native-unistyles",
+			].includes(f),
 		);
 
 		const hasClerkCompatibleFrontends = frontend?.some((f) =>

apps/cli/src/utils/config-validation.ts

@@ -235,14 +235,20 @@ export function validateConvexConstraints(
 	}
 
 	if (has("auth") && config.auth === "better-auth") {
-		const supportedFrontends = ["tanstack-router", "tanstack-start", "next"];
+		const supportedFrontends = [
+			"tanstack-router",
+			"tanstack-start",
+			"next",
+			"native-nativewind",
+			"native-unistyles",
+		];
 		const hasSupportedFrontend = config.frontend?.some((f) =>
 			supportedFrontends.includes(f),
 		);
 
 		if (!hasSupportedFrontend) {
 			exitWithError(
-				"Better-Auth with Convex backend is only supported with TanStack Router, TanStack Start, or Next.js frontends. Please use '--auth clerk' or '--auth none'.",
+				"Better-Auth with Convex backend requires a supported frontend (TanStack Router, TanStack Start, Next.js, or Native).",
 			);
 		}
 	}

apps/cli/templates/auth/better-auth/convex/backend/convex/auth.ts.hbs

@@ -1,49 +1,70 @@
 import { createClient, type GenericCtx } from "@convex-dev/better-auth";
-{{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 import { convex } from "@convex-dev/better-auth/plugins";
+import { expo } from "@better-auth/expo";
 {{else}}
-import { convex, crossDomain } from "@convex-dev/better-auth/plugins";
+import { convex } from "@convex-dev/better-auth/plugins";
+{{/if}}
+{{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+import { crossDomain } from "@convex-dev/better-auth/plugins";
 {{/if}}
 import { components } from "./_generated/api";
 import { DataModel } from "./_generated/dataModel";
 import { query } from "./_generated/server";
 import { betterAuth } from "better-auth";
+import { v } from "convex/values";
 
+{{#if (or (includes frontend "tanstack-start") (includes frontend "next") (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
 const siteUrl = process.env.SITE_URL!;
+{{/if}}
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+const nativeAppUrl = process.env.NATIVE_APP_URL || "mybettertapp://";
+{{/if}}
 
 export const authComponent = createClient<DataModel>(components.betterAuth);
 
-export const createAuth = (
-    ctx: GenericCtx<DataModel>,
-    { optionsOnly } = { optionsOnly: false },
-) => {
-    return betterAuth({
-        logger: {
-            disabled: optionsOnly,
-        },
-        {{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
-        baseURL: siteUrl,
-        trustedOrigins: [siteUrl],
-        {{else}}
-        trustedOrigins: [siteUrl],
-        {{/if}}
-        database: authComponent.adapter(ctx),
-        emailAndPassword: {
-            enabled: true,
-            requireEmailVerification: false,
-        },
-        plugins: [
-            {{#unless (or (includes frontend "tanstack-start") (includes frontend "next"))}}
-            crossDomain({ siteUrl }),
-            {{/unless}}
-            convex(),
-        ],
-    });
-};
+function createAuth(
+  ctx: GenericCtx<DataModel>,
+  { optionsOnly }: { optionsOnly?: boolean } = { optionsOnly: false }
+) {
+  return betterAuth({
+    logger: {
+      disabled: optionsOnly,
+    },
+    {{#if (and (or (includes frontend "native-nativewind") (includes frontend "native-unistyles")) (or (includes frontend "tanstack-start") (includes frontend "next")))}}
+    baseURL: siteUrl,
+    trustedOrigins: [siteUrl, nativeAppUrl],
+    {{else if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    trustedOrigins: [nativeAppUrl],
+    {{else if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
+    baseURL: siteUrl,
+    trustedOrigins: [siteUrl],
+    {{else}}
+    trustedOrigins: [siteUrl],
+    {{/if}}
+    database: authComponent.adapter(ctx),
+    emailAndPassword: {
+      enabled: true,
+      requireEmailVerification: false,
+    },
+    plugins: [
+      {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+      expo(),
+      {{/if}}
+      {{#if (or (includes frontend "tanstack-router") (includes frontend "react-router") (includes frontend "nuxt") (includes frontend "svelte") (includes frontend "solid"))}}
+      crossDomain({ siteUrl }),
+      {{/if}}
+      convex(),
+    ],
+  });
+}
+
+export { createAuth };
 
 export const getCurrentUser = query({
-    args: {},
-    handler: async (ctx) => {
-        return authComponent.getAuthUser(ctx);
-    },
-});
+  args: {},
+  returns: v.any(),
+  handler: async function (ctx, args) {
+    return authComponent.getAuthUser(ctx);
+  },
+});

apps/cli/templates/auth/better-auth/convex/backend/convex/http.ts.hbs

@@ -3,7 +3,7 @@ import { authComponent, createAuth } from "./auth";
 
 const http = httpRouter();
 
-{{#if (or (includes frontend "tanstack-start") (includes frontend "next"))}}
+{{#if (or (includes frontend "tanstack-start") (includes frontend "next") (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
 authComponent.registerRoutes(http, createAuth);
 {{else}}
 authComponent.registerRoutes(http, createAuth, { cors: true });

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

@@ -0,0 +1,19 @@
+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(),
+  ],
+});