create-100x-mobile 0.4.11 → 0.5.0

package/dist/templates/cloudflare/workerMigration.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workerMigrationTemplate = workerMigrationTemplate;
+function workerMigrationTemplate() {
+    return `CREATE TABLE IF NOT EXISTS uploads (
+  id TEXT PRIMARY KEY,
+  object_key TEXT NOT NULL UNIQUE,
+  owner_id TEXT NOT NULL,
+  file_name TEXT NOT NULL,
+  content_type TEXT NOT NULL,
+  size INTEGER NOT NULL,
+  created_at TEXT NOT NULL
+);
+
+CREATE INDEX IF NOT EXISTS uploads_owner_id_created_at_idx
+ON uploads (owner_id, created_at DESC);
+`;
+}

package/dist/templates/cloudflare/workerTsconfig.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.workerTsconfigTemplate = workerTsconfigTemplate;
+function workerTsconfigTemplate() {
+    const config = {
+        compilerOptions: {
+            target: "ES2022",
+            module: "ESNext",
+            moduleResolution: "Bundler",
+            lib: ["ES2022"],
+            types: ["@cloudflare/workers-types", "node"],
+            strict: true,
+            noEmit: true,
+            allowImportingTsExtensions: true,
+            skipLibCheck: true,
+        },
+        include: ["src/**/*.ts", "../alchemy.run.ts"],
+    };
+    return JSON.stringify(config, null, 2) + "\n";
+}

package/dist/templates/config/appJson.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.appJsonTemplate = appJsonTemplate;
-function appJsonTemplate(appName, backend) {
-    const plugins = backend === "convex"
-        ? ["expo-router", "expo-font", "expo-web-browser", "expo-secure-store"]
+function appJsonTemplate(appName, backend, instantAuthMode = "clerk") {
+    const plugins = backend === "instantdb" &&
+        (instantAuthMode === "magic-code" ||
+            instantAuthMode === "magic-code-cloudflare")
+        ? ["expo-router", "expo-font"]
         : ["expo-router", "expo-font", "expo-web-browser", "expo-secure-store"];
     const config = {
         expo: {

package/dist/templates/config/envExample.js

@@ -1,8 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.envExampleTemplate = envExampleTemplate;
-function envExampleTemplate(backend) {
+function envExampleTemplate(backend, instantAuthMode = "clerk") {
     if (backend === "instantdb") {
+        if (instantAuthMode === "magic-code-cloudflare") {
+            return `# InstantDB
+EXPO_PUBLIC_INSTANT_APP_ID=
+
+# Cloudflare Worker storage API
+# Set this after running: bun run cloudflare:deploy
+EXPO_PUBLIC_STORAGE_WORKER_URL=
+
+# Alchemy reads this while deploying Cloudflare storage.
+# INSTANT_ADMIN_TOKEN stays server-side and is bound only to the Worker.
+# You can also use EXPO_PUBLIC_INSTANT_APP_ID as the app id for local development.
+INSTANT_APP_ID=
+INSTANT_ADMIN_TOKEN=
+
+# Comma-separated origins allowed by the storage Worker for web builds.
+# Native mobile requests do not use browser CORS, but web uploads do.
+ALLOWED_ORIGINS=http://localhost:3000,http://localhost:8080,http://localhost:8081,http://localhost:19006
+
+# Storage Worker policy. Values are read by Alchemy and bound to the Worker.
+MAX_UPLOAD_BYTES=26214400
+USER_STORAGE_LIMIT_BYTES=524288000
+DAILY_UPLOAD_LIMIT=100
+ALLOWED_CONTENT_TYPES=image/jpeg,image/png,image/webp,application/pdf,text/plain
+`;
+        }
+        if (instantAuthMode === "magic-code") {
+            return `# InstantDB
+EXPO_PUBLIC_INSTANT_APP_ID=
+`;
+        }
         return `# InstantDB
 EXPO_PUBLIC_INSTANT_APP_ID=
 EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME=clerk

package/dist/templates/config/packageJson.js

@@ -1,19 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.packageJsonTemplate = packageJsonTemplate;
-function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex") {
+function isCloudflareInstantAuthMode(instantAuthMode) {
+    return instantAuthMode === "magic-code-cloudflare";
+}
+function isMagicCodeInstantAuthMode(instantAuthMode) {
+    return (instantAuthMode === "magic-code" ||
+        instantAuthMode === "magic-code-cloudflare");
+}
+function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex", instantAuthMode = "clerk") {
     const backendDependencies = backend === "instantdb"
-        ? {
-            "@clerk/clerk-expo": "^2.14.24",
-            "@instantdb/react-native": "^0.20.0",
-            "@react-native-async-storage/async-storage": "^2.2.0",
-            "@react-native-community/netinfo": "^11.4.1",
-            "react-native-get-random-values": "^1.11.0",
-        }
+        ? isMagicCodeInstantAuthMode(instantAuthMode)
+            ? {
+                ...(isCloudflareInstantAuthMode(instantAuthMode)
+                    ? { "@instantdb/admin": "^1.0.15" }
+                    : {}),
+                "@instantdb/react-native": "^0.20.0",
+                "@react-native-async-storage/async-storage": "^2.2.0",
+                "@react-native-community/netinfo": "^11.4.1",
+                "react-native-get-random-values": "^1.11.0",
+            }
+            : {
+                "@clerk/clerk-expo": "^2.14.24",
+                "@instantdb/react-native": "^0.20.0",
+                "@react-native-async-storage/async-storage": "^2.2.0",
+                "@react-native-community/netinfo": "^11.4.1",
+                "react-native-get-random-values": "^1.11.0",
+            }
         : {
             "@clerk/clerk-expo": "^2.14.24",
             convex: "^1.26.1",
         };
+    const cloudflareScripts = isCloudflareInstantAuthMode(instantAuthMode)
+        ? {
+            "cloudflare:configure": "alchemy configure",
+            "cloudflare:login": "alchemy login",
+            "cloudflare:dev": "alchemy dev",
+            "cloudflare:deploy": "alchemy deploy",
+            "cloudflare:destroy": "alchemy destroy",
+            "typecheck:worker": "tsc --noEmit -p worker/tsconfig.json",
+        }
+        : {};
+    const cloudflareDevDependencies = isCloudflareInstantAuthMode(instantAuthMode)
+        ? {
+            "@cloudflare/workers-types": "^4.20260424.1",
+            "@types/node": "^22.0.0",
+            alchemy: "^0.93.0",
+            wrangler: "^4.85.0",
+        }
+        : {};
     const pkg = {
         name: appName,
         main: "expo-router/entry",
@@ -24,6 +59,7 @@ function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex"
             "build:web": "expo export --platform web",
             lint: "expo lint",
             format: "prettier --write .",
+            ...cloudflareScripts,
         },
         dependencies: {
             "@react-navigation/bottom-tabs": "^7.3.10",
@@ -39,6 +75,7 @@ function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex"
             "eslint-config-expo": "~10.0.0",
             prettier: "^3.4.2",
             typescript: "~5.9.2",
+            ...cloudflareDevDependencies,
         },
     };
     return JSON.stringify(pkg, null, 2) + "\n";

package/dist/templates/config/readme.js

@@ -1,8 +1,156 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readmeTemplate = readmeTemplate;
-function readmeTemplate(projectName, backend) {
+function readmeTemplate(projectName, backend, instantAuthMode = "clerk") {
     if (backend === "instantdb") {
+        if (instantAuthMode === "magic-code-cloudflare") {
+            return `# ${projectName}
+
+A mobile app built with **Expo**, **InstantDB magic code auth**, and **Cloudflare storage managed by Alchemy**.
+
+## Tech Stack
+
+- **[Expo](https://expo.dev)** — React Native framework
+- **[InstantDB](https://instantdb.com)** — Real-time backend, auth, and sync
+- **[Cloudflare Workers](https://developers.cloudflare.com/workers/)** — Storage API
+- **[Cloudflare R2](https://developers.cloudflare.com/r2/)** — Object storage
+- **[Cloudflare D1](https://developers.cloudflare.com/d1/)** — Upload metadata database
+- **[Alchemy](https://alchemy.run)** — TypeScript infrastructure for Cloudflare resources
+- **[Expo Router](https://docs.expo.dev/router/introduction/)** — File-based navigation
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+bun install
+
+# Add your Instant app id
+cp .env.example .env.local
+
+# Start Expo
+bunx expo start
+\`\`\`
+
+Set this in \`.env.local\`:
+- \`EXPO_PUBLIC_INSTANT_APP_ID\`
+- \`EXPO_PUBLIC_STORAGE_WORKER_URL\` after Cloudflare deploy
+- \`INSTANT_APP_ID\` for Alchemy Cloudflare deploys; this can match \`EXPO_PUBLIC_INSTANT_APP_ID\`
+- \`INSTANT_ADMIN_TOKEN\` for the Worker-only InstantDB metadata sync
+- \`ALLOWED_ORIGINS\` with your production web origins before deploy
+- \`MAX_UPLOAD_BYTES\`, \`USER_STORAGE_LIMIT_BYTES\`, \`DAILY_UPLOAD_LIMIT\`, and \`ALLOWED_CONTENT_TYPES\` for Worker policy
+
+You can create an Instant app id via:
+
+\`\`\`bash
+npx instant-cli init-without-files --title ${projectName}
+\`\`\`
+
+## Cloudflare Storage
+
+This template uses Cloudflare Workers, R2, and D1 only. It does not use Durable Objects, Queues, Workflows, Cron Triggers, or other paid-plan Workers features.
+
+\`\`\`bash
+bun run cloudflare:configure
+bun run cloudflare:login
+bun run cloudflare:deploy
+\`\`\`
+
+After deploy, copy the printed \`storageWorkerUrl\` into \`.env.local\` as \`EXPO_PUBLIC_STORAGE_WORKER_URL\`.
+
+The storage flow is:
+1. App sends the InstantDB refresh token to the Cloudflare Worker as a Bearer token.
+2. Worker verifies the token with \`@instantdb/admin\`.
+3. Worker derives the object owner from the verified InstantDB user.
+4. Worker stores the object in R2.
+5. Worker records metadata in D1.
+6. Worker syncs the canonical metadata to InstantDB with the admin SDK.
+7. App reads the realtime metadata from InstantDB.
+
+Production hardening included in the starter:
+- InstantDB token verification for upload, read, download, and delete routes
+- Worker-owned InstantDB metadata writes using \`INSTANT_ADMIN_TOKEN\`
+- Owner checks before reading, downloading, or deleting stored objects
+- Configurable CORS allowlist through \`ALLOWED_ORIGINS\`
+- Configurable content-type allowlist
+- Streaming upload size enforcement
+- Per-user storage quota and daily upload limit backed by D1 metadata
+- Private Worker-served downloads; the R2 bucket is not exposed publicly
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| \`bun run dev\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format code with Prettier |
+| \`bun run cloudflare:configure\` | Configure Alchemy Cloudflare credentials |
+| \`bun run cloudflare:login\` | Login to Cloudflare through Alchemy |
+| \`bun run cloudflare:dev\` | Run the Cloudflare Worker locally |
+| \`bun run cloudflare:deploy\` | Deploy Worker, R2, and D1 with Alchemy |
+| \`bun run typecheck:worker\` | Type-check the Worker template |
+
+## Learn More
+
+- [Expo Docs](https://docs.expo.dev)
+- [InstantDB Docs](https://instantdb.com/docs)
+- [Magic Code Auth](https://instantdb.com/docs/auth/magic-codes)
+- [Alchemy Docs](https://alchemy.run/getting-started)
+- [Cloudflare Workers Docs](https://developers.cloudflare.com/workers/)
+`;
+        }
+        if (instantAuthMode === "magic-code") {
+            return `# ${projectName}
+
+A mobile app built with **Expo**, **InstantDB**, and **magic code auth**.
+
+## Tech Stack
+
+- **[Expo](https://expo.dev)** — React Native framework
+- **[InstantDB](https://instantdb.com)** — Real-time backend, auth, and sync
+- **[Expo Router](https://docs.expo.dev/router/introduction/)** — File-based navigation
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+bun install
+
+# Add your Instant app id
+cp .env.example .env.local
+
+# Start Expo
+bunx expo start
+\`\`\`
+
+Set this in \`.env.local\`:
+- \`EXPO_PUBLIC_INSTANT_APP_ID\`
+
+You can create an Instant app id via:
+
+\`\`\`bash
+npx instant-cli init-without-files --title ${projectName}
+\`\`\`
+
+InstantDB magic code auth setup:
+1. Enter your email in the sign-in screen.
+2. Instant sends a login code to that address.
+3. Paste the code to sign in.
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| \`bun run dev\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format code with Prettier |
+
+## Learn More
+
+- [Expo Docs](https://docs.expo.dev)
+- [InstantDB Docs](https://instantdb.com/docs)
+- [Magic Code Auth](https://instantdb.com/docs/auth/magic-codes)
+`;
+        }
         return `# ${projectName}
 
 A mobile app built with **Expo**, **InstantDB**, and **Clerk**.

package/dist/templates/config/tsconfig.js

@@ -17,6 +17,7 @@ function tsconfigTemplate() {
             ".expo/types/**/*.ts",
             "expo-env.d.ts",
         ],
+        exclude: ["alchemy.run.ts", "worker"],
     };
     return JSON.stringify(config, null, 2) + "\n";
 }

package/dist/templates/instant/magic/authLayout.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.magicAuthLayoutTemplate = magicAuthLayoutTemplate;
+function magicAuthLayoutTemplate() {
+    return `import { Redirect, Stack } from "expo-router";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { instantDb } from "@/lib/instant";
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <View style={styles.setupCard}>
+        <Text style={styles.setupTitle}>Setup Required</Text>
+        <Text style={styles.setupText}>
+          Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+        </Text>
+        <Text style={styles.setupStep}>
+          You can create an app id with:\n
+          npx instant-cli init-without-files --title my-app
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function AuthenticatedAuthLayout({
+  db,
+}: {
+  db: NonNullable<typeof instantDb>;
+}) {
+  const { isLoading, user, error } = db.useAuth();
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4B5563" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.setupContainer}>
+        <View style={styles.setupCard}>
+          <Text style={styles.setupTitle}>Authentication Error</Text>
+          <Text style={styles.setupText}>{error.message}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (user) {
+    return <Redirect href="/" />;
+  }
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="sign-in" />
+    </Stack>
+  );
+}
+
+export default function AuthLayout() {
+  if (!instantDb) {
+    return <SetupRequired />;
+  }
+
+  return <AuthenticatedAuthLayout db={instantDb} />;
+}
+
+const styles = StyleSheet.create({
+  setupContainer: {
+    flex: 1,
+    backgroundColor: "#f5f5f5",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  setupCard: {
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 24,
+    maxWidth: 420,
+    width: "100%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#333",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 12,
+    lineHeight: 22,
+    textAlign: "center",
+  },
+  setupStep: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#f8f9fa",
+    borderRadius: 8,
+    lineHeight: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#FFFFFF",
+  },
+});
+`;
+}

package/dist/templates/instant/magic/rootLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.magicRootLayoutTemplate = magicRootLayoutTemplate;
+function magicRootLayoutTemplate() {
+    return `import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { useFrameworkReady } from "@/hooks/useFrameworkReady";
+
+export default function RootLayout() {
+  useFrameworkReady();
+
+  return (
+    <>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+    </>
+  );
+}
+`;
+}