create-stackr 0.2.0

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

@@ -0,0 +1,51 @@
+import { createAuthClient } from "better-auth/react";
+import { expoClient } from "@better-auth/expo/client";
+import * as SecureStore from "expo-secure-store";
+import Constants from "expo-constants";
+
+// Get API URL from Expo config or default
+const API_URL = Constants.expoConfig?.extra?.apiUrl || "http://localhost:8080";
+
+// Get app scheme from Expo config (defined at expo.scheme in app.json)
+const APP_SCHEME = Constants.expoConfig?.scheme || "<%= appScheme %>";
+
+/**
+ * BetterAuth client configured for Expo/React Native
+ *
+ * Features:
+ * - Automatic OAuth deep link handling (callbackURL paths become deep links)
+ * - Secure session storage via expo-secure-store
+ * - Session caching to avoid loading spinners on app reload
+ */
+export const authClient = createAuthClient({
+  baseURL: API_URL,
+  plugins: [
+    expoClient({
+      scheme: APP_SCHEME,           // Must match app.json scheme
+      storagePrefix: APP_SCHEME,    // Prefix for secure storage keys
+      storage: SecureStore,         // Use secure storage (not AsyncStorage!)
+    }),
+  ],
+});
+
+// Export commonly used methods and hooks
+export const {
+  signIn,
+  signUp,
+  signOut,
+  useSession,
+  getSession,
+} = authClient;
+
+/**
+ * Get cookies for authenticated API requests
+ * Use this when making custom API calls that need authentication
+ *
+ * @example
+ * const cookies = getCookies();
+ * const response = await fetch(url, {
+ *   headers: { "Cookie": cookies || "" },
+ *   credentials: "omit"
+ * });
+ */
+export const getCookies = () => authClient.getCookie();

package/templates/base/mobile/src/services/api.ts.ejs

@@ -0,0 +1,71 @@
+import axios from 'axios';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Constants from 'expo-constants';
+<% if (features.authentication.enabled) { %>
+import { authClient } from '../lib/auth-client';
+<% } %>
+
+// Storage key for device sessions (anonymous users)
+const DEVICE_SESSION_TOKEN_KEY = 'device_session_token';
+
+// API Configuration
+const API_URL = Constants.expoConfig?.extra?.apiUrl || 'http://localhost:8080';
+
+const api = axios.create({
+  baseURL: API_URL,
+  timeout: 10000, // 10 second timeout
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor to add auth cookies and device session token
+api.interceptors.request.use(
+  async (config) => {
+    try {
+<% if (features.authentication.enabled) { %>
+      // Add BetterAuth session cookies for authenticated requests
+      const cookies = authClient.getCookie();
+      if (cookies) {
+        config.headers.Cookie = cookies;
+      }
+<% } %>
+
+      // Add device session token if available (for anonymous sessions)
+      const deviceSessionToken = await AsyncStorage.getItem(DEVICE_SESSION_TOKEN_KEY);
+      if (deviceSessionToken) {
+        config.headers['X-Device-Session-Token'] = deviceSessionToken;
+      }
+
+      return config;
+    } catch (error) {
+      console.error('API Request Error:', error);
+      return config;
+    }
+  },
+  (error) => {
+    console.error('API Request Setup Error:', error);
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor for handling common responses and errors
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    // Handle 401 errors - session expired or invalid
+    if (error.response?.status === 401) {
+<% if (features.authentication.enabled) { %>
+      // Sign out to clear BetterAuth session
+      try {
+        await authClient.signOut();
+      } catch {
+        // Ignore sign out errors
+      }
+<% } %>
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/templates/base/mobile/src/services/errorService.ts

@@ -0,0 +1,179 @@
+import axios from 'axios';
+
+export interface AppError {
+  type: string;
+  message: string;
+  details?: any;
+}
+
+class ErrorService {
+  private static instance: ErrorService;
+
+  private constructor() {}
+
+  public static getInstance(): ErrorService {
+    if (!ErrorService.instance) {
+      ErrorService.instance = new ErrorService();
+    }
+    return ErrorService.instance;
+  }
+
+  handleAxiosError(error: any, context?: { [key: string]: any }): AppError {
+    if (axios.isAxiosError(error)) {
+      // Network error (no response)
+      if (!error.response) {
+        if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+          return {
+            type: 'TIMEOUT_ERROR',
+            message: 'Request timeout. Please try again.',
+            details: { context }
+          };
+        }
+        return {
+          type: 'CONNECTION_ERROR',
+          message: 'Unable to connect. Please check your internet connection.',
+          details: { context }
+        };
+      }
+
+      // Server responded with error status
+      const status = error.response.status;
+      const data = error.response.data;
+
+      // Handle structured API errors
+      if (data?.error?.code && data?.error?.message) {
+        return {
+          type: data.error.code,
+          message: data.error.message,
+          details: data.error.details || context
+        };
+      }
+
+      // Handle common HTTP status codes
+      switch (status) {
+        case 400:
+          return {
+            type: 'VALIDATION_ERROR',
+            message: data?.message || 'Invalid request data.',
+            details: data?.details || context
+          };
+        case 401:
+          return {
+            type: 'AUTH_ERROR',
+            message: 'Please log in to continue.',
+            details: context
+          };
+        case 403:
+          return {
+            type: 'PERMISSION_ERROR',
+            message: 'You do not have permission to perform this action.',
+            details: context
+          };
+        case 404:
+          return {
+            type: 'NOT_FOUND_ERROR',
+            message: 'The requested resource was not found.',
+            details: context
+          };
+        case 409:
+          return {
+            type: 'CONFLICT_ERROR',
+            message: data?.message || 'A conflict occurred.',
+            details: context
+          };
+        case 429:
+          return {
+            type: 'RATE_LIMIT_ERROR',
+            message: 'Too many requests. Please try again later.',
+            details: context
+          };
+        case 500:
+          return {
+            type: 'SERVER_ERROR',
+            message: 'An internal server error occurred.',
+            details: context
+          };
+        case 503:
+          return {
+            type: 'SERVICE_UNAVAILABLE',
+            message: 'The service is temporarily unavailable.',
+            details: context
+          };
+        default:
+          return {
+            type: 'HTTP_ERROR',
+            message: data?.message || `Request failed with status ${status}`,
+            details: { status, context }
+          };
+      }
+    }
+
+    return this.handleGenericError(error, context);
+  }
+
+  handleGenericError(error: any, context?: { [key: string]: any }): AppError {
+    if (error instanceof Error) {
+      return {
+        type: 'GENERIC_ERROR',
+        message: error.message,
+        details: { context }
+      };
+    }
+
+    return {
+      type: 'UNKNOWN_ERROR',
+      message: 'An unexpected error occurred.',
+      details: { originalError: String(error), context }
+    };
+  }
+
+  getUserFriendlyMessage(error: AppError): string {
+    const suggestions: { [key: string]: string } = {
+      CONNECTION_ERROR: 'Please check your internet connection and try again.',
+      TIMEOUT_ERROR: 'The request is taking longer than usual. Please try again.',
+      AUTH_ERROR: 'Please log in again.',
+      PERMISSION_ERROR: 'You do not have permission to perform this action.',
+      VALIDATION_ERROR: 'Please check your input and try again.',
+      CONFLICT_ERROR: 'This action conflicts with existing data.',
+      RATE_LIMIT_ERROR: 'Please wait a moment before trying again.',
+      SERVER_ERROR: 'Something went wrong on our end. Please try again later.',
+      SERVICE_UNAVAILABLE: 'The service is temporarily unavailable. Please try again later.',
+    };
+
+    return suggestions[error.type] || error.message;
+  }
+
+  getSuggestions(error: AppError): string[] {
+    const suggestionMap: { [key: string]: string[] } = {
+      CONNECTION_ERROR: [
+        'Check your internet connection',
+        'Try switching between Wi-Fi and cellular data',
+        'Move to an area with better signal'
+      ],
+      TIMEOUT_ERROR: [
+        'Try again in a few moments',
+        'Check your internet connection',
+        'The server might be experiencing high load'
+      ],
+      AUTH_ERROR: [
+        'Please log in again',
+        'Check if your session has expired',
+        'Try logging out and back in'
+      ],
+      VALIDATION_ERROR: [
+        'Double-check your input',
+        'Make sure all required fields are filled',
+        'Check the format of your data'
+      ],
+      SERVER_ERROR: [
+        'Try again in a few minutes',
+        'Contact support if the problem persists',
+        'Check if there are any ongoing service issues'
+      ]
+    };
+
+    return suggestionMap[error.type] || ['Please try again', 'Contact support if the problem persists'];
+  }
+}
+
+export const errorService = ErrorService.getInstance();

package/templates/base/mobile/src/services/sdkInitializer.ts.ejs

@@ -0,0 +1,36 @@
+<% 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';
+<% } %>
+export const initializeSDKs = async () => {
+  try {
+<% if (integrations.revenueCat.enabled) { %>    // Initialize RevenueCat
+    revenueCatService.initialize();
+<% } %>
+<% if (integrations.adjust.enabled) { %>    // Initialize Adjust
+<% if (integrations.att.enabled) { %>    // Handle ATT permissions on iOS first
+    if (Platform.OS === 'ios') {
+      const attStore = useATTStore.getState();
+      await attStore.initialize();
+      await attStore.requestPermissions();
+    }
+<% } %>    adjustService.initialize();
+<% } %>
+<% if (integrations.scate.enabled) { %>    // Initialize Scate
+    scateService.initialize();
+<% } %>
+<% if (integrations.adjust.enabled && (integrations.revenueCat.enabled || integrations.scate.enabled)) { %>
+    // Distribute ADID to other SDKs
+    const adid = await adjustService.getAdid();
+    if (adid) {
+<% if (integrations.revenueCat.enabled) { %>      // Set Adjust ID in RevenueCat
+      revenueCatService.setAdjustId(adid);
+<% } %><% if (integrations.scate.enabled) { %>      // Set ADID in Scate
+      scateService.setAdid(adid);
+<% } %>    }
+<% } %>  } catch (error) {
+    console.error('SDK initialization error:', error);
+  }
+};

package/templates/base/mobile/src/store/index.ts.ejs

@@ -0,0 +1,18 @@
+// UI Store (always included)
+export * from './ui.store';
+
+<% if (features.sessionManagement) { %>// Device Session Store
+export * from './deviceSession.store';
+<% } %>
+<% if (integrations.revenueCat.enabled) { %>// RevenueCat Store
+export * from './revenuecat.store';
+<% } %>
+<% if (integrations.adjust.enabled) { %>// Adjust Store
+export * from './adjust.store';
+<% } %>
+<% if (integrations.scate.enabled) { %>// Scate Store
+export * from './scate.store';
+<% } %>
+<% if (integrations.att.enabled) { %>// ATT Store
+export * from './att.store';
+<% } %>

package/templates/base/mobile/src/store/ui.store.ts

@@ -0,0 +1,100 @@
+import { create } from 'zustand';
+
+interface UIState {
+  // Global loading states
+  isAppLoading: boolean;
+  isNetworkLoading: boolean;
+  
+  // Theme
+  colorScheme: 'light' | 'dark' | 'system';
+  
+  // Notifications/Toasts
+  notification: {
+    id: string;
+    type: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    message?: string;
+    duration?: number;
+  } | null;
+
+  // Actions
+  setAppLoading: (loading: boolean) => void;
+  setNetworkLoading: (loading: boolean) => void;
+  setColorScheme: (scheme: 'light' | 'dark' | 'system') => void;
+  showNotification: (notification: {
+    type: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    message?: string;
+    duration?: number;
+  }) => void;
+  hideNotification: () => void;
+  
+  // Computed
+  isAnyLoading: boolean;
+}
+
+export const useUIStore = create<UIState>((set, get) => ({
+  // Initial state
+  isAppLoading: false,
+  isNetworkLoading: false,
+  colorScheme: 'system',
+  notification: null,
+
+  // Actions
+  setAppLoading: (isAppLoading) => set({ isAppLoading }),
+  setNetworkLoading: (isNetworkLoading) => set({ isNetworkLoading }),
+  setColorScheme: (colorScheme) => set({ colorScheme }),
+  
+  showNotification: (notificationData) => {
+    const id = `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    set({
+      notification: {
+        id,
+        ...notificationData,
+        duration: notificationData.duration ?? 4000,
+      }
+    });
+    
+    // Auto-hide after duration
+    const duration = notificationData.duration ?? 4000;
+    if (duration > 0) {
+      setTimeout(() => {
+        const currentNotification = get().notification;
+        if (currentNotification?.id === id) {
+          set({ notification: null });
+        }
+      }, duration);
+    }
+  },
+  
+  hideNotification: () => set({ notification: null }),
+
+  // Computed values
+  get isAnyLoading() {
+    const state = get();
+    return state.isAppLoading || state.isNetworkLoading;
+  },
+}));
+
+// Selectors for commonly used UI state
+export const useUI = () => {
+  const state = useUIStore();
+  return {
+    isAppLoading: state.isAppLoading,
+    isNetworkLoading: state.isNetworkLoading,
+    isAnyLoading: state.isAnyLoading,
+    colorScheme: state.colorScheme,
+    notification: state.notification,
+  };
+};
+
+export const useUIActions = () => {
+  const state = useUIStore();
+  return {
+    setAppLoading: state.setAppLoading,
+    setNetworkLoading: state.setNetworkLoading,
+    setColorScheme: state.setColorScheme,
+    showNotification: state.showNotification,
+    hideNotification: state.hideNotification,
+  };
+};

package/templates/base/mobile/src/utils/formatters.ts

@@ -0,0 +1,105 @@
+/**
+ * Format date strings for display
+ */
+export const formatDate = (dateString: string, options?: Intl.DateTimeFormatOptions): string => {
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return dateString; // Return original if invalid
+    }
+
+    const defaultOptions: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    };
+
+    return date.toLocaleDateString(undefined, options || defaultOptions);
+  } catch (error) {
+    return dateString; // Return original if formatting fails
+  }
+};
+
+/**
+ * Format relative time (e.g., "2 hours ago")
+ */
+export const formatRelativeTime = (dateString: string): string => {
+  try {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInSeconds = (now.getTime() - date.getTime()) / 1000;
+
+    if (diffInSeconds < 60) {
+      return 'Just now';
+    }
+
+    const diffInMinutes = Math.floor(diffInSeconds / 60);
+    if (diffInMinutes < 60) {
+      return `${diffInMinutes} ${diffInMinutes === 1 ? 'minute' : 'minutes'} ago`;
+    }
+
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) {
+      return `${diffInHours} ${diffInHours === 1 ? 'hour' : 'hours'} ago`;
+    }
+
+    const diffInDays = Math.floor(diffInHours / 24);
+    if (diffInDays < 7) {
+      return `${diffInDays} ${diffInDays === 1 ? 'day' : 'days'} ago`;
+    }
+
+    // For longer periods, show the actual date
+    return formatDate(dateString);
+  } catch (error) {
+    return dateString;
+  }
+};
+
+/**
+ * Capitalize first letter of each word
+ */
+export const capitalizeWords = (str: string): string => {
+  return str.replace(/\b\w/g, l => l.toUpperCase());
+};
+
+/**
+ * Truncate text with ellipsis
+ */
+export const truncateText = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + '...';
+};
+
+/**
+ * Format email for display (hide middle part)
+ */
+export const formatEmailForDisplay = (email: string): string => {
+  const [localPart, domain] = email.split('@');
+  if (!domain) return email;
+
+  if (localPart.length <= 2) return email;
+
+  const visibleChars = Math.max(1, Math.floor(localPart.length * 0.3));
+  const hiddenPart = '*'.repeat(localPart.length - visibleChars * 2);
+  const maskedLocal = localPart.slice(0, visibleChars) + hiddenPart + localPart.slice(-visibleChars);
+  
+  return `${maskedLocal}@${domain}`;
+};
+
+/**
+ * Validate email format
+ */
+export const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * Format name for display
+ */
+export const formatDisplayName = (name: string | null | undefined, fallback: string = 'User'): string => {
+  if (!name || !name.trim()) {
+    return fallback;
+  }
+  return name.trim();
+};

package/templates/base/mobile/src/utils/logger.ts

@@ -0,0 +1,73 @@
+interface LogLevel {
+  DEBUG: number;
+  INFO: number;
+  WARN: number;
+  ERROR: number;
+}
+
+const LOG_LEVELS: LogLevel = {
+  DEBUG: 0,
+  INFO: 1,
+  WARN: 2,
+  ERROR: 3,
+};
+
+class Logger {
+  private currentLevel: number;
+
+  constructor() {
+    // Set log level based on environment
+    this.currentLevel = __DEV__ ? LOG_LEVELS.DEBUG : LOG_LEVELS.WARN;
+  }
+
+  private shouldLog(level: number): boolean {
+    return level >= this.currentLevel;
+  }
+
+  private formatMessage(level: string, message: string, data?: any): string {
+    const timestamp = new Date().toISOString();
+    const prefix = `[${timestamp}] [${level}]`;
+    
+    if (data) {
+      return `${prefix} ${message}\n${JSON.stringify(data, null, 2)}`;
+    }
+    
+    return `${prefix} ${message}`;
+  }
+
+  debug(message: string, data?: any): void {
+    if (this.shouldLog(LOG_LEVELS.DEBUG)) {
+      console.log(this.formatMessage('DEBUG', message, data));
+    }
+  }
+
+  info(message: string, data?: any): void {
+    if (this.shouldLog(LOG_LEVELS.INFO)) {
+      console.info(this.formatMessage('INFO', message, data));
+    }
+  }
+
+  warn(message: string, data?: any): void {
+    if (this.shouldLog(LOG_LEVELS.WARN)) {
+      console.warn(this.formatMessage('WARN', message, data));
+    }
+  }
+
+  error(message: string, data?: any): void {
+    if (this.shouldLog(LOG_LEVELS.ERROR)) {
+      console.error(this.formatMessage('ERROR', message, data));
+    }
+  }
+
+  // Convenience method for API logging
+  apiRequest(method: string, url: string, data?: any): void {
+    this.debug(`API ${method.toUpperCase()} ${url}`, data);
+  }
+
+  apiResponse(method: string, url: string, status: number, data?: any): void {
+    const level = status >= 400 ? 'error' : 'debug';
+    this[level](`API ${method.toUpperCase()} ${url} - ${status}`, data);
+  }
+}
+
+export const logger = new Logger();