@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth-payments-audio/template/src/lib/actions/auth.ts

@@ -0,0 +1,246 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { z } from 'zod'
+
+// Schema for form validation
+const signInSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+})
+
+const signUpSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+  confirmPassword: z.string(),
+  name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+// Response types
+type ActionResult = {
+  success: boolean
+  error?: string
+  fieldErrors?: Record<string, string[]>
+}
+
+/**
+ * Server action for signing in
+ * This works alongside the client-side @digilogiclabs/saas-factory-auth
+ */
+export async function signInAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+    }
+
+    // Validate form data
+    const validationResult = signInSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password } = validationResult.data
+
+    // Note: The actual authentication is handled by the client-side library
+    // This server action is mainly for form validation and server-side processing
+    // You might want to add additional server-side logic here like:
+    // - Rate limiting
+    // - Logging
+    // - Analytics
+    
+    // For now, we'll return success and let the client handle the actual auth
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign in error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing up
+ */
+export async function signUpAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+      confirmPassword: formData.get('confirmPassword') as string,
+      name: formData.get('name') as string,
+    }
+
+    // Validate form data
+    const validationResult = signUpSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password, name } = validationResult.data
+
+    // Additional server-side processing can go here
+    // - User existence check
+    // - Welcome email preparation
+    // - User analytics setup
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign up error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing out
+ */
+export async function signOutAction(): Promise<void> {
+  try {
+    const cookieStore = await cookies()
+    
+    // Clear auth cookies (adjust cookie names based on the auth library)
+    cookieStore.delete('saas-factory-auth-token')
+    cookieStore.delete('saas-factory-auth-user')
+    
+    // Additional cleanup can go here
+    // - Clear session data
+    // - Log sign out event
+    // - Clear cache
+    
+  } catch (error) {
+    console.error('Sign out error:', error)
+  }
+  
+  redirect('/')
+}
+
+/**
+ * Server action for OAuth redirect handling
+ */
+export async function handleOAuthCallback(provider: string, code: string): Promise<ActionResult> {
+  try {
+    // This would handle OAuth callback processing
+    // For now, we'll delegate to the client-side library
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('OAuth callback error:', error)
+    return {
+      success: false,
+      error: 'Authentication failed. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for password reset request
+ */
+export async function requestPasswordReset(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const email = formData.get('email') as string
+    
+    if (!email) {
+      return {
+        success: false,
+        error: 'Email is required',
+      }
+    }
+
+    const emailSchema = z.string().email()
+    const validationResult = emailSchema.safeParse(email)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please enter a valid email address',
+      }
+    }
+
+    // Password reset logic would go here
+    // - Generate reset token
+    // - Send reset email
+    // - Log reset request
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Password reset error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for updating user profile
+ */
+export async function updateProfileAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    // This would require authentication check
+    const cookieStore = await cookies()
+    const authToken = cookieStore.get('saas-factory-auth-token')?.value
+    
+    if (!authToken) {
+      redirect('/login')
+    }
+
+    const name = formData.get('name') as string
+    const email = formData.get('email') as string
+    
+    const updateSchema = z.object({
+      name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+      email: z.string().email('Invalid email address').optional(),
+    })
+    
+    const validationResult = updateSchema.safeParse({ name, email })
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    // Profile update logic would go here
+    // - Update user in database
+    // - Update auth cookies
+    // - Send confirmation email if email changed
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Profile update error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}

package/src/templates/web/ui-auth-payments-audio/template/src/lib/actions/index.ts

@@ -0,0 +1,14 @@
+// Re-export all server actions for easier imports
+export {
+  signInAction,
+  signUpAction,
+  signOutAction,
+  handleOAuthCallback,
+  requestPasswordReset,
+  updateProfileAction,
+} from './auth'
+
+// Add other action exports here as needed
+// export * from './posts'
+// export * from './profile'
+// export * from './settings'

package/src/templates/web/ui-auth-payments-audio/template/src/lib/auth-server.ts

@@ -0,0 +1,177 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+// Server-side auth utilities that work with @digilogiclabs/saas-factory-auth
+// These functions provide server-side access to auth state
+
+export type User = {
+  id: string
+  email: string
+  name?: string
+  avatar?: string
+  [key: string]: any
+}
+
+/**
+ * Get the current user from server-side cookies
+ * This function should be called in Server Components, Server Actions, or Route Handlers
+ */
+export async function getCurrentUser(): Promise<User | null> {
+  try {
+    const cookieStore = await cookies()
+    
+    // Check for auth token in cookies set by @digilogiclabs/saas-factory-auth
+    const authToken = cookieStore.get('saas-factory-auth-token')?.value
+    const userCookie = cookieStore.get('saas-factory-auth-user')?.value
+    
+    if (!authToken || !userCookie) {
+      return null
+    }
+    
+    // Parse user data from cookie
+    try {
+      const userData = JSON.parse(userCookie)
+      return userData
+    } catch {
+      return null
+    }
+  } catch (error) {
+    console.error('Error getting current user:', error)
+    return null
+  }
+}
+
+/**
+ * Require authentication - redirects to login if not authenticated
+ * Use this in Server Components that require authentication
+ */
+export async function requireAuth(): Promise<User> {
+  const user = await getCurrentUser()
+  
+  if (!user) {
+    redirect('/login')
+  }
+  
+  return user
+}
+
+/**
+ * Check if user is authenticated (without redirecting)
+ * Returns boolean for conditional rendering
+ */
+export async function isAuthenticated(): Promise<boolean> {
+  const user = await getCurrentUser()
+  return !!user
+}
+
+/**
+ * Redirect if already authenticated
+ * Use this on login/signup pages
+ */
+export async function redirectIfAuthenticated(redirectTo: string = '/') {
+  const user = await getCurrentUser()
+  
+  if (user) {
+    redirect(redirectTo)
+  }
+}
+
+/**
+ * Get user session data for server components
+ * Returns both user and loading state info
+ */
+export async function getServerSession() {
+  const user = await getCurrentUser()
+  
+  return {
+    user,
+    isAuthenticated: !!user,
+    isLoading: false, // Server-side is never loading
+  }
+}
+
+/**
+ * Server-side auth check for API routes
+ */
+export async function getAuthFromRequest(request?: Request): Promise<User | null> {
+  try {
+    // If request is provided, extract cookies from it
+    if (request) {
+      const cookie = request.headers.get('cookie')
+      if (!cookie) return null
+      
+      // Parse cookies manually from request
+      const cookies = cookie.split(';').reduce((acc, cookie) => {
+        const [key, value] = cookie.trim().split('=')
+        acc[key] = value
+        return acc
+      }, {} as Record<string, string>)
+      
+      const authToken = cookies['saas-factory-auth-token']
+      const userCookie = cookies['saas-factory-auth-user']
+      
+      if (!authToken || !userCookie) {
+        return null
+      }
+      
+      try {
+        const userData = JSON.parse(decodeURIComponent(userCookie))
+        return userData
+      } catch {
+        return null
+      }
+    }
+    
+    // Fallback to cookies() API
+    return await getCurrentUser()
+  } catch (error) {
+    console.error('Error getting auth from request:', error)
+    return null
+  }
+}
+
+/**
+ * Create server action wrapper that requires authentication
+ */
+export function withAuth<T extends any[], R>(
+  action: (user: User, ...args: T) => Promise<R>
+) {
+  return async (...args: T): Promise<R> => {
+    const user = await requireAuth()
+    return action(user, ...args)
+  }
+}
+
+/**
+ * Server-side utility to check specific roles/permissions
+ * Extend this based on your user data structure
+ */
+export async function hasRole(role: string): Promise<boolean> {
+  const user = await getCurrentUser()
+  
+  if (!user) return false
+  
+  // Assuming role is stored in user.role or user.roles
+  if (Array.isArray(user.roles)) {
+    return user.roles.includes(role)
+  }
+  
+  return user.role === role
+}
+
+/**
+ * Server-side utility to require specific roles
+ */
+export async function requireRole(role: string): Promise<User> {
+  const user = await requireAuth()
+  
+  const hasRequiredRole = Array.isArray(user.roles) 
+    ? user.roles.includes(role)
+    : user.role === role
+  
+  if (!hasRequiredRole) {
+    redirect('/unauthorized')
+  }
+  
+  return user
+}

package/src/templates/web/ui-auth-payments-audio/template/src/lib/env.ts

@@ -0,0 +1,49 @@
+/**
+ * Optional Environment Configuration with Zod validation
+ * 
+ * This provides type-safe environment variable validation.
+ * Usage is optional - existing templates will continue to work without this.
+ * 
+ * To use: import { env } from '@/lib/env' instead of process.env
+ */
+
+import { z } from 'zod'
+
+const envSchema = z.object({
+  // Next.js built-in
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
+  
+  // App configuration
+  NEXT_PUBLIC_APP_URL: z.string().url().optional(),
+  NEXT_PUBLIC_APP_NAME: z.string().default('{{titleCaseName}}'),
+  
+  // Auth configuration (if using server-side auth)
+  SUPABASE_URL: z.string().url().optional(),
+  SUPABASE_ANON_KEY: z.string().optional(),
+  SUPABASE_SERVICE_ROLE_KEY: z.string().optional(),
+  
+  // Payment configuration
+  STRIPE_SECRET_KEY: z.string().optional(),
+  STRIPE_WEBHOOK_SECRET: z.string().optional(),
+  
+  // Optional analytics
+  ANALYTICS_ID: z.string().optional(),
+})
+
+// Parse with fallback to process.env for backward compatibility
+function parseEnv() {
+  try {
+    return envSchema.parse(process.env)
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Environment validation failed. Using process.env fallback:', error)
+    }
+    // Fallback to process.env for backward compatibility
+    return process.env as any
+  }
+}
+
+export const env = parseEnv()
+
+// Type helper for environment variables
+export type Env = z.infer<typeof envSchema>

package/src/templates/web/ui-auth-payments-audio/template/src/lib/utils.ts

@@ -0,0 +1,140 @@
+/**
+ * Enhanced utility functions for {{titleCaseName}}
+ * 
+ * This extends the basic utils with additional functionality while
+ * maintaining compatibility with existing templates.
+ */
+
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+// Core utility function (keeps existing functionality)
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+// Additional utilities for enhanced templates
+
+/**
+ * Format currency with proper locale support
+ */
+export function formatCurrency(
+  amount: number,
+  currency: string = 'USD',
+  locale: string = 'en-US'
+): string {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(amount)
+}
+
+/**
+ * Format date with relative time support
+ */
+export function formatDate(
+  date: Date | string,
+  options?: Intl.DateTimeFormatOptions
+): string {
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  
+  const defaultOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }
+  
+  return new Intl.DateTimeFormat('en-US', options || defaultOptions).format(dateObj)
+}
+
+/**
+ * Get relative time string (e.g., "2 hours ago")
+ */
+export function getRelativeTime(date: Date | string): string {
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+  const now = new Date()
+  const diffInMs = now.getTime() - dateObj.getTime()
+  const diffInSeconds = Math.floor(diffInMs / 1000)
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  const diffInDays = Math.floor(diffInHours / 24)
+
+  if (diffInSeconds < 60) return 'just now'
+  if (diffInMinutes < 60) return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`
+  if (diffInHours < 24) return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`
+  if (diffInDays < 7) return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`
+  
+  return formatDate(dateObj)
+}
+
+/**
+ * Truncate text to specified length with ellipsis
+ */
+export function truncate(text: string, length: number = 50): string {
+  if (text.length <= length) return text
+  return text.slice(0, length).trim() + '...'
+}
+
+/**
+ * Generate initials from a name
+ */
+export function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('')
+}
+
+/**
+ * Validate email format
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * Generate a random ID
+ */
+export function generateId(prefix: string = ''): string {
+  const timestamp = Date.now().toString(36)
+  const randomString = Math.random().toString(36).substring(2)
+  return prefix ? `${prefix}-${timestamp}-${randomString}` : `${timestamp}-${randomString}`
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null
+  
+  return (...args: Parameters<T>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId)
+    }
+    timeoutId = setTimeout(() => func(...args), delay)
+  }
+}
+
+/**
+ * Sleep/delay function for async operations
+ */
+export function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * Safe JSON parse with fallback
+ */
+export function safeJsonParse<T>(json: string, fallback: T): T {
+  try {
+    return JSON.parse(json)
+  } catch {
+    return fallback
+  }
+}
+

package/src/templates/web/ui-auth-payments-audio/template/src/test/setup.ts

@@ -0,0 +1,79 @@
+import '@testing-library/jest-dom'
+import { vi, beforeEach, afterAll } from 'vitest'
+
+// Mock Next.js router
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => '/',
+}))
+
+// Mock SaaS Factory Auth (optional - only if testing auth components)
+vi.mock('@digilogiclabs/saas-factory-auth', () => ({
+  useAuth: () => ({
+    user: null,
+    loading: false,
+    error: null,
+    signIn: vi.fn(),
+    signUp: vi.fn(),
+    signOut: vi.fn(),
+    signInWithOAuth: vi.fn(),
+  }),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+// Mock SaaS Factory Payments (optional - only if testing payment components)
+vi.mock('@digilogiclabs/saas-factory-payments', () => ({
+  usePayments: () => ({
+    createCheckoutSession: vi.fn(),
+    createPortalSession: vi.fn(),
+    subscription: null,
+    loading: false,
+  }),
+  PaymentsProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+// Global test utilities
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Suppress console warnings in tests unless needed
+const originalConsoleError = console.error
+const originalConsoleWarn = console.warn
+
+beforeEach(() => {
+  console.error = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      args[0].includes('Warning: ReactDOM.render is no longer supported')
+    ) {
+      return
+    }
+    originalConsoleError.call(console, ...args)
+  }
+
+  console.warn = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      args[0].includes('useLayoutEffect does nothing on the server')
+    ) {
+      return
+    }
+    originalConsoleWarn.call(console, ...args)
+  }
+})
+
+afterAll(() => {
+  console.error = originalConsoleError
+  console.warn = originalConsoleWarn
+})