create-100x-mobile 0.4.6 → 0.4.7

package/dist/cli.js

@@ -21,6 +21,7 @@ Options:
   --clerk-pk <key>        Pre-fill Clerk publishable key
   --clerk-domain <domain> Pre-fill Clerk issuer domain
   --instant-app-id <id>   Pre-fill InstantDB app id
+  --instant-clerk-client-name <name> Client name configured in Instant Auth tab
 
 Scaffolds a mobile app with Expo + Convex/Clerk or Expo + InstantDB.
 `);

package/dist/commands/new/args.js

@@ -26,6 +26,7 @@ function parseNewCommandArgs(args) {
         clerkPublishableKey: null,
         clerkDomain: null,
         instantAppId: null,
+        instantClerkClientName: null,
     };
     let projectName = null;
     for (let i = 0; i < args.length; i++) {
@@ -85,6 +86,13 @@ function parseNewCommandArgs(args) {
             i = nextIndex;
             continue;
         }
+        if (arg === "--instant-clerk-client-name" ||
+            arg.startsWith("--instant-clerk-client-name=")) {
+            const { value, nextIndex } = getInlineOrNextValue(arg, args, i);
+            options.instantClerkClientName = value;
+            i = nextIndex;
+            continue;
+        }
         throw new Error(`Unknown flag: ${arg}`);
     }
     if (!projectName && !options.interactive) {

package/dist/commands/new/scaffold.js

@@ -15,7 +15,7 @@ async function createProjectDirectories(projectDir, backend) {
     ];
     const backendDirs = backend === "convex"
         ? ["app/(auth)", "app/providers", "components", "convex"]
-        : ["lib"];
+        : ["app/(auth)", "app/providers", "lib"];
     const dirs = [...commonDirs, ...backendDirs];
     for (const dir of dirs) {
         await (0, fs_1.ensureDir)((0, node_path_1.join)(projectDir, dir));

package/dist/commands/new/steps.js

@@ -199,7 +199,13 @@ async function resolveExpoDependencies(projectDir, backend) {
     ];
     const backendExpoPackages = backend === "convex"
         ? ["expo-auth-session", "expo-secure-store", "expo-web-browser"]
-        : ["@react-native-async-storage/async-storage", "@react-native-community/netinfo"];
+        : [
+            "expo-auth-session",
+            "expo-secure-store",
+            "expo-web-browser",
+            "@react-native-async-storage/async-storage",
+            "@react-native-community/netinfo",
+        ];
     const expoPackages = [...commonExpoPackages, ...backendExpoPackages];
     try {
         await (0, run_1.run)("npx", ["expo", "install", ...expoPackages], { cwd: projectDir });
@@ -274,21 +280,46 @@ async function promptClerkSetup(options) {
 }
 async function promptInstantSetup(options) {
     let appId = options.instantAppId?.trim() ?? "";
-    if (!appId && options.interactive) {
+    let clerkPublishableKey = options.clerkPublishableKey?.trim() ?? "";
+    let clerkClientName = options.instantClerkClientName?.trim() || "clerk";
+    if (options.interactive) {
         prompts_1.log.info("");
         prompts_1.log.info(picocolors_1.default.bold("InstantDB Setup"));
         prompts_1.log.info(picocolors_1.default.dim("Create an app id with: npx instant-cli init-without-files --title my-app"));
-        prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip and configure later."));
-        const appIdInput = await (0, prompts_1.text)({
-            message: "InstantDB App ID",
-            placeholder: "your-instant-app-id",
-            defaultValue: "",
+        if (!appId) {
+            prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip and configure later."));
+            const appIdInput = await (0, prompts_1.text)({
+                message: "InstantDB App ID",
+                placeholder: "your-instant-app-id",
+                defaultValue: "",
+            });
+            if (!(0, prompts_1.isCancel)(appIdInput) && appIdInput) {
+                appId = appIdInput.trim();
+            }
+        }
+        prompts_1.log.info("");
+        prompts_1.log.info(picocolors_1.default.bold("Clerk Setup for InstantDB"));
+        prompts_1.log.info(picocolors_1.default.dim("In Clerk Sessions → Customize session token, include `email` and `email_verified` claims."));
+        if (!clerkPublishableKey) {
+            const clerkKeyInput = await (0, prompts_1.text)({
+                message: "Clerk Publishable Key",
+                placeholder: "pk_test_...",
+                defaultValue: "",
+            });
+            if (!(0, prompts_1.isCancel)(clerkKeyInput) && clerkKeyInput) {
+                clerkPublishableKey = clerkKeyInput.trim();
+            }
+        }
+        const clientNameInput = await (0, prompts_1.text)({
+            message: "Instant Clerk Client Name",
+            placeholder: "clerk",
+            defaultValue: clerkClientName,
         });
-        if (!(0, prompts_1.isCancel)(appIdInput) && appIdInput) {
-            appId = appIdInput.trim();
+        if (!(0, prompts_1.isCancel)(clientNameInput) && clientNameInput?.trim()) {
+            clerkClientName = clientNameInput.trim();
         }
     }
-    return { appId };
+    return { appId, clerkPublishableKey, clerkClientName };
 }
 async function writeAuthEnvironment(projectDir, clerk) {
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
@@ -316,7 +347,7 @@ async function writeAuthEnvironment(projectDir, clerk) {
     }
 }
 async function writeInstantEnvironment(projectDir, instant) {
-    if (!instant.appId) {
+    if (!instant.appId && !instant.clerkPublishableKey && !instant.clerkClientName) {
         return;
     }
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
@@ -329,7 +360,13 @@ async function writeInstantEnvironment(projectDir, instant) {
             prompts_1.log.warn(`Could not read .env.local: ${toErrorMessage(error)}`);
         }
     }
-    envContents = (0, dotenv_1.upsertDotenvVar)(envContents, "EXPO_PUBLIC_INSTANT_APP_ID", instant.appId);
+    if (instant.appId) {
+        envContents = (0, dotenv_1.upsertDotenvVar)(envContents, "EXPO_PUBLIC_INSTANT_APP_ID", instant.appId);
+    }
+    if (instant.clerkPublishableKey) {
+        envContents = (0, dotenv_1.upsertDotenvVar)(envContents, "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY", instant.clerkPublishableKey);
+    }
+    envContents = (0, dotenv_1.upsertDotenvVar)(envContents, "EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME", instant.clerkClientName || "clerk");
     await (0, fs_1.writeTextFile)(envLocalPath, envContents);
 }
 async function initializeConvex(projectDir) {
@@ -418,6 +455,14 @@ async function runHealthChecks(projectDir, backend, clerkPublishableKey) {
     if (!envExists) {
         if (backend === "instantdb") {
             checks.push({ label: "EXPO_PUBLIC_INSTANT_APP_ID is set", ok: false });
+            checks.push({
+                label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+                ok: false,
+            });
+            checks.push({
+                label: "EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME is set",
+                ok: false,
+            });
         }
         else {
             checks.push({ label: "EXPO_PUBLIC_CONVEX_URL is set", ok: false });
@@ -442,6 +487,14 @@ async function runHealthChecks(projectDir, backend, clerkPublishableKey) {
             label: "EXPO_PUBLIC_INSTANT_APP_ID is set",
             ok: envContent.includes("EXPO_PUBLIC_INSTANT_APP_ID"),
         });
+        checks.push({
+            label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+            ok: envContent.includes("EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY"),
+        });
+        checks.push({
+            label: "EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME is set",
+            ok: envContent.includes("EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME"),
+        });
     }
     else {
         checks.push({

package/dist/commands/new.js

@@ -38,6 +38,7 @@ const tabsLayout_1 = require("../templates/app/tabsLayout");
 const todosScreen_1 = require("../templates/app/todosScreen");
 // Instant templates
 const instantLib_1 = require("../templates/instant/instantLib");
+const authProvider_2 = require("../templates/instant/authProvider");
 const rootLayout_2 = require("../templates/instant/rootLayout");
 const settingsScreen_2 = require("../templates/instant/settingsScreen");
 const tabsLayout_2 = require("../templates/instant/tabsLayout");
@@ -54,7 +55,7 @@ function buildTemplateFiles(projectName, expoVersion, backend) {
         const files = [
             // Config
             ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName, expoVersion, backend)],
-            ["app.json", (0, appJson_1.appJsonTemplate)(projectName)],
+            ["app.json", (0, appJson_1.appJsonTemplate)(projectName, backend)],
             ["tsconfig.json", (0, tsconfig_1.tsconfigTemplate)()],
             [".gitignore", (0, gitignore_1.gitignoreTemplate)()],
             [".env.example", (0, envExample_1.envExampleTemplate)(backend)],
@@ -65,6 +66,9 @@ function buildTemplateFiles(projectName, expoVersion, backend) {
             // Instant app
             ["app/_layout.tsx", (0, rootLayout_2.instantRootLayoutTemplate)()],
             ["app/+not-found.tsx", (0, notFound_1.notFoundTemplate)()],
+            ["app/providers/AuthProvider.tsx", (0, authProvider_2.instantAuthProviderTemplate)()],
+            ["app/(auth)/_layout.tsx", (0, authLayout_1.authLayoutTemplate)()],
+            ["app/(auth)/sign-in.tsx", (0, signIn_1.signInTemplate)()],
             ["app/(tabs)/_layout.tsx", (0, tabsLayout_2.instantTabsLayoutTemplate)()],
             ["app/(tabs)/index.tsx", (0, todosScreen_2.instantTodosScreenTemplate)()],
             ["app/(tabs)/settings.tsx", (0, settingsScreen_2.instantSettingsScreenTemplate)()],
@@ -77,7 +81,7 @@ function buildTemplateFiles(projectName, expoVersion, backend) {
     const files = [
         // Config
         ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName, expoVersion, backend)],
-        ["app.json", (0, appJson_1.appJsonTemplate)(projectName)],
+        ["app.json", (0, appJson_1.appJsonTemplate)(projectName, backend)],
         ["tsconfig.json", (0, tsconfig_1.tsconfigTemplate)()],
         [".gitignore", (0, gitignore_1.gitignoreTemplate)()],
         [".env.example", (0, envExample_1.envExampleTemplate)(backend)],
@@ -168,7 +172,7 @@ async function cmdNew(rawArgs) {
         : { publishableKey: "", domain: "", jwtCreated: false };
     const instant = backend === "instantdb"
         ? await (0, steps_1.promptInstantSetup)(options)
-        : { appId: "" };
+        : { appId: "", clerkPublishableKey: "", clerkClientName: "clerk" };
     const totalSteps = 1 + // project generation
         (options.installDependencies ? 2 : 0) +
         (backend === "convex" ? 2 + (clerk.domain ? 1 : 0) : 1) +
@@ -192,11 +196,11 @@ async function cmdNew(rawArgs) {
     else {
         prompts_1.log.step(`Configuring InstantDB ${stepLabel()}`);
         await (0, steps_1.writeInstantEnvironment)(projectDir, instant);
-        if (instant.appId) {
-            prompts_1.log.success("InstantDB environment configured.");
+        if (instant.appId && instant.clerkPublishableKey) {
+            prompts_1.log.success("InstantDB and Clerk environment configured.");
         }
         else {
-            prompts_1.log.info(picocolors_1.default.dim("Set EXPO_PUBLIC_INSTANT_APP_ID in .env.local to connect InstantDB."));
+            prompts_1.log.info(picocolors_1.default.dim("Set EXPO_PUBLIC_INSTANT_APP_ID and EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in .env.local."));
         }
     }
     if (options.installDependencies) {
@@ -272,7 +276,13 @@ async function cmdNew(rawArgs) {
     }
     prompts_1.log.info("");
     if (backend === "instantdb") {
-        prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Project scaffolded with InstantDB!")));
+        const instantReady = instant.appId && instant.clerkPublishableKey;
+        if (instantReady) {
+            prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Your app is ready!")));
+        }
+        else {
+            prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Project scaffolded with InstantDB!")));
+        }
         prompts_1.log.info("");
         prompts_1.log.info("  Next steps:");
         prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
@@ -283,11 +293,12 @@ async function cmdNew(rawArgs) {
             prompts_1.log.info(`  ${picocolors_1.default.cyan("bun install")} ${picocolors_1.default.dim("# or npm install")}`);
             prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
         }
-        if (!instant.appId) {
+        if (!instantReady) {
             prompts_1.log.info("");
-            prompts_1.log.info(picocolors_1.default.dim("  Add EXPO_PUBLIC_INSTANT_APP_ID to .env.local first."));
+            prompts_1.log.info(picocolors_1.default.dim("  Add EXPO_PUBLIC_INSTANT_APP_ID and EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY to .env.local."));
             prompts_1.log.info(picocolors_1.default.dim("  Create one with: npx instant-cli init-without-files --title " +
                 projectName));
+            prompts_1.log.info(picocolors_1.default.dim("  In Instant Auth tab, add your Clerk app and set EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME."));
         }
     }
     else if (clerk.publishableKey && clerk.domain) {

package/dist/templates/config/appJson.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.appJsonTemplate = appJsonTemplate;
-function appJsonTemplate(appName) {
+function appJsonTemplate(appName, backend) {
+    const plugins = backend === "convex"
+        ? ["expo-router", "expo-font", "expo-web-browser", "expo-secure-store"]
+        : ["expo-router", "expo-font", "expo-web-browser", "expo-secure-store"];
     const config = {
         expo: {
             name: appName,
@@ -20,12 +23,7 @@ function appJsonTemplate(appName) {
                 output: "single",
                 favicon: "./assets/images/favicon.png",
             },
-            plugins: [
-                "expo-router",
-                "expo-font",
-                "expo-web-browser",
-                "expo-secure-store",
-            ],
+            plugins,
             experiments: {
                 typedRoutes: true,
             },

package/dist/templates/config/envExample.js

@@ -5,6 +5,10 @@ function envExampleTemplate(backend) {
     if (backend === "instantdb") {
         return `# InstantDB
 EXPO_PUBLIC_INSTANT_APP_ID=
+EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME=clerk
+
+# Clerk
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
 `;
     }
     return `# Convex

package/dist/templates/config/packageJson.js

@@ -4,6 +4,7 @@ exports.packageJsonTemplate = packageJsonTemplate;
 function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex") {
     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",

package/dist/templates/config/readme.js

@@ -5,12 +5,13 @@ function readmeTemplate(projectName, backend) {
     if (backend === "instantdb") {
         return `# ${projectName}
 
-A mobile app built with **Expo** and **InstantDB**.
+A mobile app built with **Expo**, **InstantDB**, and **Clerk**.
 
 ## Tech Stack
 
 - **[Expo](https://expo.dev)** — React Native framework
 - **[InstantDB](https://instantdb.com)** — Real-time backend and sync
+- **[Clerk](https://clerk.com)** — Authentication
 - **[Expo Router](https://docs.expo.dev/router/introduction/)** — File-based navigation
 
 ## Getting Started
@@ -26,12 +27,24 @@ cp .env.example .env.local
 bunx expo start
 \`\`\`
 
-Set \`EXPO_PUBLIC_INSTANT_APP_ID\` in \`.env.local\`. You can create an Instant app id via:
+Set these in \`.env.local\`:
+- \`EXPO_PUBLIC_INSTANT_APP_ID\`
+- \`EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY\`
+- \`EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME\` (default \`clerk\`)
+
+You can create an Instant app id via:
 
 \`\`\`bash
 npx instant-cli init-without-files --title ${projectName}
 \`\`\`
 
+Clerk setup required for Instant:
+1. In Clerk dashboard, Sessions → Customize session token.
+2. Add claims:
+   - \`"email": "{{user.primary_email_address}}"\`
+   - \`"email_verified": "{{user.email_verified}}"\`
+3. In Instant dashboard Auth tab, register your Clerk publishable key and set the client name.
+
 ## Scripts
 
 | Command | Description |
@@ -44,6 +57,7 @@ npx instant-cli init-without-files --title ${projectName}
 
 - [Expo Docs](https://docs.expo.dev)
 - [InstantDB Docs](https://instantdb.com/docs)
+- [Clerk Docs](https://clerk.com/docs)
 `;
     }
     return `# ${projectName}

package/dist/templates/instant/authProvider.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantAuthProviderTemplate = instantAuthProviderTemplate;
+function instantAuthProviderTemplate() {
+    return `import React from "react";
+import { ClerkProvider, ClerkLoaded, useAuth } from "@clerk/clerk-expo";
+import * as SecureStore from "expo-secure-store";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { instantDb } from "@/lib/instant";
+
+const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
+const clerkClientName =
+  process.env.EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME || "clerk";
+
+const tokenCache = {
+  async getToken(key: string) {
+    try {
+      return await SecureStore.getItemAsync(key);
+    } catch (error) {
+      console.error("SecureStore getToken error:", error);
+      return null;
+    }
+  },
+  async saveToken(key: string, value: string) {
+    try {
+      await SecureStore.setItemAsync(key, value);
+    } catch (error) {
+      console.error("SecureStore saveToken error:", error);
+    }
+  },
+  async deleteToken(key: string) {
+    try {
+      await SecureStore.deleteItemAsync(key);
+    } catch (error) {
+      console.error("SecureStore deleteToken error:", error);
+    }
+  },
+};
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <View style={styles.setupCard}>
+        <Text style={styles.setupTitle}>Setup Required</Text>
+        <Text style={styles.setupText}>
+          Configure InstantDB and Clerk to use this app.
+        </Text>
+        <Text style={styles.setupStep}>
+          1. Set EXPO_PUBLIC_INSTANT_APP_ID{"\\n"}
+          2. Set EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY{"\\n"}
+          3. Register Clerk in Instant Auth tab{"\\n"}
+          4. Set EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function InstantSessionBridge({ children }: { children: React.ReactNode }) {
+  const { isLoaded, isSignedIn, getToken } = useAuth();
+  const instantAuth = instantDb?.useAuth();
+  const [syncError, setSyncError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    async function syncAuth() {
+      if (!instantDb || !isLoaded) {
+        return;
+      }
+
+      if (!isSignedIn) {
+        setSyncError(null);
+        try {
+          await instantDb.auth.signOut();
+        } catch (error) {
+          console.warn("Instant signOut warning:", error);
+        }
+        return;
+      }
+
+      try {
+        const idToken = await getToken();
+        if (!idToken) {
+          if (active) {
+            setSyncError("Could not get Clerk token.");
+          }
+          return;
+        }
+        await instantDb.auth.signInWithIdToken({
+          clientName: clerkClientName,
+          idToken,
+        });
+        if (active) {
+          setSyncError(null);
+        }
+      } catch (error) {
+        console.error("Instant Clerk auth error:", error);
+        if (active) {
+          setSyncError(
+            error instanceof Error ? error.message : "Could not sign in to Instant."
+          );
+        }
+      }
+    }
+
+    syncAuth();
+    return () => {
+      active = false;
+    };
+  }, [getToken, isLoaded, isSignedIn]);
+
+  if (!instantDb) {
+    return <SetupRequired />;
+  }
+
+  if (!isLoaded || instantAuth?.isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4B5563" />
+      </View>
+    );
+  }
+
+  if (isSignedIn && !instantAuth?.user) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4B5563" />
+      </View>
+    );
+  }
+
+  if (syncError || instantAuth?.error) {
+    return (
+      <View style={styles.setupContainer}>
+        <View style={styles.setupCard}>
+          <Text style={styles.setupTitle}>Authentication Error</Text>
+          <Text style={styles.setupText}>
+            {syncError || instantAuth?.error?.message}
+          </Text>
+          <Text style={styles.setupStep}>
+            Ensure Clerk session token includes email and email_verified claims.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  if (!publishableKey) {
+    return <SetupRequired />;
+  }
+
+  return (
+    <ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
+      <ClerkLoaded>
+        <InstantSessionBridge>{children}</InstantSessionBridge>
+      </ClerkLoaded>
+    </ClerkProvider>
+  );
+}
+
+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/rootLayout.js

@@ -5,18 +5,20 @@ function instantRootLayoutTemplate() {
     return `import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useFrameworkReady } from "@/hooks/useFrameworkReady";
+import { AuthProvider } from "./providers/AuthProvider";
 
 export default function RootLayout() {
   useFrameworkReady();
 
   return (
-    <>
+    <AuthProvider>
       <Stack screenOptions={{ headerShown: false }}>
         <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
         <Stack.Screen name="+not-found" />
       </Stack>
       <StatusBar style="auto" />
-    </>
+    </AuthProvider>
   );
 }
 `;

package/dist/templates/instant/settingsScreen.js

@@ -3,12 +3,84 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.instantSettingsScreenTemplate = instantSettingsScreenTemplate;
 function instantSettingsScreenTemplate() {
     return `import React from "react";
-import { View, Text, StyleSheet, StatusBar } from "react-native";
+import {
+  Alert,
+  ActivityIndicator,
+  Image,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { LogOut, Mail, User } from "lucide-react-native";
+import * as SecureStore from "expo-secure-store";
+import { useAuth, useUser } from "@clerk/clerk-expo";
+import { instantDb } from "@/lib/instant";
 
 export default function SettingsScreen() {
+  const { signOut } = useAuth();
+  const { user, isLoaded } = useUser();
+  const [isSigningOut, setIsSigningOut] = React.useState(false);
+  const [imageLoadError, setImageLoadError] = React.useState(false);
   const instantAppId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
 
+  React.useEffect(() => {
+    setImageLoadError(false);
+  }, [user?.imageUrl]);
+
+  const performSignOut = async () => {
+    setIsSigningOut(true);
+    try {
+      try {
+        await instantDb?.auth.signOut();
+      } catch (error) {
+        console.warn("Instant signOut warning:", error);
+      }
+
+      try {
+        await Promise.all([
+          SecureStore.deleteItemAsync("__clerk_client_jwt"),
+          SecureStore.deleteItemAsync("__clerk_db_jwt"),
+          SecureStore.deleteItemAsync("__clerk_session_jwt"),
+        ]);
+      } catch (storageError) {
+        console.warn("SecureStore cleanup failed:", storageError);
+      }
+
+      await signOut();
+    } catch (error) {
+      console.warn("Sign out flow warning:", error);
+    } finally {
+      setIsSigningOut(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    if (Platform.OS === "web") {
+      const confirmed = window.confirm("Are you sure you want to sign out?");
+      if (confirmed) await performSignOut();
+      return;
+    }
+
+    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Sign Out", style: "destructive", onPress: performSignOut },
+    ]);
+  };
+
+  if (!isLoaded) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#4B5563" />
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
@@ -17,9 +89,40 @@ export default function SettingsScreen() {
       </View>
 
       <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Profile</Text>
+          <View style={styles.profileRow}>
+            <View style={styles.avatarWrap}>
+              {user?.imageUrl && !imageLoadError ? (
+                <Image
+                  source={{ uri: user.imageUrl }}
+                  style={styles.avatar}
+                  onError={() => setImageLoadError(true)}
+                />
+              ) : (
+                <User size={28} color="#6B7280" />
+              )}
+            </View>
+            <View style={styles.profileTextWrap}>
+              <Text style={styles.profileName}>
+                {user?.fullName ||
+                  \`\${user?.firstName || ""} \${user?.lastName || ""}\`.trim() ||
+                  user?.username ||
+                  "User"}
+              </Text>
+              <View style={styles.emailRow}>
+                <Mail size={14} color="#9CA3AF" />
+                <Text style={styles.profileEmail}>
+                  {user?.primaryEmailAddress?.emailAddress || "No email"}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
         <View style={styles.card}>
           <Text style={styles.sectionTitle}>Backend</Text>
-          <Text style={styles.sectionText}>InstantDB</Text>
+          <Text style={styles.sectionText}>InstantDB + Clerk</Text>
         </View>
 
         <View style={styles.card}>
@@ -32,8 +135,25 @@ export default function SettingsScreen() {
         <View style={styles.card}>
           <Text style={styles.sectionTitle}>About</Text>
           <Text style={styles.sectionText}>Version 1.0.0</Text>
-          <Text style={styles.sectionText}>Built with Expo + InstantDB</Text>
+          <Text style={styles.sectionText}>Built with Expo + InstantDB + Clerk</Text>
         </View>
+
+        <TouchableOpacity
+          style={[styles.signOutButton, isSigningOut && styles.signOutButtonDisabled]}
+          onPress={() => {
+            if (!isSigningOut) handleSignOut();
+          }}
+          activeOpacity={0.75}
+        >
+          {isSigningOut ? (
+            <ActivityIndicator size={18} color="#EF4444" />
+          ) : (
+            <LogOut size={18} color="#EF4444" />
+          )}
+          <Text style={styles.signOutText}>
+            {isSigningOut ? "Signing Out..." : "Sign Out"}
+          </Text>
+        </TouchableOpacity>
       </View>
     </SafeAreaView>
   );
@@ -44,6 +164,11 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#FFFFFF",
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
   header: {
     paddingHorizontal: 16,
     paddingTop: 24,
@@ -78,6 +203,62 @@ const styles = StyleSheet.create({
     marginBottom: 4,
     lineHeight: 22,
   },
+  profileRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  avatarWrap: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+    backgroundColor: "#E5E7EB",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  avatar: {
+    width: 54,
+    height: 54,
+    borderRadius: 27,
+  },
+  profileTextWrap: {
+    flex: 1,
+  },
+  profileName: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4,
+  },
+  emailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  profileEmail: {
+    marginLeft: 6,
+    color: "#6B7280",
+    fontSize: 14,
+  },
+  signOutButton: {
+    marginTop: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 48,
+    borderRadius: 12,
+    backgroundColor: "#FEF2F2",
+    borderWidth: 1,
+    borderColor: "#FECACA",
+    gap: 8,
+  },
+  signOutButtonDisabled: {
+    opacity: 0.65,
+  },
+  signOutText: {
+    color: "#EF4444",
+    fontSize: 15,
+    fontWeight: "600",
+  },
 });
 `;
 }

package/dist/templates/instant/tabsLayout.js

@@ -2,11 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.instantTabsLayoutTemplate = instantTabsLayoutTemplate;
 function instantTabsLayoutTemplate() {
-    return `import { Tabs } from "expo-router";
+    return `import { Tabs, Redirect } from "expo-router";
 import { SquareCheck as CheckSquare, Settings } from "lucide-react-native";
 import { Platform } from "react-native";
+import { useAuth } from "@clerk/clerk-expo";
 
 export default function TabLayout() {
+  const { isSignedIn, isLoaded } = useAuth();
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  if (!isSignedIn) {
+    return <Redirect href="/(auth)/sign-in" />;
+  }
+
   return (
     <Tabs
       screenOptions={{

package/package.json

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