create-better-t-stack 3.1.8 → 3.2.1

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { createBtsCli } from "./src-DeOVz-ZI.js";
+import { createBtsCli } from "./src-DaKmcEvQ.js";
 
 //#region src/cli.ts
 createBtsCli().run();

package/dist/index.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
-import { builder, createBtsCli, docs, init, router, sponsors } from "./src-DeOVz-ZI.js";
+import { builder, createBtsCli, docs, init, router, sponsors } from "./src-DaKmcEvQ.js";
 
 export { builder, createBtsCli, docs, init, router, sponsors };

package/dist/{src-DeOVz-ZI.js → src-DaKmcEvQ.js}

@@ -627,7 +627,9 @@ async function getAuthChoice(auth, hasDatabase, backend, frontend) {
 		const supportedBetterAuthFrontends = frontend?.some((f) => [
 			"tanstack-router",
 			"tanstack-start",
-			"next"
+			"next",
+			"native-nativewind",
+			"native-unistyles"
 		].includes(f));
 		const hasClerkCompatibleFrontends = frontend?.some((f) => [
 			"react-router",
@@ -1750,9 +1752,11 @@ function validateConvexConstraints(config, providedFlags) {
 		const supportedFrontends = [
 			"tanstack-router",
 			"tanstack-start",
-			"next"
+			"next",
+			"native-nativewind",
+			"native-unistyles"
 		];
-		if (!config.frontend?.some((f) => supportedFrontends.includes(f))) 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'.");
+		if (!config.frontend?.some((f) => supportedFrontends.includes(f))) exitWithError("Better-Auth with Convex backend requires a supported frontend (TanStack Router, TanStack Start, Next.js, or Native).");
 	}
 }
 function validateBackendNoneConstraints(config, providedFlags) {
@@ -2798,7 +2802,7 @@ async function setupFrontendTemplates(projectDir, context) {
 	if (hasNativeWind || hasUnistyles) {
 		const nativeAppDir = path.join(projectDir, "apps/native");
 		await fs.ensureDir(nativeAppDir);
-		const nativeBaseCommonDir = path.join(PKG_ROOT, "templates/frontend/native/native-base");
+		const nativeBaseCommonDir = path.join(PKG_ROOT, "templates/frontend/native/base");
 		if (await fs.pathExists(nativeBaseCommonDir)) await processAndCopyFiles("**/*", nativeBaseCommonDir, nativeAppDir, context);
 		let nativeFrameworkPath = "";
 		if (hasNativeWind) nativeFrameworkPath = "nativewind";
@@ -2934,6 +2938,17 @@ async function setupAuthTemplate(projectDir, context) {
 				if (await fs.pathExists(convexBetterAuthWebSrc)) await processAndCopyFiles("**/*", convexBetterAuthWebSrc, webAppDir, context);
 			}
 		}
+		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;
 	}
 	if ((serverAppDirExists || context.backend === "self") && context.backend !== "convex") {
@@ -2983,7 +2998,7 @@ async function setupAuthTemplate(projectDir, context) {
 		}
 	}
 	if (hasNative && nativeAppDirExists) {
-		const authNativeBaseSrc = path.join(PKG_ROOT, `templates/auth/${authProvider}/native/native-base`);
+		const authNativeBaseSrc = path.join(PKG_ROOT, `templates/auth/${authProvider}/native/base`);
 		if (await fs.pathExists(authNativeBaseSrc)) await processAndCopyFiles("**/*", authNativeBaseSrc, nativeAppDir, context);
 		let nativeFrameworkAuthPath = "";
 		if (hasNativeWind) nativeFrameworkAuthPath = "nativewind";
@@ -4467,11 +4482,20 @@ async function setupAuth(config) {
 			}
 			if (auth === "better-auth") {
 				const convexBackendDir = path.join(projectDir, "packages/backend");
-				if (await fs.pathExists(convexBackendDir)) await addPackageDependency({
-					dependencies: ["better-auth", "@convex-dev/better-auth"],
-					customDependencies: { "better-auth": "1.3.27" },
-					projectDir: convexBackendDir
-				});
+				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) {
 					const hasNextJs = frontend.includes("next");
 					const hasTanStackStart = frontend.includes("tanstack-start");
@@ -4492,6 +4516,20 @@ async function setupAuth(config) {
 						projectDir: clientDir
 					});
 				}
+				const hasNativeWind$1 = frontend.includes("native-nativewind");
+				const hasUnistyles$1 = frontend.includes("native-unistyles");
+				if (nativeDirExists && (hasNativeWind$1 || hasUnistyles$1)) 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");
 			const hasUnistyles = frontend.includes("native-unistyles");
@@ -4636,7 +4674,8 @@ async function setupEnvironmentVariables(config) {
 	const hasNuxt = frontend.includes("nuxt");
 	const hasSvelte = frontend.includes("svelte");
 	const hasSolid = frontend.includes("solid");
-	if (hasReactRouter || hasTanStackRouter || hasTanStackStart || hasNextJs || hasNuxt || hasSolid || hasSvelte) {
+	const hasWebFrontend$1 = hasReactRouter || hasTanStackRouter || hasTanStackStart || hasNextJs || hasNuxt || hasSolid || hasSvelte;
+	if (hasWebFrontend$1) {
 		const clientDir = path.join(projectDir, "apps/web");
 		if (await fs.pathExists(clientDir)) {
 			const baseVar = getClientServerVar(frontend, backend);
@@ -4709,6 +4748,11 @@ async function setupEnvironmentVariables(config) {
 				value: "",
 				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);
 		}
 	}
@@ -4717,12 +4761,23 @@ async function setupEnvironmentVariables(config) {
 			const convexBackendDir = path.join(projectDir, "packages/backend");
 			if (await fs.pathExists(convexBackendDir)) {
 				const envLocalPath = path.join(convexBackendDir, ".env.local");
-				if (!await fs.pathExists(envLocalPath) || !(await fs.readFile(envLocalPath, "utf8")).includes("npx convex env set")) await fs.appendFile(envLocalPath, `# Set Convex environment variables
+				const hasNative = frontend.includes("native-nativewind") || frontend.includes("native-unistyles");
+				const hasWeb = hasWebFrontend$1;
+				if (!await fs.pathExists(envLocalPath) || !(await fs.readFile(envLocalPath, "utf8")).includes("npx convex env set")) {
+					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
-
-`);
-				await addEnvVariablesToFile(envLocalPath, [{
+${hasWeb ? "# npx convex env set SITE_URL http://localhost:3001\n" : ""}
+`;
+					await fs.appendFile(envLocalPath, convexCommands);
+				}
+				const convexBackendVars = [];
+				if (hasNative) convexBackendVars.push({
+					key: "EXPO_PUBLIC_CONVEX_SITE_URL",
+					value: "",
+					condition: true,
+					comment: "Same as CONVEX_URL but ends in .site"
+				});
+				if (hasWeb) convexBackendVars.push({
 					key: hasNextJs ? "NEXT_PUBLIC_CONVEX_SITE_URL" : "VITE_CONVEX_SITE_URL",
 					value: "",
 					condition: true,
@@ -4731,7 +4786,8 @@ async function setupEnvironmentVariables(config) {
 					key: "SITE_URL",
 					value: "http://localhost:3001",
 					condition: true
-				}]);
+				});
+				await addEnvVariablesToFile(envLocalPath, convexBackendVars);
 			}
 		}
 		return;
@@ -6612,9 +6668,9 @@ function getWranglerDeployInstructions(runCmd, webDeploy, serverDeploy, backend)
 	const instructions = [];
 	if (webDeploy === "wrangler") {
 		const deployPath = backend === "self" ? "apps/web" : "apps/web";
-		instructions.push(`${pc.bold("Deploy web to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd ${deployPath} && ${runCmd} run deploy`}`);
+		instructions.push(`${pc.bold("Deploy web to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd ${deployPath} && ${runCmd} deploy`}`);
 	}
-	if (serverDeploy === "wrangler" && backend !== "self") instructions.push(`${pc.bold("Deploy server to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd apps/server && ${runCmd} run deploy`}`);
+	if (serverDeploy === "wrangler" && backend !== "self") instructions.push(`${pc.bold("Deploy server to Cloudflare Workers:")}\n${pc.cyan("•")} Deploy: ${`cd apps/server && ${runCmd} deploy`}`);
 	return instructions.length ? `\n${instructions.join("\n")}` : "";
 }
 function getClerkInstructions() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "3.1.8",
+  "version": "3.2.1",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "type": "module",
   "license": "MIT",

package/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);
+  },
+});

package/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 });

package/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(),
+  ],
+});

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

@@ -0,0 +1,86 @@
+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

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

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

@@ -0,0 +1,127 @@
+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 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 style={styles.container}>
+      <Text style={styles.title}>Sign In</Text>
+
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+        autoCapitalize="none"
+      />
+
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+
+      <TouchableOpacity
+        onPress={handleLogin}
+        disabled={isLoading}
+        style={styles.button}
+      >
+        {isLoading ? (
+          <ActivityIndicator size="small" color="#fff" />
+        ) : (
+          <Text style={styles.buttonText}>Sign In</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,
+  },
+  button: {
+    backgroundColor: theme.colors.primary,
+    padding: 16,
+    borderRadius: 6,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonText: {
+    fontWeight: "500",
+  },
+}));