@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/src/templates/shared/beta/web/lib/beta/settings.ts

@@ -0,0 +1,31 @@
+/**
+ * Beta Gate Client — thin wrapper over platform-core's createBetaClient.
+ *
+ * Pattern: each app provides its own config (endpoints, storage key,
+ * fail-safe defaults). The client handles all fetch/validate/store logic.
+ *
+ * Usage in components:
+ *   import { fetchBetaSettings, validateInviteCode, storeBetaCode } from '@/lib/beta/settings'
+ */
+import { createBetaClient, type BetaClientConfig } from '@digilogiclabs/platform-core/auth';
+
+export type { BetaSettings } from '@digilogiclabs/platform-core';
+
+const betaConfig: BetaClientConfig = {
+  storageKey: 'app_beta_code',
+  settingsEndpoint: '/api/beta-settings',
+  validateEndpoint: '/api/validate-beta-code',
+  failSafeDefaults: {
+    betaMode: true,
+    requireInviteCode: true,
+    betaMessage: 'We are currently in private beta. Enter your invite code to continue.',
+  },
+};
+
+const betaClient = createBetaClient(betaConfig);
+
+export const fetchBetaSettings = betaClient.fetchSettings;
+export const validateInviteCode = betaClient.validateCode;
+export const storeBetaCode = betaClient.storeCode;
+export const getStoredBetaCode = betaClient.getStoredCode;
+export const clearStoredBetaCode = betaClient.clearStoredCode;

package/src/templates/shared/cache/web/lib/cache.ts

@@ -0,0 +1,44 @@
+/**
+ * Cache utilities — TTL presets and HTTP cache header helpers.
+ *
+ * Provides standardized cache durations and response header generation
+ * for CDN and browser caching.
+ */
+
+/** Standard cache TTL presets (in seconds) */
+export const CacheTTL = {
+  /** 5 minutes — frequently changing data */
+  SHORT: 300,
+  /** 1 hour — moderately stable data */
+  MEDIUM: 3600,
+  /** 6 hours — mostly stable data */
+  LONG: 21600,
+  /** 24 hours — rarely changing data */
+  DAY: 86400,
+  /** 7 days — static content */
+  WEEK: 604800,
+} as const;
+
+/**
+ * Generate HTTP cache headers for API responses.
+ *
+ * Returns an object suitable for NextResponse headers or Response init.
+ * Supports CDN-specific headers for Cloudflare, Vercel, and standard proxies.
+ *
+ * @param ttl - Cache duration in seconds
+ * @param revalidate - Stale-while-revalidate window in seconds (default: ttl)
+ */
+export function getCacheHeaders(ttl: number, revalidate?: number): Record<string, string> {
+  const swr = revalidate ?? ttl;
+  return {
+    'Cache-Control': `public, s-maxage=${ttl}, stale-while-revalidate=${swr}`,
+    'CDN-Cache-Control': `public, s-maxage=${ttl}, stale-while-revalidate=${swr}`,
+    'Vercel-CDN-Cache-Control': `public, s-maxage=${ttl}, stale-while-revalidate=${swr}`,
+  };
+}
+
+/** No-cache headers — prevent all caching */
+export const NO_CACHE_HEADERS: Record<string, string> = {
+  'Cache-Control': 'no-store, no-cache, must-revalidate',
+  Pragma: 'no-cache',
+};

package/src/templates/shared/config/web/lib/config.ts

@@ -0,0 +1,112 @@
+/**
+ * Centralized environment configuration — fail fast on missing secrets.
+ *
+ * Uses platform-core/auth helpers (getRequiredEnv, getOptionalEnv, checkEnvVars)
+ * so the app crashes immediately on deploy if critical env vars are missing,
+ * rather than failing silently at runtime when a request hits an unset secret.
+ *
+ * Skipped during build (NEXT_PHASE=phase-production-build) since env
+ * vars aren't available at build time in Docker/Nixpacks builds.
+ *
+ * Import this module from any server-side code to get validated, typed
+ * access to environment variables.
+ */
+import 'server-only';
+import { getRequiredEnv, getOptionalEnv, checkEnvVars } from '@digilogiclabs/platform-core/auth';
+
+// ---------------------------------------------------------------------------
+// Startup validation — runs once on first import
+// ---------------------------------------------------------------------------
+
+const isBuildPhase = process.env.NEXT_PHASE === 'phase-production-build';
+
+if (!isBuildPhase) {
+  const envResult = checkEnvVars({
+    required: ['AUTH_KEYCLOAK_ID', 'AUTH_KEYCLOAK_SECRET', 'AUTH_KEYCLOAK_ISSUER', 'AUTH_SECRET'],
+  });
+
+  if (!envResult.valid) {
+    console.error('[App] Missing required environment variables:', envResult.missing);
+    if (process.env.NODE_ENV === 'production') {
+      throw new Error(`Missing required environment variables: ${envResult.missing.join(', ')}`);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Centralized config — typed access to all env vars used across the app
+// ---------------------------------------------------------------------------
+
+/**
+ * Lazy config that reads env vars on first property access.
+ * Required vars use getRequiredEnv (throws if missing).
+ * Optional vars use getOptionalEnv (returns default).
+ *
+ * NOTE: Auth vars (AUTH_KEYCLOAK_*) are intentionally omitted here because
+ * auth.config.ts reads them at module scope for NextAuth configuration, and
+ * that file cannot import server-only modules.
+ */
+export const config = {
+  /** Admin bearer token for protected API routes. */
+  get adminSecret(): string | undefined {
+    return process.env.ADMIN_SECRET;
+  },
+  /** Cron job bearer token. */
+  get cronSecret(): string | undefined {
+    return process.env.CRON_SECRET;
+  },
+  db: {
+    /** Database connection string. */
+    get url(): string {
+      return getRequiredEnv('DATABASE_URL');
+    },
+  },
+  redis: {
+    /** Redis connection URL. */
+    get url(): string | undefined {
+      return process.env.REDIS_URL;
+    },
+    /** Redis key prefix for namespace isolation. */
+    get keyPrefix(): string {
+      return getOptionalEnv('REDIS_KEY_PREFIX', 'app:');
+    },
+  },
+  email: {
+    /** Resend API key. */
+    get apiKey(): string | undefined {
+      return process.env.RESEND_API_KEY;
+    },
+    /** Sender address. */
+    get from(): string {
+      return getOptionalEnv('EMAIL_FROM', 'noreply@example.com');
+    },
+  },
+  stripe: {
+    /** Stripe secret key. */
+    get secretKey(): string {
+      return getRequiredEnv('STRIPE_SECRET_KEY');
+    },
+    /** Stripe webhook secret. */
+    get webhookSecret(): string {
+      return getRequiredEnv('STRIPE_WEBHOOK_SECRET');
+    },
+  },
+  /** Base URL for the app (used in email links, redirects). */
+  get baseUrl(): string {
+    return getOptionalEnv('NEXT_PUBLIC_APP_URL', 'http://localhost:3000');
+  },
+  /** App name. */
+  get appName(): string {
+    return getOptionalEnv('NEXT_PUBLIC_APP_NAME', 'My App');
+  },
+  beta: {
+    /** Master beta mode toggle. Default: true (closed beta). */
+    get mode(): boolean {
+      return process.env.BETA_MODE !== 'false';
+    },
+    /** Require invite code for signup. Default: true. */
+    get requireInviteCode(): boolean {
+      return process.env.REQUIRE_INVITE_CODE !== 'false';
+    },
+  },
+} as const;

package/src/templates/shared/config/web/next.config.mjs

@@ -0,0 +1,62 @@
+import { generateSecurityHeaders } from '@digilogiclabs/platform-core/security-headers';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+
+  // Security headers — CSP, HSTS, X-Frame-Options, etc.
+  async headers() {
+    const keycloakIssuer = process.env.AUTH_KEYCLOAK_ISSUER || '';
+    const keycloakOrigin = keycloakIssuer ? new URL(keycloakIssuer).origin : '';
+
+    return generateSecurityHeaders({
+      cspConnectSrc: [
+        keycloakOrigin,
+        'https://api.stripe.com',
+      ].filter(Boolean),
+      cspFrameSrc: [
+        keycloakOrigin,
+        'https://js.stripe.com',
+        'https://hooks.stripe.com',
+      ].filter(Boolean),
+      cspScriptSrc: ['https://js.stripe.com'],
+      cspImgSrc: ['https://lh3.googleusercontent.com'],
+    });
+  },
+
+  webpack: (config, { isServer }) => {
+    // Stub server-only packages for client bundles.
+    // Use $ anchor to match exact package name — preserves subpath imports
+    // like @digilogiclabs/platform-core/auth (Edge-safe).
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        net: false,
+        tls: false,
+        dns: false,
+        child_process: false,
+        'node:stream': false,
+        'node:buffer': false,
+        'node:util': false,
+        'node:events': false,
+        'node:process': false,
+      };
+
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        // Stub main barrel only — subpaths like /auth and /security-headers
+        // are Edge-safe and must NOT be stubbed.
+        '@digilogiclabs/platform-core$': false,
+        'ioredis$': false,
+        'pg$': false,
+        'nodemailer$': false,
+        'bullmq$': false,
+      };
+    }
+
+    return config;
+  },
+};
+
+export default nextConfig;

package/src/templates/shared/contact/web/app/api/contact/route.ts

@@ -0,0 +1,113 @@
+/**
+ * Contact Form API
+ *
+ * POST — Submit a contact form message.
+ * Public endpoint with rate limiting. Sends email via Resend.
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { withPublicApi, escapeHtml } from '@/lib/api-security';
+import { sendEmail } from '@/lib/email/client';
+
+export const dynamic = 'force-dynamic';
+
+const CATEGORY_LABELS: Record<string, string> = {
+  general: 'General Inquiry',
+  support: 'Technical Support',
+  business: 'Business Inquiry',
+  feedback: 'Feedback',
+  other: 'Other',
+};
+
+const ContactSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters').max(100, 'Name is too long'),
+  email: z.string().email('Please enter a valid email address').max(255),
+  category: z.enum(['general', 'support', 'business', 'feedback', 'other'], {
+    errorMap: () => ({ message: 'Please select a category' }),
+  }),
+  message: z
+    .string()
+    .min(10, 'Message must be at least 10 characters')
+    .max(2000, 'Message is too long')
+    .refine((v) => !/<[^>]*>/.test(v), 'HTML tags are not allowed')
+    .refine(
+      (v) => !/(https?:\/\/|ftp:\/\/|www\.)\S+/i.test(v),
+      'Links are not allowed for security reasons'
+    ),
+});
+
+export const POST = withPublicApi(
+  {
+    operation: 'contact/post',
+    rateLimit: { limit: 5, windowSeconds: 300 }, // 5 per 5 min — strict
+  },
+  async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = ContactSchema.safeParse(body);
+
+    if (!parsed.success) {
+      const errors: Record<string, string> = {};
+      for (const issue of parsed.error.issues) {
+        const field = String(issue.path[0] ?? 'input');
+        if (!errors[field]) errors[field] = issue.message;
+      }
+      return NextResponse.json({ error: 'Validation failed', errors }, { status: 400 });
+    }
+
+    const { name, email, category, message } = parsed.data;
+    const categoryLabel = CATEGORY_LABELS[category] ?? category;
+
+    // Build plain-text email
+    const text = [
+      `New Contact Form Submission`,
+      ``,
+      `Name: ${name}`,
+      `Email: ${email}`,
+      `Category: ${categoryLabel}`,
+      ``,
+      `Message:`,
+      message,
+    ].join('\n');
+
+    // Build HTML email (escape all user input)
+    const html = `
+      <div style="font-family:sans-serif;max-width:600px;margin:0 auto">
+        <h2 style="border-bottom:2px solid #2563eb;padding-bottom:8px">New Contact Form Submission</h2>
+        <table style="width:100%;border-collapse:collapse">
+          <tr><td style="padding:8px 0;font-weight:bold;width:100px">Name:</td><td style="padding:8px 0">${escapeHtml(name)}</td></tr>
+          <tr><td style="padding:8px 0;font-weight:bold">Email:</td><td style="padding:8px 0">${escapeHtml(email)}</td></tr>
+          <tr><td style="padding:8px 0;font-weight:bold">Category:</td><td style="padding:8px 0">${escapeHtml(categoryLabel)}</td></tr>
+        </table>
+        <div style="background:#f3f4f6;padding:16px;border-radius:8px;margin-top:16px">
+          <strong>Message:</strong>
+          <p style="white-space:pre-wrap;margin:8px 0 0">${escapeHtml(message)}</p>
+        </div>
+        <p style="font-size:12px;color:#6b7280;margin-top:24px">
+          Sent from the contact form. Reply directly to respond to ${escapeHtml(name)}.
+        </p>
+      </div>`;
+
+    const adminEmail = process.env.ADMIN_EMAIL || process.env.EMAIL_FROM;
+    if (!adminEmail) {
+      console.error('[Contact] Neither ADMIN_EMAIL nor EMAIL_FROM is configured');
+      return NextResponse.json({ error: 'Server configuration error' }, { status: 500 });
+    }
+
+    const sent = await sendEmail({
+      to: adminEmail,
+      subject: `Contact: ${categoryLabel} — ${name}`,
+      html,
+      text,
+      replyTo: email,
+    });
+
+    if (!sent) {
+      return NextResponse.json(
+        { error: 'Failed to send message. Please try again later.' },
+        { status: 502 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  }
+);

package/src/templates/shared/contact/web/app/contact/page.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+
+const CATEGORIES = [
+  { value: 'general', label: 'General Inquiry' },
+  { value: 'support', label: 'Technical Support' },
+  { value: 'business', label: 'Business Inquiry' },
+  { value: 'feedback', label: 'Feedback' },
+  { value: 'other', label: 'Other' },
+] as const;
+
+type Status = 'idle' | 'submitting' | 'success' | 'error';
+
+export default function ContactPage() {
+  const [status, setStatus] = useState<Status>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus('submitting');
+    setErrorMessage('');
+    setFieldErrors({});
+
+    const formData = new FormData(e.currentTarget);
+    const body = {
+      name: formData.get('name') as string,
+      email: formData.get('email') as string,
+      category: formData.get('category') as string,
+      message: formData.get('message') as string,
+    };
+
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        if (data.errors) {
+          setFieldErrors(data.errors);
+        }
+        setErrorMessage(data.error || 'Something went wrong. Please try again.');
+        setStatus('error');
+        return;
+      }
+
+      setStatus('success');
+      (e.target as HTMLFormElement).reset();
+    } catch {
+      setErrorMessage('Network error. Please check your connection and try again.');
+      setStatus('error');
+    }
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-24 text-center">
+        <div className="rounded-2xl border border-green-200 bg-green-50 p-8 dark:border-green-800 dark:bg-green-950">
+          <h1 className="mb-4 text-2xl font-bold text-green-800 dark:text-green-200">
+            Message Sent
+          </h1>
+          <p className="text-green-700 dark:text-green-300">
+            Thank you for reaching out. We&apos;ll get back to you as soon as possible.
+          </p>
+          <button
+            onClick={() => setStatus('idle')}
+            className="mt-6 rounded-lg bg-green-600 px-6 py-2 text-sm font-medium text-white hover:bg-green-700"
+          >
+            Send Another Message
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-16 sm:py-24">
+      <div className="mb-10 text-center">
+        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Contact Us</h1>
+        <p className="mt-3 text-muted-foreground">
+          Have a question or need help? Fill out the form below and we&apos;ll get back to you.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Name */}
+        <div>
+          <label htmlFor="name" className="mb-1.5 block text-sm font-medium">
+            Name
+          </label>
+          <input
+            id="name"
+            name="name"
+            type="text"
+            required
+            minLength={2}
+            maxLength={100}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="Your name"
+          />
+          {fieldErrors.name && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.name}</p>
+          )}
+        </div>
+
+        {/* Email */}
+        <div>
+          <label htmlFor="email" className="mb-1.5 block text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            maxLength={255}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="you@example.com"
+          />
+          {fieldErrors.email && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.email}</p>
+          )}
+        </div>
+
+        {/* Category */}
+        <div>
+          <label htmlFor="category" className="mb-1.5 block text-sm font-medium">
+            Category
+          </label>
+          <select
+            id="category"
+            name="category"
+            required
+            defaultValue=""
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            <option value="" disabled>
+              Select a category
+            </option>
+            {CATEGORIES.map((cat) => (
+              <option key={cat.value} value={cat.value}>
+                {cat.label}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.category && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.category}</p>
+          )}
+        </div>
+
+        {/* Message */}
+        <div>
+          <label htmlFor="message" className="mb-1.5 block text-sm font-medium">
+            Message
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            required
+            minLength={10}
+            maxLength={2000}
+            rows={5}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="How can we help?"
+          />
+          {fieldErrors.message && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.message}</p>
+          )}
+        </div>
+
+        {/* Error banner */}
+        {status === 'error' && errorMessage && (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+            {errorMessage}
+          </div>
+        )}
+
+        {/* Submit */}
+        <button
+          type="submit"
+          disabled={status === 'submitting'}
+          className="w-full rounded-lg bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+        >
+          {status === 'submitting' ? 'Sending...' : 'Send Message'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/templates/shared/cookie-consent/web/components/cookie-consent.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * GDPR cookie consent banner.
+ *
+ * Stores consent status in localStorage. Shows a fixed bottom banner
+ * until the user accepts or declines. Customize the text and styling
+ * to match your app's branding.
+ */
+export function CookieConsent() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const consent = localStorage.getItem('cookie-consent');
+    if (!consent) setVisible(true);
+  }, []);
+
+  if (!visible) return null;
+
+  const handleChoice = (choice: 'accepted' | 'declined') => {
+    localStorage.setItem('cookie-consent', choice);
+    setVisible(false);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-gray-950">
+      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 sm:flex-row sm:justify-between">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          We use cookies to improve your experience.{' '}
+          <Link href="/privacy" className="underline hover:text-gray-900 dark:hover:text-gray-200">
+            Learn more
+          </Link>
+        </p>
+        <div className="flex gap-3">
+          <button
+            onClick={() => handleChoice('declined')}
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+          >
+            Decline
+          </button>
+          <button
+            onClick={() => handleChoice('accepted')}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/templates/shared/database/postgresql/web/drizzle.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'drizzle-kit';
+import 'dotenv/config';
+
+if (!process.env.DATABASE_URL) {
+  throw new Error('DATABASE_URL is not set in .env file');
+}
+
+export default {
+  schema: './lib/db/schema.ts',
+  out: './lib/db/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+  breakpoints: true,
+} satisfies Config;

package/src/templates/shared/database/postgresql/web/lib/db/drizzle.ts

@@ -0,0 +1,39 @@
+import { drizzle, PostgresJsDatabase } from 'drizzle-orm/postgres-js';
+import postgres, { Sql } from 'postgres';
+import * as schema from './schema';
+import { config } from '@/lib/config';
+
+let _client: Sql | null = null;
+let _db: PostgresJsDatabase<typeof schema> | null = null;
+
+export function isDatabaseConfigured(): boolean {
+  return !!process.env.DATABASE_URL;
+}
+
+function getClient(): Sql {
+  if (!_client) {
+    _client = postgres(config.db.url);
+  }
+  return _client;
+}
+
+function getDatabase(): PostgresJsDatabase<typeof schema> {
+  if (!_db) {
+    _db = drizzle(getClient(), { schema });
+  }
+  return _db;
+}
+
+/** Lazy-initialized postgres-js client (defers connection until first use). */
+export const client = new Proxy({} as Sql, {
+  get(_target, prop) {
+    return (getClient() as any)[prop];
+  },
+});
+
+/** Lazy-initialized Drizzle ORM instance with typed schema. */
+export const db = new Proxy({} as PostgresJsDatabase<typeof schema>, {
+  get(_target, prop) {
+    return (getDatabase() as any)[prop];
+  },
+});