create-githat-app 1.0.14 → 1.0.16

package/templates/saas/app/admin/page.tsx.hbs

@@ -0,0 +1,106 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Admin dashboard — auth-gated.
+ *
+ * Three tiles a B2B operator looks at on Monday morning:
+ *   1. Active members on the org
+ *   2. Subscription status (trial / active / past-due / canceled)
+ *   3. Usage against plan limits (seats, storage, API calls)
+ *
+ * Tile data is hardcoded in the starter — wire to your data layer.
+ * Real org info comes from useGitHat().org once the user has joined
+ * or created an org.
+ */
+export default function AdminPage() {
+  const { isSignedIn, user, isLoading } = useAuth();
+
+  if (isLoading) return <Loading />;
+  if (!isSignedIn) return <SignInPrompt />;
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '64rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <header style=\{{ marginBottom: 'var(--space-8)' }}>
+          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
+            Welcome back{user?.name ? `, ${user.name}` : ''}
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)' }}>
+            Your org dashboard. Wire each tile to real data.
+          </p>
+        </header>
+
+        <div style=\{{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: 'var(--space-4)',
+          marginBottom: 'var(--space-8)',
+        }}>
+          <Tile label="Members" value="—" hint="Active org members" />
+          <Tile label="Plan" value="Trial" hint="14 days remaining" />
+          <Tile label="Usage" value="—" hint="API calls this month" />
+        </div>
+
+        <nav style=\{{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: 'var(--space-3)',
+        }}>
+          <AdminLink href="/admin/team"     title="Team"     hint="Invite members, set roles" />
+          <AdminLink href="/admin/billing"  title="Billing"  hint="Subscription, invoices, payment method" />
+          <AdminLink href="/admin/settings" title="Settings" hint="Org name, custom domain, branding" />
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+function Tile({ label, value, hint }: { label: string; value: string; hint: string }) {
+  return (
+    <div style=\{{
+      padding: 'var(--space-5)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      border: '1px solid var(--border)',
+      background: 'var(--surface)',
+    }}>
+      <div style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>{label}</div>
+      <div style=\{{ fontSize: '2rem', fontWeight: 600 }}>{value}</div>
+      <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-subtle)', marginTop: 'var(--space-1)' }}>{hint}</div>
+    </div>
+  );
+}
+
+function AdminLink({ href, title, hint }: { href: string; title: string; hint: string }) {
+  return (
+    <Link href={href} style=\{{
+      display: 'block',
+      padding: 'var(--space-5)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      border: '1px solid var(--border)',
+      background: 'var(--surface)',
+      color: 'var(--fg)',
+      textDecoration: 'none',
+    }}>
+      <div style=\{{ fontWeight: 600, marginBottom: 'var(--space-1)' }}>{title} →</div>
+      <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)' }}>{hint}</div>
+    </Link>
+  );
+}
+
+function Loading() {
+  return <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)' }}>Loading…</div>;
+}
+
+function SignInPrompt() {
+  return (
+    <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center' }}>
+      <div style=\{{ textAlign: 'center' }}>
+        <h2 style=\{{ marginBottom: 'var(--space-3)' }}>Sign in to continue</h2>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+      </div>
+    </div>
+  );
+}

package/templates/saas/app/admin/team/page.tsx.hbs

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Team management — invite members, change roles.
+ *
+ * GitHat's API has the primitives (POST /org/{id}/invite, PATCH
+ * /org/{id}/members/{userId}/role). The starter renders the form
+ * shell; wire it to your /api/team route or directly to GitHat's
+ * REST endpoints depending on your architecture.
+ */
+export default function TeamPage() {
+  const { isSignedIn, isLoading } = useAuth();
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<'admin' | 'member'>('member');
+
+  if (isLoading) return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)' }}>Loading…</div>;
+  if (!isSignedIn) {
+    return (
+      <div style=\{{ padding: 'var(--space-8)', textAlign: 'center' }}>
+        <p>Sign in to manage your team.</p>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+      </div>
+    );
+  }
+
+  const sampleMembers = [
+    { id: '1', email: 'you@example.com', role: 'owner', name: 'You' },
+    { id: '2', email: 'jane@example.com', role: 'admin', name: 'Jane Cooper' },
+    { id: '3', email: 'kai@example.com', role: 'member', name: 'Kai Lee' },
+  ];
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '48rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <Link href="/admin" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+          ← Dashboard
+        </Link>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-6)' }}>
+          Team
+        </h1>
+
+        <section style=\{{
+          padding: 'var(--space-5)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          border: '1px solid var(--border)',
+          background: 'var(--surface)',
+          marginBottom: 'var(--space-6)',
+        }}>
+          <h2 style=\{{ fontSize: '1.125rem', marginBottom: 'var(--space-3)' }}>Invite member</h2>
+          <form
+            onSubmit={(e) => { e.preventDefault(); /* TODO: POST /api/team/invite { email, role } */ }}
+            style=\{{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}
+          >
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="teammate@example.com"
+              style=\{{
+                flex: '1 1 200px',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--bg)',
+                color: 'var(--fg)',
+              }}
+            />
+            <select
+              value={role}
+              onChange={(e) => setRole(e.target.value as 'admin' | 'member')}
+              style=\{{
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--bg)',
+                color: 'var(--fg)',
+              }}
+            >
+              <option value="member">Member</option>
+              <option value="admin">Admin</option>
+            </select>
+            <button type="submit" style=\{{
+              padding: 'var(--space-3) var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: 'none',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}>
+              Send invite
+            </button>
+          </form>
+        </section>
+
+        <h2 style=\{{ fontSize: '1.125rem', marginBottom: 'var(--space-3)' }}>Members</h2>
+        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0 }}>
+          {sampleMembers.map((m) => (
+            <li key={m.id} style=\{{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: 'var(--space-3) var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface)',
+              marginBottom: 'var(--space-2)',
+            }}>
+              <div>
+                <div style=\{{ fontWeight: 600 }}>{m.name}</div>
+                <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)' }}>{m.email}</div>
+              </div>
+              <span style=\{{
+                padding: 'var(--space-1) var(--space-3)',
+                borderRadius: 'var(--radius-full, 9999px)',
+                background: m.role === 'owner' ? 'var(--primary)' : 'var(--surface-sub)',
+                color: m.role === 'owner' ? 'var(--bg)' : 'var(--fg)',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+              }}>
+                {m.role}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/saas/app/globals.css.hbs

@@ -0,0 +1,87 @@
+/*
+ * Tailwind v4 — required because @githat/nextjs/styles is processed
+ * through @tailwindcss/postcss. Plain doesn't ship utility classes,
+ * but the import is needed for the auth pages to render styled.
+ */
+@import "tailwindcss";
+
+/*
+ * Plain template — self-contained globals.
+ *
+ * Defines the minimum CSS variables a GitHat app uses for layout and
+ * the auth-page styling that ships with @githat/nextjs/styles.
+ * Override these in your own files when you want a real theme.
+ *
+ * Light theme by default; flip --bg/--fg for dark.
+ */
+
+:root {
+  /* Surface */
+  --bg:           #ffffff;
+  --surface:      #fafafa;
+  --surface-sub:  #f4f4f5;
+
+  /* Borders */
+  --border:       #e5e7eb;
+
+  /* Foreground */
+  --fg:           #0a0a0a;
+  --fg-muted:     #525252;
+  --fg-subtle:    #737373;
+
+  /* Brand — change these two to re-skin the whole auth flow */
+  --primary:      #6366f1;
+  --accent:       #f59e0b;
+
+  /* Semantic */
+  --success:      #16a34a;
+  --warn:         #d97706;
+  --danger:       #dc2626;
+
+  /* Spacing — used by @githat/nextjs/styles */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  /* Radius */
+  --radius:    0.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  /* Fonts */
+  --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-wordmark: 'Instrument Serif', Georgia, serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:           #0a0a0a;
+    --surface:      #18181b;
+    --surface-sub:  #27272a;
+    --border:       #3f3f46;
+    --fg:           #fafafa;
+    --fg-muted:     #a1a1aa;
+    --fg-subtle:    #71717a;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/saas/app/layout.tsx.hbs

@@ -0,0 +1,41 @@
+import { GitHatProvider } from '@githat/nextjs';
+import '@githat/nextjs/styles';
+import './globals.css';
+
+export const metadata = {
+  title: '{{businessName}}',
+  description: '{{description}}',
+};
+
+export default function RootLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  return (
+    <html lang="en">
+      <body>
+        {/*
+          Plain template: no @githat/ui dep, no Wordmark. The
+          full-kit (`nextjs`) template uses @githat/ui for the
+          shared design system; the plain scaffold is the smallest
+          working app, so we avoid extra deps.
+        */}
+        <GitHatProvider config=\{{
+          publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          signInUrl: '/sign-in',
+          signUpUrl: '/sign-up',
+          afterSignInUrl: '/',
+          afterSignOutUrl: '/',
+        }}>
+          <header style=\{{
+            padding: '1rem 1.5rem',
+            borderBottom: '1px solid var(--border, #e5e7eb)',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+          }}>
+            <a href="/" style=\{{ textDecoration: 'none', color: 'inherit', fontWeight: 600 }}>
+              {{businessName}}
+            </a>
+          </header>
+          <main>{children}</main>
+        </GitHatProvider>
+      </body>
+    </html>
+  );
+}

package/templates/saas/app/page.tsx.hbs

@@ -0,0 +1,108 @@
+'use client';
+
+import Link from 'next/link';
+import { SignUpButton, useAuth } from '@githat/nextjs';
+
+/**
+ * SaaS landing page.
+ *
+ * Replaces Clerk + Stripe + Vercel + a starter kit. Demonstrates:
+ *  - GitHat orgs & RBAC out of the box (owner / admin / member)
+ *  - Sebastn subscription billing wired to /admin/billing
+ *  - One-stack deploy (this same project deploys to GitHat hosting)
+ *
+ * The homepage is the conversion surface; the signed-in product
+ * lives under /admin.
+ */
+export default function Home() {
+  const { isSignedIn } = useAuth();
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)' }}>
+      <section style=\{{
+        padding: 'var(--space-12) var(--space-4)',
+        textAlign: 'center',
+        maxWidth: '48rem',
+        margin: '0 auto',
+      }}>
+        <h1 style=\{{
+          fontFamily: 'var(--font-wordmark, Georgia, serif)',
+          fontSize: 'clamp(2rem, 5vw, 3rem)',
+          lineHeight: 1.1,
+          marginBottom: 'var(--space-3)',
+        }}>
+          {{businessName}}
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.25rem', marginBottom: 'var(--space-6)' }}>
+          The fastest way to ship a B2B product. Auth, teams, RBAC, and
+          subscription billing — wired up before you write a line.
+        </p>
+        <div style=\{{ display: 'flex', gap: 'var(--space-3)', justifyContent: 'center', flexWrap: 'wrap' }}>
+          {!isSignedIn ? (
+            <>
+              <SignUpButton />
+              <Link href="/pricing" style=\{{ alignSelf: 'center', color: 'var(--primary)' }}>
+                See pricing →
+              </Link>
+            </>
+          ) : (
+            <Link href="/admin" style=\{{
+              padding: 'var(--space-3) var(--space-6)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              fontWeight: 600,
+              textDecoration: 'none',
+            }}>
+              Open dashboard →
+            </Link>
+          )}
+        </div>
+      </section>
+
+      <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)' }}>
+        <div style=\{{
+          maxWidth: '64rem',
+          margin: '0 auto',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: 'var(--space-6)',
+        }}>
+          <Feature emoji="🏢" title="Orgs & teams" body="Create organisations, invite teammates, assign roles. RBAC built in (owner, admin, member)." />
+          <Feature emoji="💳" title="Subscriptions" body="Sebastn-powered billing — Stripe Checkout under the hood. Trials, plan changes, dunning, invoices, all handled." />
+          <Feature emoji="🚀" title="Ship in a weekend" body="Auth + payments + hosting are this one stack. No Vercel + Clerk + Stripe + a billing service to glue together." />
+        </div>
+      </section>
+
+      <section style=\{{ padding: 'var(--space-12) var(--space-4)', textAlign: 'center', maxWidth: '48rem', margin: '0 auto' }}>
+        <h2 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-3)' }}>
+          Simple pricing
+        </h2>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+          Free tier for the team trying us out. Paid tiers for the team that's growing.
+          Three plans, no hidden fees.
+        </p>
+        <Link href="/pricing" style=\{{
+          display: 'inline-block',
+          padding: 'var(--space-3) var(--space-6)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          border: '1px solid var(--border)',
+          color: 'var(--fg)',
+          textDecoration: 'none',
+        }}>
+          Compare plans →
+        </Link>
+      </section>
+    </div>
+  );
+}
+
+function Feature({ emoji, title, body }: { emoji: string; title: string; body: string }) {
+  return (
+    <div>
+      <div style=\{{ fontSize: '2rem', marginBottom: 'var(--space-2)' }} aria-hidden>{emoji}</div>
+      <h3 style=\{{ fontWeight: 600, marginBottom: 'var(--space-2)' }}>{title}</h3>
+      <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem' }}>{body}</p>
+    </div>
+  );
+}

package/templates/saas/app/pricing/page.tsx.hbs

@@ -0,0 +1,131 @@
+'use client';
+
+import Link from 'next/link';
+import { SignUpButton } from '@githat/nextjs';
+
+/**
+ * Pricing page — three tiers, monthly + annual toggle.
+ *
+ * Real apps wire each "Choose plan" button to a Sebastn checkout
+ * URL (or call /api/billing/checkout against your backend, which
+ * in turn calls Sebastn). The starter ships hardcoded prices so
+ * the page renders before any billing is wired.
+ *
+ * Tier IDs (sebastn_price_id) belong in your env, not in source —
+ * see /admin/billing for how the runtime page reads them.
+ */
+
+const TIERS = [
+  {
+    name: 'Starter',
+    price: 0,
+    blurb: 'For teams trying us out.',
+    features: ['1 org', '5 members', 'Email support', '1 GB storage'],
+    cta: 'Sign up free',
+    href: '/sign-up',
+    highlight: false,
+  },
+  {
+    name: 'Team',
+    price: 29,
+    blurb: 'For growing teams that need more.',
+    features: ['Unlimited orgs', '50 members', 'Priority support', '50 GB storage', 'API access'],
+    cta: 'Start 14-day trial',
+    href: '/sign-up?plan=team',
+    highlight: true,
+  },
+  {
+    name: 'Business',
+    price: 99,
+    blurb: 'For teams that need SSO and audit logs.',
+    features: ['Everything in Team', 'SSO (SAML)', 'Audit log', 'SLA support', 'Custom contract'],
+    cta: 'Contact sales',
+    href: '/contact',
+    highlight: false,
+  },
+];
+
+export default function PricingPage() {
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-12) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.5rem', textAlign: 'center', marginBottom: 'var(--space-3)' }}>
+          Pricing
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', textAlign: 'center', marginBottom: 'var(--space-8)' }}>
+          Free tier is real free. Upgrade when your team outgrows it.
+        </p>
+
+        <div style=\{{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+          gap: 'var(--space-4)',
+        }}>
+          {TIERS.map((tier) => (
+            <div key={tier.name} style=\{{
+              padding: 'var(--space-6)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: tier.highlight ? '2px solid var(--primary)' : '1px solid var(--border)',
+              background: 'var(--surface)',
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+              {tier.highlight && (
+                <div style=\{{
+                  alignSelf: 'flex-start',
+                  padding: 'var(--space-1) var(--space-2)',
+                  borderRadius: 'var(--radius-sm, 0.25rem)',
+                  background: 'var(--primary)',
+                  color: 'var(--bg)',
+                  fontSize: '0.75rem',
+                  fontWeight: 600,
+                  marginBottom: 'var(--space-3)',
+                }}>
+                  MOST POPULAR
+                </div>
+              )}
+              <h2 style=\{{ fontSize: '1.25rem', fontWeight: 600, marginBottom: 'var(--space-2)' }}>
+                {tier.name}
+              </h2>
+              <div style=\{{ marginBottom: 'var(--space-3)' }}>
+                <span style=\{{ fontSize: '2.5rem', fontWeight: 700 }}>
+                  ${tier.price}
+                </span>
+                {tier.price > 0 && (
+                  <span style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>/mo</span>
+                )}
+              </div>
+              <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-4)' }}>
+                {tier.blurb}
+              </p>
+              <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, marginBottom: 'var(--space-4)', flex: 1 }}>
+                {tier.features.map((f) => (
+                  <li key={f} style=\{{ padding: 'var(--space-1) 0', fontSize: '0.875rem' }}>
+                    ✓ {f}
+                  </li>
+                ))}
+              </ul>
+              {tier.name === 'Starter' ? (
+                <SignUpButton />
+              ) : (
+                <Link href={tier.href} style=\{{
+                  display: 'inline-block',
+                  padding: 'var(--space-3) var(--space-4)',
+                  borderRadius: 'var(--radius-md, 0.5rem)',
+                  background: tier.highlight ? 'var(--primary)' : 'var(--surface-sub)',
+                  color: tier.highlight ? 'var(--bg)' : 'var(--fg)',
+                  textDecoration: 'none',
+                  fontWeight: 600,
+                  textAlign: 'center',
+                  border: tier.highlight ? 'none' : '1px solid var(--border)',
+                }}>
+                  {tier.cta}
+                </Link>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/saas/next.config.ts.hbs

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
+
+export default nextConfig;

package/templates/saas/postcss.config.mjs.hbs

@@ -0,0 +1,14 @@
+/*
+ * Plain template — Tailwind v4 PostCSS plugin is required even though
+ * the plain scaffold doesn't use Tailwind utility classes. The auth
+ * page CSS shipped by `@githat/nextjs/styles` is processed through
+ * @tailwindcss/postcss at build time. Drop this config and the
+ * auth pages render unstyled.
+ */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/templates/saas/proxy.ts.hbs

@@ -0,0 +1,10 @@
+import { authProxy } from '@githat/nextjs/proxy';
+
+export const proxy = authProxy({
+  publicRoutes: ['/', '/sign-in', '/sign-up'{{#if includeForgotPassword}}, '/forgot-password', '/reset-password'{{/if}}{{#if includeEmailVerification}}, '/verify-email'{{/if}}],
+  signInUrl: '/sign-in',
+});
+
+export const config = {
+  matcher: ['/((?!_next|api|.*\\..*).*)'],
+};

package/templates/saas/tsconfig.json.hbs

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}