create-stackr 0.2.0 → 0.3.0

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

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, Text, Pressable, Platform } from "react-native";
+import { useUI, useUIActions } from "@/store/ui-store";
+
+const COLORS = {
+  success: { bg: "#dcfce7", border: "#16a34a", text: "#166534" },
+  error: { bg: "#fee2e2", border: "#dc2626", text: "#991b1b" },
+  warning: { bg: "#fef3c7", border: "#d97706", text: "#92400e" },
+  info: { bg: "#dbeafe", border: "#2563eb", text: "#1e40af" },
+};
+
+export function Toast() {
+  const { notification } = useUI();
+  const { hideNotification } = useUIActions();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(-100)).current;
+
+  useEffect(() => {
+    if (notification) {
+      // Animate in
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      // Animate out (store handles auto-hide timing)
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: -100,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [notification, opacity, translateY]);
+
+  if (!notification) return null;
+
+  const colors = COLORS[notification.type];
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity,
+          transform: [{ translateY }],
+          backgroundColor: colors.bg,
+          borderColor: colors.border,
+        },
+      ]}
+    >
+      <Pressable onPress={hideNotification} style={styles.content}>
+        <Text style={[styles.title, { color: colors.text }]}>
+          {notification.title}
+        </Text>
+        {notification.message && (
+          <Text style={[styles.message, { color: colors.text }]}>
+            {notification.message}
+          </Text>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: Platform.OS === "ios" ? 60 : 40,
+    left: 16,
+    right: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    zIndex: 9999,
+    elevation: 10, // Android shadow
+    shadowColor: "#000", // iOS shadow
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+  },
+  content: {
+    padding: 16,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  message: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+});

package/templates/base/mobile/src/components/ui/{IconSymbol.tsx → icon-symbol.tsx}

@@ -22,6 +22,8 @@ const MAPPING = {
   "arrow.left": "arrow-back",
   magnifyingglass: "search",
   "person.fill": "person",
+  "person.circle.fill": "account-circle",
+  "rectangle.portrait.and.arrow.right": "logout",
   "doc.text": "description",
   calendar: "event",
   checkmark: "check",
@@ -58,6 +60,11 @@ const MAPPING = {
   "videocam.fill": "videocam",
   sparkles: "auto-awesome",
   infinity: "all-inclusive",
+  // 2FA-specific icons
+  "key.fill": "vpn-key",
+  "checkmark.shield.fill": "verified-user",
+  "shield.slash.fill": "remove-moderator",
+  "gearshape.fill": "settings",
 } as const;
 
 export type IconSymbolName = keyof typeof MAPPING;

package/templates/base/mobile/src/components/ui/{LoadingSpinner.tsx → loading-spinner.tsx}

@@ -7,7 +7,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { useAppTheme } from '@/context/ThemeContext';
+import { useAppTheme } from '@/context/theme-context';
 
 interface LoadingSpinnerProps {
   size?: 'small' | 'large';

package/templates/base/mobile/src/components/ui/{OnboardingLayout.tsx → onboarding-layout.tsx}

@@ -9,8 +9,8 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { IconSymbol } from './IconSymbol';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { IconSymbol } from './icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
 import { responsive, fontSize, getSpacing } from '@/utils/responsive';
 
 interface OnboardingLayoutProps {

package/templates/base/mobile/src/components/ui/{PaywallLayout.tsx → paywall-layout.tsx}

@@ -9,9 +9,9 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { IconSymbol } from './IconSymbol';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
-import { createTheme } from '@/constants/Theme';
+import { IconSymbol } from './icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+import { createTheme } from '@/constants/theme';
 import { responsive, fontSize, getSpacing } from '@/utils/responsive';
 
 type ThemeType = 'light' | 'dark';

package/templates/base/mobile/src/constants/Theme.ts

@@ -51,8 +51,8 @@ const fontFamily = Platform.OS === 'ios'
 // Light theme colors (monochrome primary matching web)
 const lightColors = {
   background: palette.neutral[0],
-  backgroundSecondary: palette.neutral[50],
-  backgroundTertiary: palette.neutral[100],
+  backgroundSecondary: palette.neutral[100], // More distinct from white background
+  backgroundTertiary: palette.neutral[200],
   card: palette.neutral[0],
 
   text: palette.neutral[950],
@@ -82,7 +82,7 @@ const lightColors = {
 // Dark theme colors (monochrome primary matching web)
 const darkColors = {
   background: palette.neutral[950],
-  backgroundSecondary: palette.neutral[900],
+  backgroundSecondary: 'rgba(255, 255, 255, 0.04)', // Subtle overlay, less prominent
   backgroundTertiary: palette.neutral[800],
   card: palette.neutral[900],
 

package/templates/base/mobile/src/context/{ThemeContext.tsx → theme-context.tsx}

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useState, useEffect, useMemo, useCall
 import { useColorScheme, Appearance } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { StatusBar } from 'expo-status-bar';
-import { createTheme, ThemeMode, AppTheme } from '@/constants/Theme';
+import { createTheme, ThemeMode, AppTheme } from '@/constants/theme';
 
 const THEME_STORAGE_KEY = '@app_theme_mode';
 
@@ -154,4 +154,4 @@ export function useAppTheme(): AppTheme {
 }
 
 // Re-export AppTheme for convenience (so components can import from one place)
-export type { AppTheme } from '@/constants/Theme';
+export type { AppTheme } from '@/constants/theme';

package/templates/base/mobile/src/lib/auth-client.ts.ejs

@@ -1,5 +1,11 @@
 import { createAuthClient } from "better-auth/react";
 import { expoClient } from "@better-auth/expo/client";
+<% if (features.authentication.emailVerification) { %>
+import { emailOTPClient } from "better-auth/client/plugins";
+<% } %>
+<% if (features.authentication.twoFactor) { %>
+import { twoFactorClient } from "better-auth/client/plugins";
+<% } %>
 import * as SecureStore from "expo-secure-store";
 import Constants from "expo-constants";
 
@@ -25,6 +31,12 @@ export const authClient = createAuthClient({
       storagePrefix: APP_SCHEME,    // Prefix for secure storage keys
       storage: SecureStore,         // Use secure storage (not AsyncStorage!)
     }),
+<% if (features.authentication.emailVerification) { %>
+    emailOTPClient(),
+<% } %>
+<% if (features.authentication.twoFactor) { %>
+    twoFactorClient(),
+<% } %>
   ],
 });
 
@@ -35,6 +47,12 @@ export const {
   signOut,
   useSession,
   getSession,
+<% if (features.authentication.emailVerification) { %>
+  emailOtp,
+<% } %>
+<% if (features.authentication.twoFactor) { %>
+  twoFactor,
+<% } %>
 } = authClient;
 
 /**

package/templates/base/mobile/src/services/{sdkInitializer.ts.ejs → sdk-initializer.ts.ejs}

@@ -1,8 +1,8 @@
 <% if (integrations.att.enabled) { %>import { Platform } from 'react-native';
-import { useATTStore } from '@/store/att.store';
-<% } %><% if (integrations.revenueCat.enabled) { %>import { revenueCatService } from './revenuecatService';
-<% } %><% if (integrations.adjust.enabled) { %>import { adjustService } from './adjustService';
-<% } %><% if (integrations.scate.enabled) { %>import { scateService } from './scateService';
+import { useATTStore } from '@/store/att-store';
+<% } %><% if (integrations.revenueCat.enabled) { %>import { revenueCatService } from './revenuecat-service';
+<% } %><% if (integrations.adjust.enabled) { %>import { adjustService } from './adjust-service';
+<% } %><% if (integrations.scate.enabled) { %>import { scateService } from './scate-service';
 <% } %>
 export const initializeSDKs = async () => {
   try {

package/templates/base/web/.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+out
+dist
+coverage
+*.min.js

package/templates/base/web/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/base/web/eslint.config.mjs

@@ -1,18 +1,42 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
 
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      "simple-import-sort/imports": [
+        "error",
+        {
+          groups: [
+            // Node.js builtins
+            ["^node:"],
+            // React and Next.js
+            ["^react", "^next"],
+            // External packages
+            ["^@?\\w"],
+            // Internal paths (aliases)
+            ["^@/"],
+            // Parent imports
+            ["^\\.\\."],
+            // Sibling imports
+            ["^\\."],
+            // Style imports
+            ["^.+\\.css$"],
+          ],
+        },
+      ],
+      "simple-import-sort/exports": "error",
+    },
+  },
   // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
 ]);
 
 export default eslintConfig;

package/templates/base/web/next.config.ts

@@ -1,7 +1,56 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Hide X-Powered-By header for security
+  poweredByHeader: false,
+
+  // Enable React strict mode for development
+  reactStrictMode: true,
+
+  // Configure allowed image sources
+  // NOTE: hostname "**" allows all domains - intentionally permissive for scaffolding.
+  // Users should restrict this in production to their specific CDN/image domains.
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+
+  // Security headers
+  async headers() {
+    return [
+      {
+        // Apply to all routes (/:path* handles i18n correctly unlike /(.*))
+        source: "/:path*",
+        headers: [
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "DENY",
+          },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=()",
+          },
+          {
+            // HSTS - enforce HTTPS connections
+            key: "Strict-Transport-Security",
+            value: "max-age=31536000; includeSubDomains",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

package/templates/base/web/package.json.ejs

@@ -6,7 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
@@ -18,7 +22,12 @@
     "@radix-ui/react-label": "^2.1.8",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tailwind-merge": "^3.4.0"<% if (features.authentication.enabled || features.sessionManagement) { %>,
+    "tailwind-merge": "^3.4.0"<% if (features.authentication.enabled) { %>,
+    "sonner": "^1.7.1"<% } %><% if (features.authentication.emailVerification) { %>,
+    "input-otp": "^1.4.2"<% } %><% if (features.authentication.twoFactor) { %>,
+    "react-qr-code": "^2.0.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15"<% } %><% if (features.authentication.enabled || features.sessionManagement) { %>,
     "zustand": "^5.0.2"<% } %>
   },
   "devDependencies": {
@@ -28,6 +37,9 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"

package/templates/base/web/src/app/globals.css

@@ -116,7 +116,7 @@
   --accent: #27272a;
   --accent-foreground: #fafafa;
 
-  --destructive: #7f1d1d;
+  --destructive: #dc2626;
   --destructive-foreground: #fafafa;
 
   --border: #27272a;

package/templates/base/web/src/app/layout.tsx.ejs

@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/components/providers/theme-provider";
 <% if (features.authentication.enabled) { %>
 import { AuthHydrator } from "@/components/auth/auth-hydrator";
 import { getSession } from "@/lib/auth/actions";
+import { Toaster } from "sonner";
 <% } %>
 <% if (features.sessionManagement) { %>
 import { DeviceSessionSetup } from "@/components/providers/device-session-setup";
@@ -42,6 +43,7 @@ export default async function RootLayout({
         <ThemeProvider>
 <% if (features.authentication.enabled) { %>
           <AuthHydrator session={session} />
+          <Toaster position="top-center" richColors />
 <% } %>
 <% if (features.sessionManagement) { %>
           <DeviceSessionSetup />

package/templates/base/web/src/components/auth/protected-route.tsx.ejs

@@ -3,8 +3,9 @@
 import { useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "@/hooks/use-session";
-import { getSession } from "@/lib/auth/actions";
-import { useAuthActions } from "@/store/auth.store";
+import { getSession, signOut } from "@/lib/auth/actions";
+import { toast } from "sonner";
+import { useAuthActions, useAuthStore } from "@/store/auth.store";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -41,8 +42,9 @@ export function ProtectedRoute({
   redirectTo = "/login",
   loadingComponent,
 }: ProtectedRouteProps) {
-  const { isAuthenticated, isLoading } = useSession();
+  const { isAuthenticated, isLoading, user } = useSession();
   const { handleAuthError } = useAuthActions();
+  const authError = useAuthStore((state) => state.error);
   const router = useRouter();
 
   // Revalidate session when window regains focus
@@ -52,7 +54,9 @@ export function ProtectedRoute({
 
     const session = await getSession();
     if (!session) {
-      // Session expired on backend - update UI state
+      // Session expired on backend - call signOut to properly clear cookie via Server Action
+      // This ensures the browser gets the Set-Cookie header to clear the cookie
+      await signOut();
       handleAuthError();
     }
   }, [isAuthenticated, handleAuthError]);
@@ -66,12 +70,28 @@ export function ProtectedRoute({
   // Redirect when not authenticated
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
+      // Show toast if this was a session expiration
+      if (authError === "Session expired") {
+        toast.error("Session Expired", {
+          description: "Your session has expired. Please sign in again.",
+        });
+      }
+
       // Include current path as redirect parameter
       const currentPath = window.location.pathname;
       const loginUrl = `${redirectTo}?redirect=${encodeURIComponent(currentPath)}`;
       router.push(loginUrl);
     }
-  }, [isAuthenticated, isLoading, redirectTo, router]);
+  }, [isAuthenticated, isLoading, redirectTo, router, authError]);
+
+<% if (features.authentication.emailVerification) { %>
+  // Redirect when email is not verified
+  useEffect(() => {
+    if (!isLoading && isAuthenticated && user && user.emailVerified === false) {
+      router.push(`/verify-email?email=${encodeURIComponent(user.email)}`);
+    }
+  }, [isAuthenticated, isLoading, user, router]);
+<% } %>
 
   // Show loading state
   if (isLoading) {
@@ -89,6 +109,13 @@ export function ProtectedRoute({
     return null;
   }
 
+<% if (features.authentication.emailVerification) { %>
+  // Don't render content if email is not verified
+  if (user && user.emailVerified === false) {
+    return null;
+  }
+<% } %>
+
   return <>{children}</>;
 }
 

package/templates/base/web/src/components/providers/device-session-setup.tsx.ejs

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import {
   useDeviceSessionStore,
   useDeviceSessionActions,
-} from "@/store/deviceSession.store";
+} from "@/store/device-session-store";
 import { AUTH_CONFIG } from "@/lib/auth/config";
 
 /**

package/templates/base/web/src/hooks/use-device-session.ts.ejs

@@ -3,7 +3,7 @@
 import {
   useDeviceSession as useDeviceSessionStore,
   useDeviceSessionActions,
-} from "@/store/deviceSession.store";
+} from "@/store/device-session-store";
 
 /**
  * Hook to access the current device session
@@ -37,4 +37,4 @@ export function useDeviceSession() {
 }
 
 // Re-export store hooks for direct access when needed
-export { useDeviceSessionStore, useDeviceSessionActions } from "@/store/deviceSession.store";
+export { useDeviceSessionStore, useDeviceSessionActions } from "@/store/device-session-store";