@digilogiclabs/create-saas-app 1.5.1 → 1.5.3

package/src/templates/web/ui-auth-payments-audio/template/src/components/client/signup-form.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import React, { useState, useActionState } from 'react'
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useRouter } from 'next/navigation'
+import { signUpAction } from '@/lib/actions/auth'
+
+export function SignupForm() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const { signUp, signInWithOAuth, loading, error, user } = useAuth()
+  const [actionState, formAction] = useActionState(signUpAction, { success: false })
+  const router = useRouter()
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/')
+    }
+  }, [user, router])
+
+  const handleSignUp = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (password !== confirmPassword) {
+      console.error('Passwords do not match')
+      return
+    }
+
+    try {
+      await signUp(email, password)
+      router.push('/')
+    } catch (err) {
+      console.error('Sign up error:', err)
+    }
+  }
+
+  const handleGoogleSignUp = async () => {
+    try {
+      await signInWithOAuth('google', window.location.origin)
+    } catch (err) {
+      console.error('Google sign up error:', err)
+    }
+  }
+
+  // Enhanced form action that uses both server action validation and client auth
+  const handleServerAction = async (formData: FormData) => {
+    const result = await formAction(formData)
+    
+    if (result?.success) {
+      // If server validation passes, proceed with client auth
+      const emailValue = formData.get('email') as string
+      const passwordValue = formData.get('password') as string
+      const nameValue = formData.get('name') as string
+      
+      try {
+        await signUp(emailValue, passwordValue)
+        router.push('/')
+      } catch (err) {
+        console.error('Sign up error:', err)
+      }
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div>Loading...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-md p-8">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
+        
+        {/* Server action errors */}
+        {actionState?.error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {actionState.error}
+          </div>
+        )}
+        
+        {/* Client auth errors */}
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form action={handleServerAction} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              name="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your name"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.name && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.name[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.email && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.password && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.confirmPassword && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.confirmPassword[0]}</p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing Up...' : 'Sign Up'}
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline" 
+            className="w-full"
+            onClick={handleGoogleSignUp}
+            disabled={loading}
+          >
+            Sign up with Google
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Already have an account?{' '}
+            <a href="/login" className="text-blue-600 hover:underline dark:text-blue-400">
+              Sign in
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

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
+}