create-stackr 0.2.0 → 0.3.0

package/templates/base/web/src/proxy.ts.ejs

@@ -21,13 +21,23 @@ const protectedRoutes = ["/dashboard", "/settings", "/profile"];
 // Routes that should redirect to dashboard if already authenticated
 const authRoutes = ["/login", "/register", "/forgot-password"];
 
-// Routes that are always public
-const publicRoutes = ["/", "/auth/callback", "/reset-password", "/verify-email"];
+// Routes that are always public (including 2FA verification which needs session but shouldn't redirect)
+const publicRoutes = ["/", "/auth/callback", "/auth/session-expired", "/reset-password", "/verify-email"<% if (features.authentication.twoFactor) { %>, "/login/two-factor", "/auth/two-factor-expired"<% } %>];
 
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
   const sessionToken = request.cookies.get(COOKIE_NAMES.SESSION)?.value;
 
+  // Check if current path matches any public routes (these always pass through)
+  const isPublicRoute = publicRoutes.some(
+    (route) => pathname === route || pathname.startsWith(`${route}/`)
+  );
+
+  // Public routes always pass through
+  if (isPublicRoute) {
+    return NextResponse.next();
+  }
+
   // Check if current path matches any protected routes
   const isProtectedRoute = protectedRoutes.some(
     (route) => pathname === route || pathname.startsWith(`${route}/`)

package/templates/base/web/src/store/{deviceSession.store.ts.ejs → device-session-store.ts.ejs}

@@ -7,8 +7,8 @@ import {
   createDeviceSession,
   validateDeviceSession,
   updateDeviceActivity,
-  type DeviceSession,
 } from "@/lib/device/actions";
+import type { DeviceSession } from "@/lib/device/types";
 
 interface DeviceSessionState {
   // State

package/templates/features/mobile/auth/app/(auth)/{_layout.tsx → _layout.tsx.ejs}

@@ -11,6 +11,13 @@ export default function AuthLayout() {
     >
       <Stack.Screen name="login" />
       <Stack.Screen name="register" />
+      <Stack.Screen name="two-factor" />
+      <Stack.Screen
+        name="two-factor-expired"
+        options={{
+          gestureEnabled: false,
+        }}
+      />
     </Stack>
   );
 }

package/templates/features/mobile/auth/app/(auth)/{login.tsx → login.tsx.ejs}

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo } from 'react';
 import { View, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
 import { router, Stack } from 'expo-router';
-import { LoginForm } from '../../src/components/auth';
-import { IconSymbol } from '../../src/components/ui/IconSymbol';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
-import { useAuth } from '../../src/hooks';
+import { LoginForm } from '../../src/components/auth/login-form';
+import { IconSymbol } from '../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+import { useAuth } from '../../src/hooks/auth';
 
 export default function LoginScreen() {
   const theme = useAppTheme();
@@ -12,16 +12,17 @@ export default function LoginScreen() {
 
   const { isAuthenticated } = useAuth();
 
-  // Watch for auth state changes (handles both native and browser OAuth)
+  // Watch for auth state changes - close modal when authenticated
+  // Root layout handles routing based on email verification status
   useEffect(() => {
     if (isAuthenticated) {
-      router.replace('/(tabs)');
+      // Close the auth modal - root layout will handle navigation
+      router.back();
     }
   }, [isAuthenticated]);
 
   const handleLoginSuccess = () => {
-    // Navigate to the main app (for email/password login)
-    router.replace('/(tabs)');
+    // Navigation handled by useEffect watching isAuthenticated
   };
 
   const handleSwitchToRegister = () => {

package/templates/features/mobile/auth/app/(auth)/{register.tsx → register.tsx.ejs}

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo } from 'react';
 import { View, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
 import { router, Stack } from 'expo-router';
-import { RegisterForm } from '../../src/components/auth';
-import { IconSymbol } from '../../src/components/ui/IconSymbol';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
-import { useAuth } from '../../src/hooks';
+import { RegisterForm } from '../../src/components/auth/register-form';
+import { IconSymbol } from '../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+import { useAuth } from '../../src/hooks/auth';
 
 export default function RegisterScreen() {
   const theme = useAppTheme();
@@ -12,16 +12,17 @@ export default function RegisterScreen() {
 
   const { isAuthenticated } = useAuth();
 
-  // Watch for auth state changes (handles both native and browser OAuth)
+  // Watch for auth state changes - close modal when authenticated
+  // Root layout handles routing based on email verification status
   useEffect(() => {
     if (isAuthenticated) {
-      router.replace('/(tabs)');
+      // Close the auth modal - root layout will handle navigation
+      router.back();
     }
   }, [isAuthenticated]);
 
   const handleRegisterSuccess = () => {
-    // Navigate to the main app (for email/password registration)
-    router.replace('/(tabs)');
+    // Navigation handled by useEffect watching isAuthenticated
   };
 
   const handleSwitchToLogin = () => {

package/templates/features/mobile/auth/app/(auth)/two-factor-expired.tsx.ejs

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
+import { useRouter } from 'expo-router';
+import { Button } from '../../src/components/ui/button';
+import { IconSymbol } from '../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+import { useAuth } from '../../src/hooks/auth';
+
+export default function TwoFactorExpiredScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const { clearTwoFactorState } = useAuth();
+
+  const handleReturnToLogin = async () => {
+    // Clear the expired 2FA state before navigating back
+    await clearTwoFactorState();
+    // Navigate back to the existing login screen instead of creating a new one
+    // This prevents duplicate login modals in the navigation stack
+    if (router.canGoBack()) {
+      router.back();
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+        <View style={styles.content}>
+          <View style={styles.iconContainer}>
+            <IconSymbol
+              name="exclamationmark.triangle.fill"
+              size={48}
+              color={theme.colors.warning ?? theme.colors.error}
+            />
+          </View>
+          <Text style={styles.title}>Verification Expired</Text>
+          <Text style={styles.description}>
+            Your two-factor verification session has expired for security reasons.
+            Please sign in again to continue.
+          </Text>
+          <Button
+            onPress={handleReturnToLogin}
+            title="Return to Login"
+            style={styles.button}
+          />
+        </View>
+    </SafeAreaView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.spacing[6],
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: (theme.colors.warning ?? theme.colors.error) + '15',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  title: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: 'bold',
+    color: theme.colors.text,
+    marginBottom: theme.spacing[2],
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+    marginBottom: theme.spacing[6],
+    lineHeight: 24,
+    paddingHorizontal: theme.spacing[4],
+  },
+  button: {
+    minWidth: 200,
+  },
+});

package/templates/features/mobile/auth/app/(auth)/two-factor.tsx.ejs

@@ -0,0 +1,259 @@
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert,
+  Switch,
+} from 'react-native';
+import { router } from 'expo-router';
+import { Button } from '../../src/components/ui/button';
+import { Input } from '../../src/components/ui/input';
+import { IconSymbol } from '../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+import { useAuth } from '../../src/hooks/auth';
+import { useTwoFactorTimeout } from '../../src/hooks/two-factor-timeout';
+
+export default function TwoFactorScreen() {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const { verifyTotpLogin, verifyBackupCode, isLoading } = useAuth();
+  const { isExpired } = useTwoFactorTimeout();
+
+  const [code, setCode] = useState('');
+  const [trustDevice, setTrustDevice] = useState(false);
+  const [useBackupCode, setUseBackupCode] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleVerify = async () => {
+    if (!code.trim()) {
+      setError('Please enter a code');
+      return;
+    }
+
+    // Check if session has expired before submitting
+    if (isExpired()) {
+      router.replace('/(auth)/two-factor-expired');
+      return;
+    }
+
+    setError(null);
+
+    const result = useBackupCode
+      ? await verifyBackupCode(code.trim())
+      : await verifyTotpLogin(code.trim(), trustDevice);
+
+    if (result.success) {
+      // Authentication complete - close auth modal
+      // Root layout will handle navigation based on auth state
+      if (router.canGoBack()) {
+        router.back();
+      }
+    } else {
+      Alert.alert('Verification Failed', result.error || 'Invalid code. Please try again.');
+    }
+  };
+
+  const handleBack = () => {
+    if (router.canGoBack()) {
+      router.back();
+    }
+  };
+
+  const toggleMode = () => {
+    setUseBackupCode(!useBackupCode);
+    setCode('');
+    setError(null);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+        {/* Back Button */}
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={handleBack}
+          activeOpacity={0.7}
+        >
+          <IconSymbol
+            name="chevron.left"
+            size={24}
+            color={theme.colors.text}
+          />
+        </TouchableOpacity>
+
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.keyboardView}
+        >
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+          >
+            <View style={styles.form}>
+              {/* Icon */}
+              <View style={styles.iconContainer}>
+                <IconSymbol
+                  name={useBackupCode ? 'key.fill' : 'lock.shield.fill'}
+                  size={48}
+                  color={theme.colors.primary}
+                />
+              </View>
+
+              <Text style={styles.title}>
+                {useBackupCode ? 'Enter Backup Code' : 'Two-Factor Authentication'}
+              </Text>
+              <Text style={styles.subtitle}>
+                {useBackupCode
+                  ? 'Enter one of your backup codes to sign in'
+                  : 'Enter the 6-digit code from your authenticator app'}
+              </Text>
+
+              <Input
+                label={useBackupCode ? 'Backup Code' : 'Verification Code'}
+                value={code}
+                onChangeText={(text) => {
+                  // For TOTP, only allow digits and limit to 6
+                  const value = useBackupCode
+                    ? text
+                    : text.replace(/\D/g, '').slice(0, 6);
+                  setCode(value);
+                  if (error) setError(null);
+                }}
+                placeholder={useBackupCode ? 'Enter backup code' : '000000'}
+                keyboardType={useBackupCode ? 'default' : 'number-pad'}
+                autoCapitalize="none"
+                autoComplete="one-time-code"
+                maxLength={useBackupCode ? 20 : 6}
+                error={error || undefined}
+                containerStyle={styles.inputContainer}
+              />
+
+              {!useBackupCode && (
+                <View style={styles.trustDeviceContainer}>
+                  <Text style={styles.trustDeviceText}>
+                    Trust this device for 30 days
+                  </Text>
+                  <Switch
+                    value={trustDevice}
+                    onValueChange={setTrustDevice}
+                    trackColor={{
+                      false: theme.colors.border,
+                      true: theme.colors.primary,
+                    }}
+                    thumbColor={theme.colors.background}
+                  />
+                </View>
+              )}
+
+              <Button
+                title="Verify"
+                onPress={handleVerify}
+                loading={isLoading}
+                disabled={isLoading}
+                style={styles.submitButton}
+              />
+
+              <TouchableOpacity
+                onPress={toggleMode}
+                style={styles.toggleButton}
+                activeOpacity={0.7}
+              >
+                <Text style={styles.toggleButtonText}>
+                  {useBackupCode
+                    ? 'Use authenticator app instead'
+                    : 'Use a backup code instead'}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  backButton: {
+    position: 'absolute',
+    top: 60,
+    left: 16,
+    width: 44,
+    height: 44,
+    backgroundColor: theme.colors.backgroundSecondary,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    ...theme.shadows.small,
+  },
+  keyboardView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: theme.spacing[5],
+  },
+  form: {
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: theme.colors.primary + '15',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  title: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: 'bold',
+    color: theme.colors.text,
+    textAlign: 'center',
+    marginBottom: theme.spacing[2],
+  },
+  subtitle: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+    marginBottom: theme.spacing[8],
+  },
+  inputContainer: {
+    marginBottom: theme.spacing[4],
+  },
+  trustDeviceContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing[6],
+    paddingHorizontal: theme.spacing[1],
+  },
+  trustDeviceText: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textSecondary,
+  },
+  submitButton: {
+    marginBottom: theme.spacing[4],
+  },
+  toggleButton: {
+    alignItems: 'center',
+    paddingVertical: theme.spacing[2],
+  },
+  toggleButtonText: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.primary,
+    fontWeight: '500',
+  },
+});

package/templates/features/mobile/auth/app/(public)/_layout.tsx

@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router';
+
+export default function PublicLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}