create-stackr 0.2.0 → 0.3.0

package/templates/features/mobile/auth/hooks/{useAuth.ts.ejs → auth.ts.ejs}

@@ -1,7 +1,14 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { Platform } from 'react-native';
 import { useSession, authClient, getCookies } from '../lib/auth-client';
 import Constants from 'expo-constants';
+<% if (features.authentication.twoFactor) { %>
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const TWO_FACTOR_EXPIRES_KEY = '@auth:two_factor_expires_at';
+const TWO_FACTOR_TIMEOUT_SECONDS = 180;
+const SAFETY_BUFFER_SECONDS = 5;
+<% } %>
 <% if (features.authentication.providers.google) { %>
 import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';
 <% } %>
@@ -24,6 +31,41 @@ export const useAuth = () => {
   const { data: session, isPending, error: sessionError, refetch } = useSession();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+<% if (features.authentication.twoFactor) { %>
+  // 2FA expiration state
+  const [twoFactorExpiresAt, setTwoFactorExpiresAtState] = useState<number | null>(null);
+
+  // Load persisted 2FA expiration on mount
+  useEffect(() => {
+    AsyncStorage.getItem(TWO_FACTOR_EXPIRES_KEY).then((value) => {
+      if (value) {
+        const expiresAt = parseInt(value, 10);
+        // Only restore if not already expired
+        if (expiresAt > Math.floor(Date.now() / 1000)) {
+          setTwoFactorExpiresAtState(expiresAt);
+        } else {
+          AsyncStorage.removeItem(TWO_FACTOR_EXPIRES_KEY);
+        }
+      }
+    });
+  }, []);
+
+  // Setter that persists to AsyncStorage
+  const setTwoFactorExpiration = useCallback(async (expiresAt: number | null) => {
+    setTwoFactorExpiresAtState(expiresAt);
+    if (expiresAt) {
+      await AsyncStorage.setItem(TWO_FACTOR_EXPIRES_KEY, expiresAt.toString());
+    } else {
+      await AsyncStorage.removeItem(TWO_FACTOR_EXPIRES_KEY);
+    }
+  }, []);
+
+  // Clear 2FA state (used after expiration or successful verification)
+  const clearTwoFactorState = useCallback(async () => {
+    setTwoFactorExpiresAtState(null);
+    await AsyncStorage.removeItem(TWO_FACTOR_EXPIRES_KEY);
+  }, []);
+<% } %>
 
   // Computed state from BetterAuth session
   const isAuthenticated = !!(session?.user && session?.session);
@@ -38,6 +80,16 @@ export const useAuth = () => {
         email: credentials.email,
         password: credentials.password,
       });
+<% if (features.authentication.twoFactor) { %>
+      // Check if 2FA is required (Better Auth returns twoFactorRedirect: true)
+      if (result.data?.twoFactorRedirect) {
+        // Calculate expiration: current time + backend timeout - safety buffer
+        // The safety buffer ensures mobile expires BEFORE backend (same pattern as web's Max-Age fallback)
+        const expiresAt = Math.floor(Date.now() / 1000) + TWO_FACTOR_TIMEOUT_SECONDS - SAFETY_BUFFER_SECONDS;
+        await setTwoFactorExpiration(expiresAt);
+        return { success: true, requiresTwoFactor: true, twoFactorExpiresAt: expiresAt };
+      }
+<% } %>
       if (result.error) {
         throw new Error(result.error.message || 'Sign in failed');
       }
@@ -64,7 +116,14 @@ export const useAuth = () => {
       if (result.error) {
         throw new Error(result.error.message || 'Sign up failed');
       }
+<% if (features.authentication.emailVerification) { %>
+      // Check if email verification is required
+      // When emailOTP plugin is enabled with sendVerificationOnSignUp,
+      // the user needs to verify their email before being signed in
+      return { success: true, needsEmailVerification: true, email: data.email };
+<% } else { %>
       return { success: true };
+<% } %>
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Sign up failed';
       setError(message);
@@ -331,6 +390,185 @@ export const useAuth = () => {
       setIsLoading(false);
     }
   }, []);
+<% if (features.authentication.twoFactor) { %>
+
+  // Verify TOTP code during login (2FA challenge)
+  const verifyTotpLogin = useCallback(async (code: string, trustDevice?: boolean) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.verifyTotp({
+        code,
+        trustDevice,
+      });
+      if (result.error) {
+        throw new Error(result.error.message || 'Invalid verification code');
+      }
+      // Clear 2FA state on successful verification
+      await clearTwoFactorState();
+      return { success: true };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Verification failed';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [clearTwoFactorState]);
+
+  // Verify backup code during login
+  const verifyBackupCode = useCallback(async (code: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.verifyBackupCode({
+        code,
+      });
+      if (result.error) {
+        throw new Error(result.error.message || 'Invalid backup code');
+      }
+      // Clear 2FA state on successful verification
+      await clearTwoFactorState();
+      return { success: true };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Verification failed';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [clearTwoFactorState]);
+
+  // Enable 2FA - initiates the setup flow and returns TOTP URI + backup codes
+  const enableTwoFactor = useCallback(async (password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.enable({ password });
+      if (result.error) {
+        throw new Error(result.error.message || 'Failed to enable 2FA');
+      }
+      return {
+        success: true,
+        totpURI: result.data?.totpURI,
+        backupCodes: result.data?.backupCodes,
+      };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to enable 2FA';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Verify TOTP setup (confirms user has set up their authenticator correctly)
+  const verifyTotpSetup = useCallback(async (code: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.verifyTotp({ code });
+      if (result.error) {
+        throw new Error(result.error.message || 'Verification failed');
+      }
+      // Refresh session to get updated twoFactorEnabled status
+      await refetch();
+      return { success: true };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Verification failed';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refetch]);
+
+  // Disable 2FA
+  const disableTwoFactor = useCallback(async (password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.disable({ password });
+      if (result.error) {
+        throw new Error(result.error.message || 'Failed to disable 2FA');
+      }
+      await refetch();
+      return { success: true };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to disable 2FA';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refetch]);
+
+  // Generate new backup codes (invalidates old ones)
+  const generateBackupCodes = useCallback(async (password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await authClient.twoFactor.generateBackupCodes({ password });
+      if (result.error) {
+        throw new Error(result.error.message || 'Failed to generate backup codes');
+      }
+      return {
+        success: true,
+        backupCodes: result.data?.backupCodes,
+      };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to generate backup codes';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Check if user has a password set (for OAuth users who need to set one for 2FA)
+  const checkHasPassword = useCallback(async (): Promise<boolean> => {
+    try {
+      const response = await fetch(`${API_URL}/api/auth/has-password`, {
+        headers: {
+          'Cookie': getCookies() || '',
+        },
+        credentials: 'omit',
+      });
+      const data = await response.json();
+      return data.hasPassword ?? false;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  // Set initial password (for OAuth users enabling 2FA)
+  const setInitialPassword = useCallback(async (password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_URL}/api/auth/set-password`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Cookie': getCookies() || '',
+        },
+        credentials: 'omit',
+        body: JSON.stringify({ newPassword: password }),
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.message || 'Failed to set password');
+      }
+      return { success: true };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to set password';
+      setError(message);
+      return { success: false, error: message };
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+<% } %>
 
   const clearError = useCallback(() => setError(null), []);
 
@@ -363,5 +601,21 @@ export const useAuth = () => {
     deleteAccount,
     clearError,
     refetch,
+<% if (features.authentication.twoFactor) { %>
+    // 2FA login verification
+    verifyTotpLogin,
+    verifyBackupCode,
+    // 2FA expiration state
+    twoFactorExpiresAt,
+    setTwoFactorExpiration,
+    clearTwoFactorState,
+    // 2FA setup/management
+    enableTwoFactor,
+    verifyTotpSetup,
+    disableTwoFactor,
+    generateBackupCodes,
+    checkHasPassword,
+    setInitialPassword,
+<% } %>
   };
 };

package/templates/features/mobile/auth/hooks/two-factor-timeout.ts.ejs

@@ -0,0 +1,56 @@
+import { useEffect, useCallback } from 'react';
+import { useRouter } from 'expo-router';
+import { useAuth } from './auth';
+
+/**
+ * Hook for managing 2FA session timeout
+ *
+ * - Automatically redirects to expired screen when timeout occurs
+ * - Provides `isExpired()` check for pre-submission validation
+ * - Uses absolute Unix timestamps (not relative durations)
+ */
+export function useTwoFactorTimeout() {
+  const router = useRouter();
+  const { twoFactorExpiresAt, clearTwoFactorState } = useAuth();
+
+  const handleExpiration = useCallback(async () => {
+    await clearTwoFactorState();
+    router.replace('/(auth)/two-factor-expired');
+  }, [clearTwoFactorState, router]);
+
+  useEffect(() => {
+    if (!twoFactorExpiresAt) return;
+
+    const now = Math.floor(Date.now() / 1000);
+    const remainingMs = (twoFactorExpiresAt - now) * 1000;
+
+    // Already expired
+    if (remainingMs <= 0) {
+      handleExpiration();
+      return;
+    }
+
+    // Schedule redirect at exact expiration time
+    const timeout = setTimeout(handleExpiration, remainingMs);
+    return () => clearTimeout(timeout);
+  }, [twoFactorExpiresAt, handleExpiration]);
+
+  // Utility to check expiration before submission
+  const isExpired = useCallback((): boolean => {
+    if (!twoFactorExpiresAt) return true;
+    return Math.floor(Date.now() / 1000) >= twoFactorExpiresAt;
+  }, [twoFactorExpiresAt]);
+
+  // Calculate remaining time for UI display (optional)
+  const getRemainingSeconds = useCallback((): number => {
+    if (!twoFactorExpiresAt) return 0;
+    const remaining = twoFactorExpiresAt - Math.floor(Date.now() / 1000);
+    return Math.max(0, remaining);
+  }, [twoFactorExpiresAt]);
+
+  return {
+    isExpired,
+    twoFactorExpiresAt,
+    getRemainingSeconds,
+  };
+}

package/templates/features/mobile/auth/services/{deviceSession.ts → device-session.ts}

@@ -6,16 +6,8 @@ import { Platform } from 'react-native';
 import * as Application from 'expo-application';
 import * as SecureStore from 'expo-secure-store';
 
-export interface DeviceSession {
-  id: string;
-  deviceId: string;
-  sessionToken: string;
-  createdAt: string;
-  lastActiveAt: string;
-  migrated: boolean;
-  migratedToUserId?: string;
-  preferredCurrency: string;
-}
+export type { DeviceSession } from '../types/device-session';
+import type { DeviceSession } from '../types/device-session';
 
 export interface CreateDeviceSessionResponse {
   session: DeviceSession;

package/templates/features/mobile/auth/store/{deviceSession.store.ts → device-session-store.ts}

@@ -1,8 +1,10 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { deviceSessionService, DeviceSession, DeviceSessionMigrationEligibilityResponse } from '../services/deviceSession';
+import { deviceSessionService, DeviceSessionMigrationEligibilityResponse } from '../services/device-session';
+import type { DeviceSession } from '../types/device-session';
 import { logger } from '../utils/logger';
+import { useUIStore } from '@/store/ui-store';
 
 export interface MigrateSessionData {
   name: string;
@@ -158,17 +160,24 @@ export const useSessionStore = create<SessionState>()(
     isSessionValid: async () => {
       try {
         logger.debug('SessionStore: Checking session validity...');
-        
+
         const isValid = await deviceSessionService.isDeviceSessionValid();
-        
+
         if (!isValid && get().session) {
           // Session became invalid, clear it
           logger.warn('SessionStore: Session is no longer valid, clearing');
           set({ session: null, sessionToken: null, error: 'Session expired' });
+
+          // Show toast notification
+          useUIStore.getState().showNotification({
+            type: 'error',
+            title: 'Session Expired',
+            message: 'Your session has expired. Please sign in again.',
+          });
         }
-        
+
         return isValid;
-        
+
       } catch (error) {
         logger.error('SessionStore: Error checking session validity', { error });
         return false;

package/templates/features/mobile/auth/types/device-session.ts

@@ -0,0 +1,37 @@
+// Base session properties shared by all states
+interface BaseDeviceSession {
+  id: string;
+  deviceId: string;
+  sessionToken: string;
+  createdAt: string;
+  lastActiveAt: string;
+  preferredCurrency: string;
+}
+
+// Active (non-migrated) session
+interface ActiveDeviceSession extends BaseDeviceSession {
+  migrated: false;
+  migratedToUserId: null;
+}
+
+// Migrated session (device was linked to a user account)
+interface MigratedDeviceSession extends BaseDeviceSession {
+  migrated: true;
+  migratedToUserId: string;
+}
+
+// Discriminated union - TypeScript will narrow based on `migrated` field
+export type DeviceSession = ActiveDeviceSession | MigratedDeviceSession;
+
+// Type guards for explicit narrowing when needed
+export function isMigratedSession(
+  session: DeviceSession
+): session is MigratedDeviceSession {
+  return session.migrated === true;
+}
+
+export function isActiveSession(
+  session: DeviceSession
+): session is ActiveDeviceSession {
+  return session.migrated === false;
+}

package/templates/features/mobile/onboarding/app/(onboarding)/page-1.tsx.ejs

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Image, StyleSheet } from 'react-native';
 import { router } from 'expo-router';
-import OnboardingLayout from '@/components/ui/OnboardingLayout';
+import OnboardingLayout from '@/components/ui/onboarding-layout';
 import { responsive } from '@/utils/responsive';
 
 export default function OnboardingPage1() {
@@ -9,6 +9,8 @@ export default function OnboardingPage1() {
     <% if (features.onboarding.pages === 1) { %>
       <% if (features.paywall) { %>
     router.replace('/paywall');
+      <% } else if (features.authentication.enabled) { %>
+    router.replace('/(public)');
       <% } else { %>
     router.replace('/(tabs)');
       <% } %>

package/templates/features/mobile/onboarding/app/(onboarding)/page-2.tsx.ejs

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Image, StyleSheet } from 'react-native';
 import { router } from 'expo-router';
-import OnboardingLayout from '@/components/ui/OnboardingLayout';
+import OnboardingLayout from '@/components/ui/onboarding-layout';
 import { responsive } from '@/utils/responsive';
 
 export default function OnboardingPage2() {
@@ -9,6 +9,8 @@ export default function OnboardingPage2() {
     <% if (features.onboarding.pages === 2) { %>
       <% if (features.paywall) { %>
     router.replace('/paywall');
+      <% } else if (features.authentication.enabled) { %>
+    router.replace('/(public)');
       <% } else { %>
     router.replace('/(tabs)');
       <% } %>

package/templates/features/mobile/onboarding/app/(onboarding)/page-3.tsx.ejs

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Image, StyleSheet } from 'react-native';
 import { router } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import OnboardingLayout from '@/components/ui/OnboardingLayout';
+import OnboardingLayout from '@/components/ui/onboarding-layout';
 import { responsive } from '@/utils/responsive';
 
 export default function OnboardingPage3() {
@@ -11,6 +11,9 @@ export default function OnboardingPage3() {
       await AsyncStorage.setItem('onboarding_completed', 'true');
       <% if (features.paywall) { %>
       router.replace('/paywall');
+      <% } else if (features.authentication.enabled) { %>
+      // Navigate to landing page for unauthenticated users
+      router.replace('/(public)');
       <% } else { %>
       router.replace('/(tabs)');
       <% } %>
@@ -18,6 +21,8 @@ export default function OnboardingPage3() {
       console.error('Failed to save onboarding completion status:', error);
       <% if (features.paywall) { %>
       router.replace('/paywall');
+      <% } else if (features.authentication.enabled) { %>
+      router.replace('/(public)');
       <% } else { %>
       router.replace('/(tabs)');
       <% } %>

package/templates/features/mobile/paywall/app/paywall.tsx

@@ -7,13 +7,13 @@ import {
   Alert,
   ActivityIndicator,
 } from 'react-native';
-import { IconSymbol } from '../src/components/ui/IconSymbol';
-import { Theme } from '@/constants/Theme';
+import { IconSymbol } from '../src/components/ui/icon-symbol';
+import { Theme } from '@/constants/theme';
 import { router, Stack } from 'expo-router';
-import { useRevenueCat, useRevenueCatActions } from '../src/store/revenuecat.store';
+import { useRevenueCat, useRevenueCatActions } from '../src/store/revenuecat-store';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { logger } from '../src/utils/logger';
-import OnboardingLayout from '../src/components/ui/OnboardingLayout';
+import OnboardingLayout from '../src/components/ui/onboarding-layout';
 import { responsive, fontSize, getSpacing } from '@/utils/responsive';
 
 interface PlanOption {

package/templates/features/mobile/tabs/app/(tabs)/_layout.tsx

@@ -1,13 +1,7 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
-import { useAuth } from '../../src/hooks';
 
 export default function TabLayout() {
-  const { isAuthenticated } = useAuth();
-
-  // This layout should only render if user is authenticated
-  // The root layout handles the redirect
-
   return (
     <Tabs
       screenOptions={{

package/templates/features/mobile/tabs/app/(tabs)/_layout.tsx.ejs

@@ -0,0 +1,60 @@
+import { Tabs } from 'expo-router';
+import React from 'react';
+<% if (features.authentication.enabled) { %>
+import { ProtectedScreen } from '../../src/components/auth/protected-screen';
+import { IconSymbol } from '../../src/components/ui/icon-symbol';
+import { useAppTheme } from '@/context/theme-context';
+<% } %>
+
+export default function TabLayout() {
+<% if (features.authentication.enabled) { %>
+  const theme = useAppTheme();
+
+  return (
+    <ProtectedScreen>
+      <Tabs
+        screenOptions={{
+          headerShown: false,
+          tabBarActiveTintColor: theme.colors.primary,
+          tabBarInactiveTintColor: theme.colors.textSecondary,
+          tabBarStyle: {
+            backgroundColor: theme.colors.background,
+            borderTopColor: theme.colors.border,
+          },
+        }}
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: 'Home',
+            tabBarIcon: ({ color }) => <IconSymbol name="house.fill" size={24} color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="settings"
+          options={{
+            title: 'Settings',
+            tabBarIcon: ({ color }) => <IconSymbol name="gearshape.fill" size={24} color={color} />,
+          }}
+        />
+      </Tabs>
+    </ProtectedScreen>
+  );
+<% } else { %>
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: { display: 'none' },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+        }}
+      />
+    </Tabs>
+  );
+<% } %>
+}