create-stackr 0.2.0 → 0.3.0

package/templates/base/backend/domain/user/repository.drizzle.ts

@@ -1,4 +1,4 @@
-import { eq } from 'drizzle-orm';
+import { eq, and } from 'drizzle-orm';
 import { db, schema } from "../../utils/db";
 import { ErrorFactory } from "../../utils/errors";
 
@@ -125,3 +125,30 @@ export const deleteUser = async (userId: string): Promise<void> => {
     });
   }
 };
+
+/**
+ * Check if user has a credential account with password
+ * Returns true if user signed up with email/password, false for OAuth-only users
+ */
+export const userHasPassword = async (userId: string): Promise<boolean> => {
+  try {
+    const [credentialAccount] = await db
+      .select({ password: schema.account.password })
+      .from(schema.account)
+      .where(
+        and(
+          eq(schema.account.userId, userId),
+          eq(schema.account.providerId, 'credential')
+        )
+      )
+      .limit(1);
+
+    return !!credentialAccount?.password;
+  } catch (error) {
+    throw ErrorFactory.databaseError({
+      operation: 'userHasPassword',
+      userId,
+      originalError: error instanceof Error ? error.message : String(error)
+    });
+  }
+};

package/templates/base/backend/domain/user/repository.prisma.ts

@@ -112,4 +112,29 @@ export const deleteUser = async (userId: string): Promise<void> => {
       originalError: error instanceof Error ? error.message : String(error)
     });
   }
+};
+
+/**
+ * Check if user has a credential account with password
+ * Returns true if user signed up with email/password, false for OAuth-only users
+ */
+export const userHasPassword = async (userId: string): Promise<boolean> => {
+  try {
+    const credentialAccount = await db.account.findFirst({
+      where: {
+        userId,
+        providerId: 'credential',
+        password: { not: null },
+      },
+      select: { password: true },
+    });
+
+    return !!credentialAccount?.password;
+  } catch (error) {
+    throw ErrorFactory.databaseError({
+      operation: 'userHasPassword',
+      userId,
+      originalError: error instanceof Error ? error.message : String(error)
+    });
+  }
 };

package/templates/base/backend/drizzle/{schema.drizzle.ts → schema.drizzle.ts.ejs}

@@ -24,6 +24,9 @@ export const user = pgTable('user', {
   image: text('image'),
   createdAt: timestamp('created_at', { mode: 'date' }).defaultNow().notNull(),
   updatedAt: timestamp('updated_at', { mode: 'date' }).defaultNow().notNull().$onUpdate(() => new Date()),
+<% if (features.authentication.twoFactor) { %>
+  twoFactorEnabled: boolean('two_factor_enabled').default(false),
+<% } %>
 });
 
 // BetterAuth Session model
@@ -67,6 +70,16 @@ export const verification = pgTable('verification', {
   updatedAt: timestamp('updated_at', { mode: 'date' }).defaultNow().notNull().$onUpdate(() => new Date()),
 });
 
+<% if (features.authentication.twoFactor) { %>
+// BetterAuth TwoFactor model
+export const twoFactor = pgTable('two_factor', {
+  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
+  userId: text('user_id').notNull().references(() => user.id, { onDelete: 'cascade' }),
+  secret: text('secret'),
+  backupCodes: text('backup_codes'),
+});
+<% } %>
+
 // ==================== App-Specific Tables ====================
 
 // Device Session model (anonymous sessions before authentication)
@@ -87,6 +100,9 @@ export const userRelations = relations(user, ({ many }) => ({
   sessions: many(session),
   accounts: many(account),
   deviceSessions: many(deviceSession),
+<% if (features.authentication.twoFactor) { %>
+  twoFactor: many(twoFactor),
+<% } %>
 }));
 
 export const sessionRelations = relations(session, ({ one }) => ({
@@ -103,6 +119,15 @@ export const accountRelations = relations(account, ({ one }) => ({
   }),
 }));
 
+<% if (features.authentication.twoFactor) { %>
+export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
+  user: one(user, {
+    fields: [twoFactor.userId],
+    references: [user.id],
+  }),
+}));
+<% } %>
+
 export const deviceSessionRelations = relations(deviceSession, ({ one }) => ({
   migratedToUser: one(user, {
     fields: [deviceSession.migratedToUserId],

package/templates/base/backend/lib/auth.drizzle.ts.ejs

@@ -1,8 +1,8 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { expo } from "@better-auth/expo";
-<% if (features.authentication.twoFactor) { %>
-import { twoFactor } from "better-auth/plugins";
+<% if (features.authentication.twoFactor || features.authentication.emailVerification) { %>
+import { <% if (features.authentication.twoFactor) { %>twoFactor, <% } %><% if (features.authentication.emailVerification) { %>emailOTP<% } %> } from "better-auth/plugins";
 <% } %>
 import { db } from "../utils/db";
 import * as schema from "../drizzle/schema";
@@ -18,12 +18,15 @@ export const auth = betterAuth({
       session: schema.session,
       account: schema.account,
       verification: schema.verification,
+<% if (features.authentication.twoFactor) { %>
+      twoFactor: schema.twoFactor,
+<% } %>
     },
   }),
   basePath: "/api/auth", // BetterAuth endpoints will be at /api/auth/*
   emailAndPassword: {
     enabled: true,
-    requireEmailVerification: <%= features.authentication.emailVerification %>,
+    requireEmailVerification: false,  // Allow sign-in, control access on frontend via ProtectedRoute
 <% if (features.authentication.passwordReset) { %>
     sendResetPassword: async ({ user, url }) => {
       await sendEmail({
@@ -39,21 +42,6 @@ export const auth = betterAuth({
     },
 <% } %>
   },
-<% if (features.authentication.emailVerification) { %>
-  emailVerification: {
-    sendVerificationEmail: async ({ user, url }) => {
-      await sendEmail({
-        to: user.email,
-        subject: "Verify your email address",
-        html: `
-          <h1>Verify your email</h1>
-          <p>Click the link below to verify your email address:</p>
-          <a href="${url}">Verify Email</a>
-        `,
-      });
-    },
-  },
-<% } %>
 <% if (features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github) { %>
   socialProviders: {
 <% if (features.authentication.providers.google) { %>
@@ -81,6 +69,27 @@ export const auth = betterAuth({
     expo(), // Required for React Native/Expo OAuth deep link handling
 <% if (features.authentication.twoFactor) { %>
     twoFactor(),
+<% } %>
+<% if (features.authentication.emailVerification) { %>
+    emailOTP({
+      otpLength: 6,
+      expiresIn: 300, // 5 minutes
+      sendVerificationOnSignUp: true,
+      async sendVerificationOTP({ email, otp, type }) {
+        if (type === 'email-verification') {
+          await sendEmail({
+            to: email,
+            subject: "Your verification code",
+            html: `
+              <h1>Verify your email</h1>
+              <p>Your verification code is:</p>
+              <h2 style="font-size: 32px; letter-spacing: 8px; font-family: monospace;">${otp}</h2>
+              <p>This code expires in 5 minutes.</p>
+            `,
+          });
+        }
+      },
+    }),
 <% } %>
   ],
   session: {

package/templates/base/backend/lib/auth.prisma.ts.ejs

@@ -1,8 +1,8 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 import { expo } from "@better-auth/expo";
-<% if (features.authentication.twoFactor) { %>
-import { twoFactor } from "better-auth/plugins";
+<% if (features.authentication.twoFactor || features.authentication.emailVerification) { %>
+import { <% if (features.authentication.twoFactor) { %>twoFactor, <% } %><% if (features.authentication.emailVerification) { %>emailOTP<% } %> } from "better-auth/plugins";
 <% } %>
 import { db } from "../utils/db";
 <% if (features.authentication.emailVerification || features.authentication.passwordReset) { %>
@@ -16,7 +16,7 @@ export const auth = betterAuth({
   basePath: "/api/auth", // BetterAuth endpoints will be at /api/auth/*
   emailAndPassword: {
     enabled: true,
-    requireEmailVerification: <%= features.authentication.emailVerification %>,
+    requireEmailVerification: false,  // Allow sign-in, control access on frontend via ProtectedRoute
 <% if (features.authentication.passwordReset) { %>
     sendResetPassword: async ({ user, url }) => {
       await sendEmail({
@@ -32,21 +32,6 @@ export const auth = betterAuth({
     },
 <% } %>
   },
-<% if (features.authentication.emailVerification) { %>
-  emailVerification: {
-    sendVerificationEmail: async ({ user, url }) => {
-      await sendEmail({
-        to: user.email,
-        subject: "Verify your email address",
-        html: `
-          <h1>Verify your email</h1>
-          <p>Click the link below to verify your email address:</p>
-          <a href="${url}">Verify Email</a>
-        `,
-      });
-    },
-  },
-<% } %>
 <% if (features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github) { %>
   socialProviders: {
 <% if (features.authentication.providers.google) { %>
@@ -74,6 +59,27 @@ export const auth = betterAuth({
     expo(), // Required for React Native/Expo OAuth deep link handling
 <% if (features.authentication.twoFactor) { %>
     twoFactor(),
+<% } %>
+<% if (features.authentication.emailVerification) { %>
+    emailOTP({
+      otpLength: 6,
+      expiresIn: 300, // 5 minutes
+      sendVerificationOnSignUp: true,
+      async sendVerificationOTP({ email, otp, type }) {
+        if (type === 'email-verification') {
+          await sendEmail({
+            to: email,
+            subject: "Your verification code",
+            html: `
+              <h1>Verify your email</h1>
+              <p>Your verification code is:</p>
+              <h2 style="font-size: 32px; letter-spacing: 8px; font-family: monospace;">${otp}</h2>
+              <p>This code expires in 5 minutes.</p>
+            `,
+          });
+        }
+      },
+    }),
 <% } %>
   ],
   session: {

package/templates/base/backend/package.json.ejs

@@ -4,6 +4,12 @@
   "description": "Backend API for <%= projectName %>",
   "type": "module",
   "main": "controllers/rest-api/index.ts",
+  "overrides": {
+    "expo-network": "npm:empty-npm-package@1.0.0",
+    "expo-secure-store": "npm:empty-npm-package@1.0.0",
+    "@react-native-async-storage/async-storage": "npm:empty-npm-package@1.0.0",
+    "react-native": "npm:empty-npm-package@1.0.0"
+  },
   "scripts": {
     "dev:rest-api": "bun --watch ./controllers/rest-api/index.ts | pino-pretty --colorize",<% if (backend.eventQueue) { %>
     "dev:event-queue": "bun --watch ./controllers/event-queue/index.ts | pino-pretty --colorize",<% } %>
@@ -21,30 +27,30 @@
     "db:studio": "drizzle-kit studio"<% } %>
   },
   "dependencies": {
-    "@fastify/cors": "^11.0.1",<% if (backend.orm === 'prisma') { %>
-    "@prisma/adapter-pg": "^7.0.0",
-    "@prisma/client": "^7.0.0",<% } %><% if (backend.orm === 'drizzle') { %>
-    "drizzle-orm": "^0.44.0",
-    "pg": "^8.13.0",<% } %>
-    "@sinclair/typebox": "^0.34.33",
-    "ajv": "^8.17.1",
-    "better-auth": "^1.4.5",
-    "@better-auth/expo": "^1.4.5",
-    "dotenv": "^16.5.0",
-    "fastify": "^5.3.3",
-    "fastify-plugin": "^5.0.1",
-    "ioredis": "^5.4.1",
-    "pino-pretty": "^13.0.0"<% if (backend.eventQueue) { %>,
-    "bullmq": "^5.40.3"<% } %><% if (features.authentication.emailVerification || features.authentication.passwordReset) { %>,
-    "nodemailer": "^6.9.0"<% } %>
+    "@fastify/cors": "~11.0.1",<% if (backend.orm === 'prisma') { %>
+    "@prisma/adapter-pg": "~7.0.0",
+    "@prisma/client": "~7.0.0",<% } %><% if (backend.orm === 'drizzle') { %>
+    "drizzle-orm": "~0.44.0",
+    "pg": "~8.13.0",<% } %>
+    "@sinclair/typebox": "~0.34.33",
+    "ajv": "~8.17.1",
+    "better-auth": "~1.4.5",
+    "@better-auth/expo": "~1.4.5",
+    "dotenv": "~16.5.0",
+    "fastify": "~5.3.3",
+    "fastify-plugin": "~5.0.1",
+    "ioredis": "~5.4.1",
+    "pino-pretty": "~13.0.0"<% if (backend.eventQueue) { %>,
+    "bullmq": "~5.40.3"<% } %><% if (features.authentication.emailVerification || features.authentication.passwordReset) { %>,
+    "nodemailer": "~6.9.0"<% } %>
   },
   "devDependencies": {
-    "@types/node": "^24.0.0",<% if (backend.orm === 'prisma') { %>
-    "prisma": "^7.0.0",<% } %><% if (backend.orm === 'drizzle') { %>
-    "drizzle-kit": "^0.30.0",
-    "@types/pg": "^8.11.0",<% } %>
-    "tsx": "^4.20.1",
-    "typescript": "^5.8.3"<% if (features.authentication.emailVerification || features.authentication.passwordReset) { %>,
-    "@types/nodemailer": "^6.4.0"<% } %>
+    "@types/node": "~24.0.0",<% if (backend.orm === 'prisma') { %>
+    "prisma": "~7.0.0",<% } %><% if (backend.orm === 'drizzle') { %>
+    "drizzle-kit": "~0.30.0",
+    "@types/pg": "~8.11.0",<% } %>
+    "tsx": "~4.20.1",
+    "typescript": "~5.8.3"<% if (features.authentication.emailVerification || features.authentication.passwordReset) { %>,
+    "@types/nodemailer": "~6.4.0"<% } %>
   }
 }

package/templates/base/backend/prisma/schema.prisma.ejs

@@ -20,10 +20,16 @@ model User {
   image         String?
   createdAt     DateTime  @default(now())
   updatedAt     DateTime  @updatedAt
+<% if (features.authentication.twoFactor) { %>
+  twoFactorEnabled Boolean @default(false)
+<% } %>
 
   // BetterAuth relations
   sessions      Session[]
   accounts      Account[]
+<% if (features.authentication.twoFactor) { %>
+  twoFactor     TwoFactor[]
+<% } %>
 
   // Device session migration relation
   deviceSessions DeviceSession[]
@@ -100,3 +106,17 @@ model DeviceSession {
 
   @@map("device_session")
 }
+
+<% if (features.authentication.twoFactor) { %>
+// BetterAuth TwoFactor model
+model TwoFactor {
+  id          String  @id @default(cuid())
+  userId      String
+  secret      String?
+  backupCodes String?
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("two_factor")
+}
+<% } %>

package/templates/base/mobile/app/+not-found.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { router } from 'expo-router';
-import { Button } from '../src/components/ui';
+import { Button } from '../src/components/ui/button';
 
 export default function NotFoundScreen() {
   const handleGoHome = () => {

package/templates/base/mobile/app/_layout.tsx.ejs

@@ -1,17 +1,24 @@
-import { Stack, router } from 'expo-router';
-import { useEffect<% if (features.sessionManagement) { %>, useState<% } %> } from 'react';
+import { Stack, router<% if (features.authentication.enabled) { %>, useSegments<% } %> } from 'expo-router';
+import { useEffect, useRef<% if (!features.sessionManagement) { %>, useState<% } %> } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
 import Constants from 'expo-constants';
-import { ThemeProvider } from '@/context/ThemeContext';
+import { ThemeProvider } from '@/context/theme-context';
+import { Toast } from '@/components/ui/toast';
 <% if (features.onboarding.enabled) { %>import AsyncStorage from '@react-native-async-storage/async-storage';
-<% } %><% if (integrations.revenueCat.enabled || integrations.adjust.enabled || integrations.scate.enabled) { %>import { initializeSDKs } from '@/services/sdkInitializer';
-<% } %><% if (features.sessionManagement) { %>import { useSessionActions, useSession } from '../src/store/deviceSession.store';
+<% } %><% if (integrations.revenueCat.enabled || integrations.adjust.enabled || integrations.scate.enabled) { %>import { initializeSDKs } from '@/services/sdk-initializer';
+<% } %><% if (features.sessionManagement) { %>import { useSessionActions, useSession } from '../src/store/device-session-store';
+<% } %><% if (features.authentication.enabled) { %>import { useAuth } from '../src/hooks/auth';
 <% } %>import { logger } from '../src/utils/logger';
 
 export default function RootLayout() {
-<% if (features.sessionManagement) { %>  const { initializeSession } = useSessionActions();
+<% if (features.sessionManagement) { %>  const { initializeSession, isSessionValid } = useSessionActions();
   const { isSessionChecked } = useSession();
 <% } else { %>  const [isReady, setIsReady] = useState(false);
+<% } %><% if (features.authentication.enabled) { %>  const { isAuthenticated, isPending: isAuthPending<% if (features.authentication.emailVerification) { %>, user<% } %> } = useAuth();
+  const segments = useSegments();
 <% } %>
+  const appState = useRef(AppState.currentState);
+
   // Get feature flags from app.json
   const onboardingEnabled = Constants.expoConfig?.extra?.features?.onboarding?.enabled ?? false;
 
@@ -44,7 +51,12 @@ export default function RootLayout() {
         logger.info('RootLayout: Initializing session');
         await initializeSession();
 <% } %>
-        router.replace('/(tabs)');
+<% if (features.authentication.enabled) { %>        // Route based on authentication state
+        // Note: The actual routing will happen in the useEffect below once auth state is known
+        // For now, just mark initialization complete
+        logger.info('RootLayout: Waiting for auth state...');
+<% } else { %>        router.replace('/(tabs)');
+<% } %>
       } catch (error) {
         logger.error('RootLayout: Failed to initialize app', { error });
         // Fallback to tabs on error
@@ -57,15 +69,88 @@ export default function RootLayout() {
     initializeApp();
   }, [<% if (features.sessionManagement) { %>isSessionChecked, initializeSession, <% } %>onboardingEnabled]);
 
+<% if (features.sessionManagement) { %>
+  // Revalidate session when app comes to foreground
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
+      // App came to foreground from background/inactive
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        logger.debug('RootLayout: App came to foreground, revalidating session');
+        isSessionValid();
+      }
+      appState.current = nextAppState;
+    });
+
+    return () => subscription.remove();
+  }, [isSessionValid]);
+<% } %>
+<% if (features.authentication.enabled) { %>
+  // Route based on authentication state<% if (features.authentication.emailVerification) { %> and email verification<% } %>
+  useEffect(() => {
+    // Wait for auth state to be determined
+    if (isAuthPending) {
+      return;
+    }
+
+    // Get current route group/screen
+    const currentRoute = segments[0];
+    const inAuthGroup = currentRoute === '(auth)';
+    const inPublicGroup = currentRoute === '(public)';
+    const inTabsGroup = currentRoute === '(tabs)';
+<% if (features.onboarding.enabled) { %>    const inOnboardingGroup = currentRoute === '(onboarding)';
+<% } %><% if (features.authentication.emailVerification) { %>    const onVerifyEmail = currentRoute === 'verify-email';
+<% } %>    const onAccountScreen = currentRoute === 'account';
+
+    // Don't interfere with<% if (features.onboarding.enabled) { %> onboarding,<% } %> auth modal, or account screen flows
+    if (<% if (features.onboarding.enabled) { %>inOnboardingGroup || <% } %>inAuthGroup || onAccountScreen) {
+      return;
+    }
+
+    logger.info('RootLayout: Auth state determined', {
+      isAuthenticated,
+<% if (features.authentication.emailVerification) { %>      emailVerified: user?.emailVerified,
+<% } %>      currentRoute
+    });
+
+    if (isAuthenticated) {
+<% if (features.authentication.emailVerification) { %>      // Check if email verification is required
+      if (user && user.emailVerified === false) {
+        // Unverified - navigate to full-screen verify-email
+        if (!onVerifyEmail) {
+          router.replace(`/verify-email?email=${encodeURIComponent(user.email)}`);
+        }
+      } else {
+        // Verified - navigate to tabs
+        if (!inTabsGroup) {
+          router.replace('/(tabs)');
+        }
+      }
+<% } else { %>      // Only navigate if not already in tabs
+      if (!inTabsGroup) {
+        router.replace('/(tabs)');
+      }
+<% } %>    } else {
+      // Not authenticated - navigate to public
+      if (!inPublicGroup) {
+        router.replace('/(public)');
+      }
+    }
+  }, [isAuthenticated, isAuthPending, <% if (features.authentication.emailVerification) { %>user, <% } %>segments]);
+<% } %>
+
   return (
     <ThemeProvider>
       <Stack screenOptions={{ headerShown: false }}>
 <% if (features.onboarding.enabled) { %>        <Stack.Screen name="(onboarding)" />
-<% } %><% if (features.authentication.enabled) { %>        <Stack.Screen name="(auth)" />
-<% } %><% if (features.paywall) { %>        <Stack.Screen name="paywall" options={{ presentation: 'modal' }} />
+<% } %><% if (features.authentication.enabled) { %>        <Stack.Screen name="(public)" />
+        <Stack.Screen name="(auth)" options={{ presentation: 'modal' }} />
+<% if (features.authentication.emailVerification) { %>        <Stack.Screen name="verify-email" />
+<% } %><% } %><% if (features.paywall) { %>        <Stack.Screen name="paywall" options={{ presentation: 'modal' }} />
 <% } %>        <Stack.Screen name="(tabs)" />
-        <Stack.Screen name="+not-found" />
+<% if (features.authentication.enabled) { %>        <Stack.Screen name="account" options={{ presentation: 'card' }} />
+<% } %>        <Stack.Screen name="+not-found" />
       </Stack>
+      <Toast />
     </ThemeProvider>
   );
 }

package/templates/base/mobile/package.json.ejs

@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "description": "React Native mobile app for <%= projectName %>",
   "main": "expo-router/entry",
+  "overrides": {
+    "react-dom": "npm:empty-npm-package@1.0.0"
+  },
   "scripts": {
     "start": "expo start",
     "android": "expo run:android",
@@ -12,8 +15,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@expo/vector-icons": "^15.0.3",
-    "@react-native-async-storage/async-storage": "2.2.0",
+    "@expo/vector-icons": "~15.0.3",
+    "@react-native-async-storage/async-storage": "~2.2.0",
     "expo": "~54.0.0",
     "expo-application": "~7.0.7",
     "expo-constants": "~18.0.10",
@@ -28,24 +31,29 @@
     "react-native": "0.81.5",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
-    "zustand": "^5.0.5"<% if (features.authentication.enabled) { %>,
-    "axios": "^1.9.0",
+    "zustand": "~5.0.5"<% if (features.authentication.enabled) { %>,
+    "axios": "~1.9.0",
     "expo-secure-store": "~15.0.7",
     "expo-network": "~8.0.7",
-    "better-auth": "^1.4.5",
-    "@better-auth/expo": "^1.4.5"<% } %><% if (features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github) { %>,
+    "better-auth": "~1.4.5",
+    "@better-auth/expo": "~1.4.5"<% } %><% if (features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github) { %>,
     "expo-web-browser": "~15.0.7"<% } %><% if (features.authentication.providers.google) { %>,
-    "@react-native-google-signin/google-signin": "^13.1.0"<% } %><% if (features.authentication.providers.apple) { %>,
+    "@react-native-google-signin/google-signin": "~13.1.0"<% } %><% if (features.authentication.providers.apple) { %>,
     "expo-apple-authentication": "~7.1.3"<% } %><% if (integrations.revenueCat.enabled) { %>,
-    "react-native-purchases": "^9.1.0"<% } %><% if (integrations.adjust.enabled) { %>,
-    "react-native-adjust": "^5.4.1"<% } %><% if (integrations.scate.enabled) { %>,
-    "scatesdk-react": "^0.4.12"<% } %><% if (integrations.att.enabled) { %>,
-    "expo-tracking-transparency": "~5.2.4"<% } %>
+    "react-native-purchases": "~9.1.0"<% } %><% if (integrations.adjust.enabled) { %>,
+    "react-native-adjust": "~5.4.1"<% } %><% if (integrations.scate.enabled) { %>,
+    "scatesdk-react": "~0.4.12"<% } %><% if (integrations.att.enabled) { %>,
+    "expo-tracking-transparency": "~5.2.4"<% } %><% if (features.authentication.twoFactor) { %>,
+    "react-native-svg": "~15.12.1",
+    "react-native-qrcode-svg": "~6.3.2",
+    "expo-clipboard": "~8.0.8",
+    "expo-file-system": "~19.0.21",
+    "expo-sharing": "~14.0.8"<% } %>
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.0",
     "@types/react": "~19.1.10",
-    "eslint": "^9.25.0",
+    "eslint": "~9.25.0",
     "eslint-config-expo": "~10.0.0",
     "typescript": "~5.9.2"
   },

package/templates/base/mobile/src/components/ui/Button.tsx

@@ -9,12 +9,12 @@ import {
   PressableProps,
   Animated,
 } from 'react-native';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
 
 interface ButtonProps extends Omit<PressableProps, 'style'> {
   title: string;
   loading?: boolean;
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
   size?: 'small' | 'medium' | 'large';
   fullWidth?: boolean;
   style?: ViewStyle;
@@ -79,7 +79,7 @@ export const Button: React.FC<ButtonProps> = ({
         {loading ? (
           <ActivityIndicator
             size="small"
-            color={variant === 'primary' ? theme.colors.textInverse : theme.colors.primary}
+            color={variant === 'primary' || variant === 'destructive' ? theme.colors.textInverse : theme.colors.primary}
           />
         ) : (
           <Text style={[
@@ -109,6 +109,7 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
   secondary: { backgroundColor: theme.colors.backgroundSecondary },
   outline: { backgroundColor: 'transparent', borderColor: theme.colors.borderStrong },
   ghost: { backgroundColor: 'transparent' },
+  destructive: { backgroundColor: theme.colors.error, borderColor: theme.colors.error },
 
   small: { paddingHorizontal: theme.spacing[3], paddingVertical: theme.spacing[2], minHeight: 36 },
   medium: { paddingHorizontal: theme.spacing[4], paddingVertical: theme.spacing[3], minHeight: 48 },
@@ -122,6 +123,7 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
   secondaryText: { color: theme.colors.text },
   outlineText: { color: theme.colors.text },
   ghostText: { color: theme.colors.primary },
+  destructiveText: { color: theme.colors.textInverse },
 
   smallText: { fontSize: theme.typography.fontSize.sm },
   mediumText: { fontSize: theme.typography.fontSize.base },

package/templates/base/mobile/src/components/ui/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useMemo } from 'react';
 import { View, Text, StyleSheet, ViewStyle, Pressable, Animated } from 'react-native';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
 
 interface CardProps {
   children: React.ReactNode;

package/templates/base/mobile/src/components/ui/Input.tsx

@@ -10,7 +10,7 @@ import {
   Pressable,
   Animated,
 } from 'react-native';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
 
 interface InputProps extends Omit<TextInputProps, 'style'> {
   label?: string;

package/templates/base/mobile/src/components/ui/Skeleton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useMemo } from 'react';
 import { View, StyleSheet, Animated, ViewStyle } from 'react-native';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
 
 interface SkeletonProps {
   width?: number | string;