Build a White-Label SaaS Platform with Tenant Theming

// src/lib/tenant-config.ts
import { z } from 'zod';

const hex = z.string().regex(/^#[0-9a-fA-F]{6}$/);

export const TenantTheme = z.object({
  primaryColor: hex,
  backgroundColor: hex,
  // Allowlist, not free text: the value ends up in a CSS variable
  fontFamily: z.enum(['Inter', 'Roboto', 'Open Sans', 'Lato']).default('Inter'),
  borderRadius: z.enum(['none', 'sm', 'md', 'lg', 'full']).default('md'),
  logoUrl: z.url({ protocol: /^https$/ }),
});

export const TenantFeatures = z.object({
  timeTracking: z.boolean().default(false),
  ganttChart: z.boolean().default(false),
  maxUsers: z.number().int().positive().default(25),
  maxProjects: z.number().int().positive().default(10),
  hidePoweredBy: z.boolean().default(false),
});

export const TenantConfig = z.object({
  id: z.uuid(),
  slug: z.string().regex(/^[a-z0-9-]+$/),
  name: z.string(),
  customDomain: z.string().nullish(),
  theme: TenantTheme,
  features: TenantFeatures,
});

export type TenantConfig = z.infer<typeof TenantConfig>;
export type TenantTheme = z.infer<typeof TenantTheme>;

// src/lib/tenant-store.ts
import { Redis } from 'ioredis';
import { prisma } from './prisma';
import { TenantConfig } from './tenant-config';

const redis = new Redis(process.env.REDIS_URL!);
const TTL_SECONDS = 300;
async function cached(key: string, load: () => Promise<unknown | null>) {
  const hit = await redis.get(key);
  if (hit) return TenantConfig.parse(JSON.parse(hit));
  const row = await load();
  if (!row) return null;
  const config = TenantConfig.parse(row);
  await redis.set(key, JSON.stringify(config), 'EX', TTL_SECONDS);
  return config;
}

export const getTenantByDomain = (domain: string) =>
  cached(`tenant:domain:${domain}`, () =>
    prisma.tenant.findFirst({ where: { customDomain: domain, active: true } }));

export const getTenantBySlug = (slug: string) =>
  cached(`tenant:slug:${slug}`, () =>
    prisma.tenant.findFirst({ where: { slug, active: true } }));

export async function invalidateTenantCache(tenantId: string) {
  const t = await prisma.tenant.findUnique({ where: { id: tenantId } });
  if (!t) return;
  await redis.del(`tenant:slug:${t.slug}`);
  if (t.customDomain) await redis.del(`tenant:domain:${t.customDomain}`);
}

// src/proxy.ts  (named middleware.ts before Next.js 16)
import { NextRequest, NextResponse } from 'next/server';
import { getTenantByDomain, getTenantBySlug } from '@/lib/tenant-store';

const BASE_DOMAIN = process.env.BASE_DOMAIN ?? 'app.projecthub.io';
export async function proxy(request: NextRequest) {
  const headers = new Headers(request.headers);
  headers.delete('x-tenant-slug');

  const host = request.nextUrl.hostname.toLowerCase(); // no port

  let tenant = await getTenantByDomain(host);
  if (!tenant && host.endsWith(`.${BASE_DOMAIN}`)) {
    tenant = await getTenantBySlug(host.slice(0, -(BASE_DOMAIN.length + 1)));
  }
  if (!tenant) return new NextResponse('Unknown tenant', { status: 404 });

  headers.set('x-tenant-slug', tenant.slug);
  return NextResponse.next({ request: { headers } });
}

export const config = {
  matcher: ['/((?!_next/|api/tls-allowed|favicon.ico).*)'],
};

// src/app/layout.tsx
import { headers } from 'next/headers';
import { notFound } from 'next/navigation';
import { getTenantBySlug } from '@/lib/tenant-store';
import { TenantProvider } from '@/components/tenant-provider';
import './globals.css';

const RADIUS = { none: '0px', sm: '4px', md: '8px', lg: '12px', full: '9999px' };

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const slug = (await headers()).get('x-tenant-slug');
  const tenant = slug ? await getTenantBySlug(slug) : null;
  if (!tenant) notFound();
  const t = tenant.theme;

  const vars = {
    '--tenant-primary': t.primaryColor,
    '--tenant-background': t.backgroundColor,
    '--tenant-font': `'${t.fontFamily}', sans-serif`,
    '--tenant-radius': RADIUS[t.borderRadius],
  } as React.CSSProperties;

  return (
    <html lang="en" style={vars}>
      <body className="bg-background font-tenant">
        <TenantProvider tenant={tenant}>{children}</TenantProvider>
      </body>
    </html>
  );
}

/* src/app/globals.css */
@import 'tailwindcss';

:root {
  --tenant-primary: #3b82f6;
  --tenant-background: #ffffff;
  --tenant-font: 'Inter', sans-serif;
  --tenant-radius: 8px;
}

@theme inline {
  --color-primary: var(--tenant-primary);
  --color-background: var(--tenant-background);
  --font-tenant: var(--tenant-font);
  --radius-tenant: var(--tenant-radius);
}

// src/app/api/projects/[id]/gantt/route.ts, same check at the top of every gated handler
const slug = (await headers()).get('x-tenant-slug');
const tenant = slug ? await getTenantBySlug(slug) : null;
if (!tenant?.features.ganttChart) return Response.json({ error: 'feature_disabled' }, { status: 403 });

# /etc/caddy/Caddyfile
{
	on_demand_tls {
		ask http://127.0.0.1:3000/api/tls-allowed
	}
}

https:// {
	tls {
		on_demand
	}
	# the ask endpoint must not be reachable from the internet
	respond /api/tls-allowed 404
	reverse_proxy 127.0.0.1:3000
}

// src/app/api/tls-allowed/route.ts
import { prisma } from '@/lib/prisma';

export async function GET(req: Request) {
  const domain = new URL(req.url).searchParams.get('domain')?.toLowerCase();
  if (!domain) return new Response(null, { status: 400 });
  const ok = await prisma.tenant.findFirst({ where: { customDomain: domain, active: true } });
  return new Response(null, { status: ok ? 200 : 404 });
}

// src/lib/domain-manager.ts
import { resolveCname, resolveTxt } from 'node:dns/promises';

export async function isDomainVerified(domain: string, verifyToken: string) {
  const cnames = await resolveCname(domain).catch(() => [] as string[]);
  const txts = (await resolveTxt(`_projecthub.${domain}`).catch(() => [] as string[][])).flat();
  return (
    cnames.some((c) => c.replace(/\.$/, '').toLowerCase() === 'app.projecthub.io') ||
    txts.includes(`verify=${verifyToken}`)
  );
}