create-100x-mobile 0.2.0 → 0.2.2

package/dist/commands/new.js

@@ -42,7 +42,7 @@ const emptyState_1 = require("../templates/components/emptyState");
 const useFrameworkReady_1 = require("../templates/hooks/useFrameworkReady");
 async function cmdNew(args) {
     (0, prompts_1.intro)(picocolors_1.default.bold(picocolors_1.default.cyan("create-100x-mobile")));
-    // Step 1: Parse & validate project name
+    // ── Step 1: Parse & validate project name ──────────────
     let projectName = args[0];
     if (!projectName) {
         const nameInput = await (0, prompts_1.text)({
@@ -84,7 +84,7 @@ async function cmdNew(args) {
         }
         await (0, fs_1.removeDir)(projectDir);
     }
-    // Step 2: Create directories
+    // ── Step 2: Create directories ─────────────────────────
     const s = (0, prompts_1.spinner)();
     s.start("Creating project structure");
     const dirs = [
@@ -99,7 +99,7 @@ async function cmdNew(args) {
     for (const dir of dirs) {
         await (0, fs_1.ensureDir)((0, node_path_1.join)(projectDir, dir));
     }
-    // Step 3: Write all template files
+    // ── Step 3: Write all template files ───────────────────
     const files = [
         // Config
         ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName)],
@@ -136,7 +136,7 @@ async function cmdNew(args) {
         await (0, fs_1.writeTextFile)((0, node_path_1.join)(projectDir, filePath), content);
     }
     s.stop("Project files created.");
-    // Step 4: Install dependencies
+    // ── Step 4: Install dependencies ───────────────────────
     prompts_1.log.step("Installing dependencies");
     try {
         await (0, run_1.run)("bun", ["install"], { cwd: projectDir });
@@ -151,16 +151,8 @@ async function cmdNew(args) {
         }
     }
     prompts_1.log.success("Dependencies installed.");
-    // Step 5: Initialize Convex
-    prompts_1.log.step("Setting up Convex");
-    try {
-        await (0, run_1.run)("bunx", ["convex", "dev", "--once"], { cwd: projectDir });
-        prompts_1.log.success("Convex initialized.");
-    }
-    catch {
-        prompts_1.log.warn("Convex initialization failed. Run `bunx convex dev --once` in your project directory.");
-    }
-    // Step 6: Prompt for Clerk keys
+    // ── Step 5: Prompt for Clerk keys ──────────────────────
+    // Moved BEFORE Convex init so we only need a single `convex dev --once` run.
     prompts_1.log.info("");
     prompts_1.log.info(picocolors_1.default.bold("Clerk Authentication Setup"));
     prompts_1.log.info(picocolors_1.default.dim("Get your keys from https://dashboard.clerk.com → Your App → API Keys"));
@@ -172,7 +164,7 @@ async function cmdNew(args) {
     });
     const clerkKeyValue = (0, prompts_1.isCancel)(clerkKey) || !clerkKey ? "" : clerkKey.trim();
     let clerkDomain = "";
-    let clerkSecretKey = "";
+    let jwtCreated = false;
     if (clerkKeyValue) {
         // Try to extract domain from publishable key
         const derivedDomain = (0, clerk_1.extractDomainFromPublishableKey)(clerkKeyValue);
@@ -189,19 +181,32 @@ async function cmdNew(args) {
             clerkDomain =
                 (0, prompts_1.isCancel)(domainInput) || !domainInput ? "" : domainInput.trim();
         }
-        // Ask for secret key to auto-create JWT template
+        // Secret key prompt (optional — only needed to auto-create JWT template)
         prompts_1.log.info("");
         prompts_1.log.info(picocolors_1.default.dim('Provide your Clerk Secret Key to auto-create the "convex" JWT template.'));
-        prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip (you can create it manually later)."));
+        prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip if you already have one."));
         const secretInput = await (0, prompts_1.text)({
             message: "Clerk Secret Key",
             placeholder: "sk_test_...",
             defaultValue: "",
         });
-        clerkSecretKey =
-            (0, prompts_1.isCancel)(secretInput) || !secretInput ? "" : secretInput.trim();
+        const clerkSecretKey = (0, prompts_1.isCancel)(secretInput) || !secretInput ? "" : secretInput.trim();
+        if (clerkSecretKey) {
+            const jwtSpinner = (0, prompts_1.spinner)();
+            jwtSpinner.start('Creating "convex" JWT template in Clerk');
+            const result = await (0, clerk_1.createConvexJwtTemplate)(clerkSecretKey);
+            if (result.success) {
+                jwtSpinner.stop('JWT template "convex" created in Clerk.');
+                jwtCreated = true;
+            }
+            else {
+                jwtSpinner.stop("Could not create JWT template.");
+                prompts_1.log.warn(`Clerk API: ${result.error}`);
+                prompts_1.log.info(picocolors_1.default.dim('You may need to create a JWT template named "convex" in your Clerk dashboard.'));
+            }
+        }
     }
-    // Step 7: Write env vars
+    // ── Step 6: Write Clerk env vars to .env.local ─────────
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
     let envContents = "";
     try {
@@ -219,68 +224,80 @@ async function cmdNew(args) {
     if (envContents) {
         await (0, fs_1.writeTextFile)(envLocalPath, envContents);
     }
-    // Step 8: Set Convex env var for Clerk
-    if (clerkDomain) {
-        prompts_1.log.step("Setting Convex environment variable");
+    // ── Step 7: Initialize Convex (single run) ─────────────
+    // Only runs once. Convex env vars (set in Step 8) are read at runtime,
+    // so no re-deploy is needed after setting them.
+    prompts_1.log.step("Setting up Convex");
+    try {
+        await (0, run_1.run)("bunx", ["convex", "dev", "--once"], { cwd: projectDir });
+        prompts_1.log.success("Convex initialized.");
+    }
+    catch {
+        prompts_1.log.warn("Convex setup needs attention.");
+        prompts_1.log.info(picocolors_1.default.dim("  Run manually: cd " + projectName + " && bunx convex dev --once"));
+    }
+    // ── Step 8: Ensure EXPO_PUBLIC_CONVEX_URL is set ───────
+    // Convex CLI saves the URL as CONVEX_URL, but Expo needs EXPO_PUBLIC_CONVEX_URL.
+    try {
+        let updatedEnv = "";
         try {
-            await (0, run_1.run)("bunx", ["convex", "env", "set", "CLERK_JWT_ISSUER_DOMAIN", clerkDomain], { cwd: projectDir });
-            prompts_1.log.success("Convex environment variable set.");
+            updatedEnv = await (0, fs_2.readTextFile)(envLocalPath);
         }
         catch {
-            prompts_1.log.warn(`Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerkDomain}`);
+            updatedEnv = "";
         }
-    }
-    // Step 8b: Auto-create JWT template if secret key provided
-    let jwtCreated = false;
-    if (clerkSecretKey) {
-        const jwtSpinner = (0, prompts_1.spinner)();
-        jwtSpinner.start('Creating "convex" JWT template in Clerk');
-        const result = await (0, clerk_1.createConvexJwtTemplate)(clerkSecretKey);
-        if (result.success) {
-            jwtSpinner.stop('JWT template "convex" created in Clerk.');
-            jwtCreated = true;
-        }
-        else {
-            jwtSpinner.stop("Could not create JWT template.");
-            prompts_1.log.warn(`Clerk API error: ${result.error}`);
-            prompts_1.log.warn('Create a JWT template named "convex" manually in Clerk dashboard.');
+        if (updatedEnv && !updatedEnv.includes("EXPO_PUBLIC_CONVEX_URL")) {
+            const parsed = (0, dotenv_1.parseDotenv)(updatedEnv);
+            let convexUrl = parsed["CONVEX_URL"] || "";
+            if (!convexUrl) {
+                // Try the convex url command as fallback
+                try {
+                    convexUrl = await (0, run_1.runCapture)("bunx", ["convex", "url"], {
+                        cwd: projectDir,
+                    });
+                }
+                catch {
+                    // Non-critical
+                }
+            }
+            if (convexUrl) {
+                updatedEnv = (0, dotenv_1.upsertDotenvVar)(updatedEnv, "EXPO_PUBLIC_CONVEX_URL", convexUrl);
+                await (0, fs_1.writeTextFile)(envLocalPath, updatedEnv);
+                prompts_1.log.success(`Convex URL configured for Expo.`);
+            }
+            else {
+                prompts_1.log.info(picocolors_1.default.dim("  Note: Add EXPO_PUBLIC_CONVEX_URL to .env.local with your Convex deployment URL."));
+            }
         }
     }
-    // Step 9: Push Convex functions (if Clerk was configured)
-    if (clerkKeyValue && clerkDomain) {
-        prompts_1.log.step("Deploying Convex functions");
+    catch {
+        // Non-critical — user can set manually
+    }
+    // ── Step 9: Set Convex env var for Clerk ───────────────
+    if (clerkDomain) {
+        prompts_1.log.step("Setting Convex environment variable");
         try {
-            await (0, run_1.run)("bunx", ["convex", "dev", "--once"], { cwd: projectDir });
-            prompts_1.log.success("Convex functions deployed.");
+            await (0, run_1.run)("bunx", ["convex", "env", "set", "CLERK_JWT_ISSUER_DOMAIN", clerkDomain], { cwd: projectDir });
+            prompts_1.log.success("Convex environment variable set.");
         }
         catch {
-            prompts_1.log.warn("Run `bunx convex dev --once` in your project directory.");
+            prompts_1.log.info(picocolors_1.default.dim(`  Note: Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerkDomain}`));
         }
     }
-    // Step 10: Success message
+    // ── Step 10: Success message ───────────────────────────
     prompts_1.log.info("");
-    if (clerkKeyValue && clerkDomain && jwtCreated) {
-        // Fully automated — everything is set up
+    if (clerkKeyValue && clerkDomain) {
+        // Clerk is configured — app is ready
         prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Your app is ready!")));
         prompts_1.log.info("");
         prompts_1.log.info("  Next steps:");
         prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
         prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
         prompts_1.log.info("");
-        prompts_1.log.info(picocolors_1.default.dim("Remember to enable Google and Apple OAuth providers in your Clerk dashboard."));
-    }
-    else if (clerkKeyValue && clerkDomain) {
-        // Keys set but JWT template not auto-created
-        prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Almost ready!")));
-        prompts_1.log.info("");
-        prompts_1.log.info("  One more step:");
-        prompts_1.log.info(`  1. Create a JWT template named ${picocolors_1.default.bold('"convex"')} in Clerk dashboard`);
-        prompts_1.log.info(picocolors_1.default.dim("     Dashboard → JWT Templates → New template → Name: convex"));
-        prompts_1.log.info(`  2. Enable Google and Apple OAuth in Clerk dashboard`);
-        prompts_1.log.info("");
-        prompts_1.log.info("  Then start your app:");
-        prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
-        prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
+        if (!jwtCreated) {
+            prompts_1.log.info(picocolors_1.default.dim('  Note: Ensure a JWT template named "convex" exists in your Clerk dashboard.'));
+        }
+        prompts_1.log.info(picocolors_1.default.dim("  Remember to enable Google and Apple OAuth providers in your Clerk dashboard."));
     }
     else {
         // No Clerk keys — manual setup needed
@@ -296,7 +313,6 @@ async function cmdNew(args) {
         prompts_1.log.info(`  4. Set the Convex env var:`);
         prompts_1.log.info(`     ${picocolors_1.default.dim("bunx convex env set CLERK_JWT_ISSUER_DOMAIN <domain>")}`);
         prompts_1.log.info(`  5. Create a JWT template named ${picocolors_1.default.bold('"convex"')} in Clerk dashboard`);
-        prompts_1.log.info(`  6. Deploy Convex: ${picocolors_1.default.dim("bunx convex dev --once")}`);
         prompts_1.log.info("");
         prompts_1.log.info("  Then start your app:");
         prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);

package/dist/lib/run.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.run = run;
+exports.runCapture = runCapture;
 const node_child_process_1 = require("node:child_process");
 async function run(cmd, args, options = {}) {
     await new Promise((resolve, reject) => {
@@ -19,3 +20,21 @@ async function run(cmd, args, options = {}) {
         });
     });
 }
+async function runCapture(cmd, args, options = {}) {
+    return new Promise((resolve, reject) => {
+        const child = (0, node_child_process_1.spawn)(cmd, args, {
+            cwd: options.cwd,
+            env: options.env ?? process.env,
+            stdio: ["ignore", "pipe", "pipe"],
+            shell: process.platform === "win32",
+        });
+        let stdout = "";
+        child.stdout?.on("data", (data) => (stdout += data));
+        child.on("error", reject);
+        child.on("exit", (code) => {
+            if (code === 0)
+                return resolve(stdout.trim());
+            reject(new Error(`${cmd} exited with code ${code}`));
+        });
+    });
+}

package/dist/templates/app/settingsScreen.js

@@ -53,11 +53,11 @@ export default function SettingsScreen() {
       } catch {}
 
       await signOut();
-    } catch (error) {
-      console.error("Sign out error:", error);
-      Alert.alert("Error", "Failed to sign out. Please try again.");
-    } finally {
-      setIsSigningOut(false);
+      // Sign-out succeeded — navigation will happen automatically
+    } catch {
+      // After signOut(), the session is cleared and the app navigates away.
+      // This may cause errors as the component unmounts — that's expected.
+      // Only a real pre-signout failure would leave the user stuck here.
     }
   };
 

package/dist/templates/app/signIn.js

@@ -16,6 +16,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { useOAuth } from "@clerk/clerk-expo";
 import { useRouter } from "expo-router";
 import { SquareCheck as CheckSquare } from "lucide-react-native";
+import Svg, { Path } from "react-native-svg";
 import * as WebBrowser from "expo-web-browser";
 
 WebBrowser.maybeCompleteAuthSession();
@@ -83,7 +84,14 @@ export default function SignInScreen() {
               <ActivityIndicator size={20} color="#1F2937" />
             ) : (
               <>
-                <Text style={styles.googleIcon}>G</Text>
+                <View style={styles.iconWrap}>
+                  <Svg width={20} height={20} viewBox="0 0 24 24">
+                    <Path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+                    <Path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                    <Path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                    <Path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+                  </Svg>
+                </View>
                 <Text style={styles.googleText}>Continue with Google</Text>
               </>
             )}
@@ -103,7 +111,11 @@ export default function SignInScreen() {
               <ActivityIndicator size={20} color="#FFFFFF" />
             ) : (
               <>
-                <Text style={styles.appleIcon}>\u{F8FF}</Text>
+                <View style={styles.iconWrap}>
+                  <Svg width={20} height={20} viewBox="0 0 24 24" fill="#FFFFFF">
+                    <Path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+                  </Svg>
+                </View>
                 <Text style={styles.appleText}>Continue with Apple</Text>
               </>
             )}
@@ -172,12 +184,6 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: "#E5E7EB",
   },
-  googleIcon: {
-    fontSize: 20,
-    fontWeight: "700",
-    color: "#4285F4",
-    marginRight: 12,
-  },
   googleText: {
     fontSize: 16,
     fontWeight: "600",
@@ -186,16 +192,18 @@ const styles = StyleSheet.create({
   appleButton: {
     backgroundColor: "#000000",
   },
-  appleIcon: {
-    fontSize: 20,
-    color: "#FFFFFF",
-    marginRight: 12,
-  },
   appleText: {
     fontSize: 16,
     fontWeight: "600",
     color: "#FFFFFF",
   },
+  iconWrap: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
   terms: {
     fontSize: 13,
     color: "#9CA3AF",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {