@digilogiclabs/create-saas-app 2.9.1 → 2.11.0

package/src/templates/web/marketplace/template/src/app/signup/page.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { ShoppingBag } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'signup' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to create account')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create account')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <ShoppingBag className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">Marketplace</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Create your account</h1>
+              <p className="text-muted-foreground mt-2">Start buying and selling today</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Minimum 8 characters"
+                  required
+                  minLength={8}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1.5">
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Re-enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Creating account...' : 'Create Account'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Already have an account?{' '}
+                <Link href="/login" className="text-primary hover:underline font-medium">
+                  Sign in
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/lib/auth-server.ts

@@ -1,33 +1,32 @@
-import { redirect } from 'next/navigation'
-import { createClient } from './supabase/server'
-
-export interface AuthUser {
-  id: string
-  email: string | null
-  name?: string | null
-}
-
-export async function getUser(): Promise<AuthUser | null> {
-  const supabase = await createClient()
-  const { data: { user }, error } = await supabase.auth.getUser()
-
-  if (error || !user) {
-    return null
-  }
-
-  return {
-    id: user.id,
-    email: user.email ?? null,
-    name: user.user_metadata?.name ?? user.user_metadata?.full_name ?? null,
-  }
-}
-
-export async function requireAuth(): Promise<AuthUser> {
-  const user = await getUser()
-
-  if (!user) {
-    redirect('/login')
-  }
-
-  return user
-}
+import { redirect } from 'next/navigation'
+import { getSession, getUser as getSessionUser } from './auth-session'
+
+export interface AuthUser {
+  id: string
+  email: string | null
+  name?: string | null
+}
+
+export async function getUser(): Promise<AuthUser | null> {
+  const user = await getSessionUser()
+
+  if (!user || !user.id) {
+    return null
+  }
+
+  return {
+    id: user.id,
+    email: user.email ?? null,
+    name: user.name ?? null,
+  }
+}
+
+export async function requireAuth(): Promise<AuthUser> {
+  const user = await getUser()
+
+  if (!user) {
+    redirect('/login')
+  }
+
+  return user
+}

package/src/templates/web/marketplace/template/src/lib/auth-session.ts

@@ -0,0 +1,52 @@
+/**
+ * Auth session adapter — demo implementation.
+ *
+ * Replace this file with a real provider when configuring your app:
+ *   - Keycloak:  import { auth } from '@/auth' (Auth.js)
+ *   - Supabase:  import { createClient } from '@/lib/supabase/server'
+ *   - Firebase:  import { getServerSession } from 'next-auth'
+ *
+ * The getSession() and getUser() exports are consumed by auth-server.ts
+ * and must return the same shape regardless of provider.
+ */
+import 'server-only'
+import { cookies } from 'next/headers'
+
+type SessionUser = {
+  id?: string
+  email?: string | null
+  name?: string | null
+  roles?: string[]
+}
+
+type Session = {
+  user?: SessionUser
+}
+
+/**
+ * Get the current session from cookies.
+ * Demo: reads a JSON cookie set at login. Replace with your auth provider.
+ */
+export async function getSession(): Promise<Session | null> {
+  const cookieStore = await cookies()
+  const sessionCookie = cookieStore.get('session')
+
+  if (!sessionCookie?.value) {
+    return null
+  }
+
+  try {
+    const session = JSON.parse(sessionCookie.value) as Session
+    return session
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get the current authenticated user, or null.
+ */
+export async function getUser(): Promise<SessionUser | null> {
+  const session = await getSession()
+  return session?.user ?? null
+}

package/src/templates/web/micro-saas/template/next.config.js

@@ -1,14 +1,14 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: '**.supabase.co',
-      },
-    ],
-  },
-}
-
-module.exports = nextConfig
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+}
+
+module.exports = nextConfig

package/src/templates/web/micro-saas/template/package.json

@@ -11,22 +11,23 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "next": "^15.0.0",
+    "next": "^15.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.13.0",
-    "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-ui": "^1.4.0",
-    "tailwindcss": "^4.0.0",
-    "clsx": "^2.0.0",
+    "@digilogiclabs/platform-core": "^1.14.0",
+    "@digilogiclabs/app-sdk": "^1.1.0",
+    "@digilogiclabs/saas-factory-ui": "^1.8.1",
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/postcss": "^4.1.0",
+    "clsx": "^2.1.0",
     "class-variance-authority": "^0.7.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.6.0",
     "next-themes": "^0.4.0",
     "lucide-react": "^0.460.0",
     "zod": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
+    "typescript": "^5.8.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/src/templates/web/micro-saas/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/src/templates/web/micro-saas/template/src/app/api/auth/route.ts

@@ -0,0 +1,57 @@
+/**
+ * Demo auth API routes.
+ *
+ * POST /api/auth — Login or Signup
+ * DELETE /api/auth — Logout
+ *
+ * Replace with your real auth provider (Auth.js, Supabase Auth, etc.)
+ * when configuring your app for production.
+ */
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { email, password, action } = body
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      )
+    }
+
+    // Demo: accept any email/password combination.
+    // Replace with real authentication (database lookup, bcrypt compare, etc.)
+    const user = {
+      id: crypto.randomUUID(),
+      email,
+      name: email.split('@')[0],
+    }
+
+    const session = JSON.stringify({ user })
+    const cookieStore = await cookies()
+
+    cookieStore.set('session', session, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    })
+
+    return NextResponse.json({ user })
+  } catch {
+    return NextResponse.json(
+      { error: 'Authentication failed' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  const cookieStore = await cookies()
+  cookieStore.delete('session')
+  return NextResponse.json({ success: true })
+}

package/src/templates/web/micro-saas/template/src/app/dashboard/page.tsx

@@ -1,117 +1,145 @@
-import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { User, Settings, Activity, Home, BarChart } from 'lucide-react'
-import { requireAuth } from '@/lib/auth-server'
-import Link from 'next/link'
-
-async function getStats(userId: string) {
-  await new Promise(resolve => setTimeout(resolve, 100))
-  return {
-    activeUsers: 42,
-    totalActions: 1337,
-    weeklyGrowth: '+12%',
-  }
-}
-
-function StatCard({ title, value, icon: Icon }: {
-  title: string
-  value: string | number
-  icon: React.ComponentType<{ className?: string }>
-}) {
-  return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
-          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
-        </div>
-        <Icon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
-      </div>
-    </Card>
-  )
-}
-
-async function Stats({ userId }: { userId: string }) {
-  const stats = await getStats(userId)
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-      <StatCard title="Active Users" value={stats.activeUsers} icon={User} />
-      <StatCard title="Total Actions" value={stats.totalActions.toLocaleString()} icon={Activity} />
-      <StatCard title="Weekly Growth" value={stats.weeklyGrowth} icon={BarChart} />
-    </div>
-  )
-}
-
-function StatsSkeleton() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-      {[...Array(3)].map((_, i) => (
-        <Card key={i} className="p-6">
-          <div className="animate-pulse">
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
-            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
-          </div>
-        </Card>
-      ))}
-    </div>
-  )
-}
-
-export default async function DashboardPage() {
-  const user = await requireAuth()
-
-  return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-6xl mx-auto px-4 py-8">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Dashboard
-            </h1>
-            <p className="text-gray-600 dark:text-gray-300 mt-1">
-              Welcome back, {user.name || user.email}
-            </p>
-          </div>
-          <Link href="/">
-            <Button variant="outline" size="sm">
-              <Home className="w-4 h-4 mr-2" />
-              Home
-            </Button>
-          </Link>
-        </div>
-
-        {/* Stats */}
-        <Suspense fallback={<StatsSkeleton />}>
-          <Stats userId={user.id} />
-        </Suspense>
-
-        {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <User className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Your Profile</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Manage your account settings and preferences.
-            </p>
-            <Button className="w-full">Edit Profile</Button>
-          </Card>
-
-          <Card className="p-6">
-            <div className="flex items-center mb-4">
-              <Settings className="h-6 w-6 text-blue-600 mr-3" />
-              <h3 className="text-lg font-semibold">Settings</h3>
-            </div>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Configure your application preferences.
-            </p>
-            <Button variant="outline" className="w-full">Open Settings</Button>
-          </Card>
-        </div>
-      </div>
-    </div>
-  )
-}
+import { Suspense } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { User, Settings, Activity, Home, BarChart, Zap } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    activeUsers: 42,
+    totalActions: 1337,
+    weeklyGrowth: '+12%',
+  }
+}
+
+function StatCard({ title, value, icon: Icon }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+}) {
+  return (
+    <Card className="hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-muted-foreground">{title}</p>
+            <p className="text-2xl font-bold mt-1">{value}</p>
+          </div>
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <Icon className="h-6 w-6 text-primary" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+async function Stats({ userId }: { userId: string }) {
+  const stats = await getStats(userId)
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8">
+      <StatCard title="Active Users" value={stats.activeUsers} icon={User} />
+      <StatCard title="Total Actions" value={stats.totalActions.toLocaleString()} icon={Activity} />
+      <StatCard title="Weekly Growth" value={stats.weeklyGrowth} icon={BarChart} />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8">
+      {[1, 2, 3].map((i) => (
+        <Card key={i}>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div className="space-y-2">
+                <div className="h-4 w-20 rounded bg-muted animate-pulse" />
+                <div className="h-7 w-16 rounded bg-muted animate-pulse" />
+              </div>
+              <div className="w-12 h-12 rounded-xl bg-muted animate-pulse" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Nav */}
+      <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-lg">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+              <Zap className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-lg">Micro Saas</span>
+          </Link>
+          <Link href="/">
+            <Button variant="outline" size="sm" className="hover:bg-accent active:scale-95 transition-all duration-200 cursor-pointer">
+              <Home className="w-4 h-4 mr-2" />
+              Home
+            </Button>
+          </Link>
+        </div>
+      </nav>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">
+            Welcome back, {user.name || user.email}
+          </p>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <Stats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <Card className="group hover:shadow-md hover:-translate-y-0.5 hover:border-primary/20 transition-all duration-200">
+            <CardContent className="p-6">
+              <div className="flex items-center mb-4">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
+                  <User className="h-5 w-5 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold group-hover:text-primary transition-colors">Your Profile</h3>
+              </div>
+              <p className="text-muted-foreground mb-4">
+                Manage your account settings and preferences.
+              </p>
+              <Button className="w-full cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200">
+                Edit Profile
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="group hover:shadow-md hover:-translate-y-0.5 hover:border-primary/20 transition-all duration-200">
+            <CardContent className="p-6">
+              <div className="flex items-center mb-4">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
+                  <Settings className="h-5 w-5 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold group-hover:text-primary transition-colors">Settings</h3>
+              </div>
+              <p className="text-muted-foreground mb-4">
+                Configure your application preferences.
+              </p>
+              <Button variant="outline" className="w-full cursor-pointer hover:bg-accent active:scale-[0.98] transition-all duration-200">
+                Open Settings
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}