create-ej-app 25.0.0 → 27.0.0

package/template/saas-starter/src/app/api/webhooks/stripe/route.ts

@@ -0,0 +1,94 @@
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import type Stripe from 'stripe'
+import { db } from '~/db'
+import { stripeWebhooksEventsTable } from '~/db/schema'
+import { env } from '~/env'
+import { syncSubscriptionFromStripe } from '~/lib/billing'
+import { stripeClient } from '~/lib/stripe'
+
+const RELEVANT_EVENTS: ReadonlySet<string> = new Set([
+  'checkout.session.completed',
+  'customer.subscription.created',
+  'customer.subscription.updated',
+  'customer.subscription.deleted',
+  'customer.subscription.trial_will_end',
+  'customer.subscription.paused',
+  'customer.subscription.resumed',
+  'invoice.paid',
+  'invoice.payment_succeeded',
+  'invoice.payment_failed'
+])
+
+const extractCustomerId = (event: Stripe.Event): string | null => {
+  const object = event.data.object as {
+    customer?: string | { id: string } | null
+  }
+  const customer = object.customer
+  if (!customer) return null
+  return typeof customer === 'string' ? customer : customer.id
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.text()
+  const signature = req.headers.get('stripe-signature')
+
+  if (!signature) {
+    return new NextResponse('Missing stripe-signature header', { status: 400 })
+  }
+
+  let event: Stripe.Event
+  try {
+    event = stripeClient.webhooks.constructEvent(
+      body,
+      signature,
+      env.STRIPE_WEBHOOK_SECRET
+    )
+  } catch (error) {
+    console.error('Stripe webhook signature verification failed:', error)
+    return new NextResponse('Unauthorized', { status: 400 })
+  }
+
+  if (!RELEVANT_EVENTS.has(event.type)) {
+    return NextResponse.json({ received: true, ignored: true })
+  }
+
+  const existing = await db.query.stripeWebhooksEventsTable.findFirst({
+    where: eq(stripeWebhooksEventsTable.id, event.id)
+  })
+
+  if (existing?.processed) {
+    return NextResponse.json({ received: true, duplicate: true })
+  }
+
+  if (!existing) {
+    await db
+      .insert(stripeWebhooksEventsTable)
+      .values({ id: event.id, type: event.type })
+      .onConflictDoNothing()
+  }
+
+  try {
+    const customerId = extractCustomerId(event)
+    if (customerId) {
+      await syncSubscriptionFromStripe(customerId)
+    }
+
+    await db
+      .update(stripeWebhooksEventsTable)
+      .set({ processed: true, processedAt: new Date(), error: null })
+      .where(eq(stripeWebhooksEventsTable.id, event.id))
+
+    return NextResponse.json({ received: true, processed: true })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    console.error(`Failed to process Stripe event ${event.id}:`, error)
+
+    await db
+      .update(stripeWebhooksEventsTable)
+      .set({ error: message, payload: event as unknown })
+      .where(eq(stripeWebhooksEventsTable.id, event.id))
+
+    return new NextResponse('Webhook handler failed', { status: 500 })
+  }
+}

package/template/saas-starter/src/app/error.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { useEffect } from 'react'
+import { RouteError } from '~/components/route-error'
+
+/**
+ * Root segment error boundary.
+ *
+ * Catches runtime errors in pages and nested layouts under the root layout.
+ * Does not catch errors thrown in the root layout itself; see `global-error.tsx`.
+ */
+export default function Error({
+  error,
+  unstable_retry
+}: {
+  error: Error & { digest?: string }
+  unstable_retry: () => void
+}) {
+  const pathname = usePathname()
+  const homeHref =
+    pathname?.startsWith('/admin') && pathname !== '/admin' ? '/admin' : '/'
+  const homeLabel = homeHref === '/admin' ? 'Back to Admin' : 'Go Home'
+
+  useEffect(() => {
+    console.error('Route error boundary:', error)
+  }, [error])
+
+  return (
+    <RouteError
+      error={error}
+      onRetry={unstable_retry}
+      homeHref={homeHref}
+      homeLabel={homeLabel}
+    />
+  )
+}

package/template/saas-starter/src/app/fonts/index.ts

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Global font definitions shared across all route groups.
+ *
+ * Fonts are defined here in a single module so that `next/font/local` generates
+ * a stable CSS module hash regardless of which layout imports them. Defining
+ * fonts inside individual route-group layouts (e.g. `(marketing)` or `(admin)`)
+ * causes the server and client to produce different class name hashes, leading
+ * to React hydration mismatches.
+ *
+ * Usage:
+ *   import { geistMono, geistSans } from '~/app/fonts'
+ *   <body className={`${geistSans.variable} ${geistMono.variable}`}>
+ *
+ * @module app/fonts/index
+ */
+
+import localFont from 'next/font/local'
+
+/**
+ * Geist Sans - primary variable font for body and UI text.
+ *
+ * Exposed as the CSS custom property `--font-geist-sans` so it can be
+ * referenced in Tailwind via `font-sans`.
+ *
+ * @see https://vercel.com/font/sans
+ */
+export const geistSans = localFont({
+  src: '../fonts/geist-sans/Geist-Variable.woff2',
+  variable: '--font-geist-sans',
+  weight: '100 900'
+})
+
+/**
+ * Geist Mono - monospace variable font for code blocks, badges, and
+ * any UI element that benefits from fixed-width rendering.
+ *
+ * Exposed as the CSS custom property `--font-geist-mono`.
+ *
+ * `adjustFontFallback` is disabled because the automatic metric adjustment
+ * produces undesirable layout shifts with the custom fallback stack below.
+ *
+ * @see https://vercel.com/font/mono
+ */
+export const geistMono = localFont({
+  src: '../fonts/geist-mono/GeistMono-Variable.woff2',
+  variable: '--font-geist-mono',
+  adjustFontFallback: false,
+  fallback: [
+    'ui-monospace',
+    'SFMono-Regular',
+    'Roboto Mono',
+    'Menlo',
+    'Monaco',
+    'Liberation Mono',
+    'DejaVu Sans Mono',
+    'Courier New',
+    'monospace'
+  ],
+  weight: '100 900'
+})

package/template/saas-starter/src/app/global-error.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect } from 'react'
+import { RouteError } from '~/components/route-error'
+import { siteConfig } from '~/lib/siteConfig'
+import { geistMono, geistSans } from './fonts'
+import './globals.css'
+
+/**
+ * Root layout error boundary.
+ *
+ * Replaces the entire root layout when an error is thrown there.
+ * Must define its own document shell (`html` / `body`) and styles.
+ */
+export default function GlobalError({
+  error,
+  unstable_retry
+}: {
+  error: Error & { digest?: string }
+  unstable_retry: () => void
+}) {
+  useEffect(() => {
+    console.error('Global error boundary:', error)
+  }, [error])
+
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body>
+        <title>This Page Failed to Load | {siteConfig.name}</title>
+        <RouteError error={error} onRetry={unstable_retry} />
+      </body>
+    </html>
+  )
+}

package/template/saas-starter/src/app/globals.css

@@ -0,0 +1,269 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-heading: var(--font-geist-sans);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --success: oklch(0.552 0.152 149.579);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.574 0.188 70.08);
+  --warning-foreground: oklch(1 0 0);
+  --info: oklch(0.569 0.165 254.624);
+  --info-foreground: oklch(1 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  --success: oklch(0.723 0.192 149.579);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.707 0.165 254.624);
+  --info-foreground: oklch(0.205 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    @apply font-sans antialiased;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply text-foreground bg-background min-h-screen;
+  }
+
+  button:not([disabled]),
+  [role='button']:not([disabled]) {
+    cursor: pointer;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+}
+
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@custom-variant data-open {
+  &:where([data-state='open']),
+  &:where([data-open]:not([data-open='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state='closed']),
+  &:where([data-closed]:not([data-closed='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state='checked']),
+  &:where([data-checked]:not([data-checked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state='unchecked']),
+  &:where([data-unchecked]:not([data-unchecked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected='true']) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled='true']),
+  &:where([data-disabled]:not([data-disabled='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state='active']),
+  &:where([data-active]:not([data-active='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation='horizontal']) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation='vertical']) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility container {
+  @apply mx-auto p-4;
+}

package/template/saas-starter/src/app/layout.tsx

@@ -0,0 +1,77 @@
+/**
+ * @fileoverview Root layout: document shell, fonts, metadata, and the
+ * client providers every page shares (TanStack Query, theme, tooltips,
+ * toasts, and the navigation progress bar).
+ *
+ * @module app/layout
+ */
+
+import type { Metadata, Viewport } from 'next'
+import { Loader } from '~/components/loader'
+import { ReactQueryProvider } from '~/components/react-query-provider'
+import { ScreenSize } from '~/components/screen-size'
+import { ThemeProvider } from '~/components/theme-provider'
+import { Toaster } from '~/components/ui/sonner'
+import { TooltipProvider } from '~/components/ui/tooltip'
+import { env } from '~/env'
+import { siteConfig } from '~/lib/siteConfig'
+import { geistMono, geistSans } from './fonts'
+import './globals.css'
+
+export const metadata: Metadata = {
+  metadataBase: new URL(env.BETTER_AUTH_URL),
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`
+  },
+  description: siteConfig.description,
+  applicationName: siteConfig.name,
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    siteName: siteConfig.name,
+    description: siteConfig.description
+  },
+  twitter: {
+    card: 'summary_large_image',
+    description: siteConfig.description
+  }
+}
+
+/** Browser chrome colors, matching `--background` in globals.css. */
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' }
+  ]
+}
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body>
+        <ReactQueryProvider>
+          <ThemeProvider>
+            <TooltipProvider>
+              <Loader />
+              {children}
+              {env.APP_ENV === 'development' ? <ScreenSize /> : null}
+              <Toaster />
+            </TooltipProvider>
+          </ThemeProvider>
+        </ReactQueryProvider>
+      </body>
+    </html>
+  )
+}
+
+/** Renders every request dynamically, so env-driven metadata stays current. */
+export const dynamic = 'force-dynamic'

package/template/saas-starter/src/app/not-found.tsx

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview 404 Not Found Page
+ *
+ * Global catch-all page displayed when a route is not found.
+ * Redirects users back to the appropriate home page based on the current route context.
+ *
+ * **Behavior:**
+ * - Admin routes (/admin/*) redirect to /admin
+ * - All other routes redirect to /
+ *
+ * @module app/not-found
+ */
+
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Button } from '~/components/ui/button'
+
+/**
+ * Not Found Page Component
+ *
+ * Displays a 404 error message with context-aware home button.
+ * Uses the current pathname to determine the appropriate home route.
+ *
+ * @returns {JSX.Element} 404 error page with navigation button
+ */
+export default function NotFound() {
+  const pathname = usePathname()
+  const homeRoute =
+    pathname?.startsWith('/admin') && pathname !== '/admin' ? '/admin' : '/'
+
+  return (
+    <main className="bg-background text-foreground flex min-h-screen flex-col">
+      <section className="flex min-h-[60vh] flex-col items-center justify-center px-4">
+        <div className="text-center">
+          <h1 className="text-foreground mb-2 text-6xl font-bold">404</h1>
+          <p className="text-muted-foreground mb-8 text-xl">Page not found</p>
+          <p className="text-muted-foreground mb-8 max-w-md text-base">
+            The page you&apos;re looking for doesn&apos;t exist.
+          </p>
+          <Button asChild>
+            <Link href={homeRoute}>Return Home</Link>
+          </Button>
+        </div>
+      </section>
+    </main>
+  )
+}

package/template/saas-starter/src/app/robots.ts

@@ -0,0 +1,36 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+/** Renders every request dynamically, so the environment check is live. */
+export const dynamic = 'force-dynamic'
+
+/**
+ * robots.txt. Staging blocks every crawler; production keeps signed-in
+ * surfaces and the API out of search results.
+ */
+export default function robots(): MetadataRoute.Robots {
+  if (env.APP_ENV === 'staging') {
+    return { rules: [{ userAgent: '*', disallow: '/' }] }
+  }
+
+  const baseUrl = env.BETTER_AUTH_URL
+
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: [
+          '/api/',
+          '/admin',
+          '/app',
+          '/accept-invitation',
+          '/profile',
+          '/support'
+        ]
+      }
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl
+  }
+}

package/template/saas-starter/src/app/sitemap.ts

@@ -0,0 +1,21 @@
+import type { MetadataRoute } from 'next'
+import { env } from '~/env'
+
+export const dynamic = 'force-dynamic'
+
+/** Public pages only. Staging returns an empty sitemap. */
+export default function sitemap(): MetadataRoute.Sitemap {
+  if (env.APP_ENV === 'staging') return []
+
+  const baseUrl = env.BETTER_AUTH_URL
+  const lastModified = new Date()
+
+  const routes = ['/', '/contact-us', '/privacy', '/terms', '/login']
+
+  return routes.map(path => ({
+    url: `${baseUrl}${path === '/' ? '' : path}`,
+    lastModified,
+    changeFrequency: path === '/' ? 'weekly' : 'monthly',
+    priority: path === '/' ? 1 : 0.7
+  }))
+}