create-ej-app 24.0.0 → 26.0.0

package/template/saas-starter/src/app/(auth)/login/page.tsx

@@ -0,0 +1,87 @@
+import { Terminal } from 'lucide-react'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Separator } from '~/components/ui/separator'
+import { getAuthSession } from '~/lib/auth'
+import { EmailLoginForm } from './email-login-form'
+import { SocialLoginButtons } from './social-login-buttons'
+
+function sanitizeCallback(value: string | string[] | undefined) {
+  if (typeof value !== 'string') return null
+  if (!value.startsWith('/') || value.startsWith('//')) return null
+  return value
+}
+
+export default async function LoginPage({
+  searchParams
+}: {
+  searchParams?: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const resolvedParams = (await searchParams) ?? {}
+  const callbackUrl = sanitizeCallback(resolvedParams.callbackUrl)
+
+  const authSession = await getAuthSession()
+
+  if (authSession) {
+    return redirect(callbackUrl ?? (authSession.isAdmin ? '/admin' : '/app'))
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Terminal className="text-primary size-6" />
+          </div>
+          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
+          <CardDescription className="text-muted-foreground text-sm">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
+            <p className="text-muted-foreground text-sm">
+              <strong>New to our site?</strong> No need to create a separate
+              account. Simply use one of the options below to both sign up and
+              log in.
+            </p>
+          </div>
+
+          <EmailLoginForm callbackUrl={callbackUrl} />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background text-muted-foreground px-2">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <SocialLoginButtons callbackUrl={callbackUrl} />
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Separator className="my-2" />
+          <div className="text-muted-foreground text-center text-sm">
+            <Link
+              href="/"
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              Return to home page
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </main>
+  )
+}

package/template/saas-starter/src/app/(auth)/login/social-login-buttons.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { Button } from '~/components/ui/button'
+import { getLastUsedLoginMethod, signIn } from '~/lib/auth-client'
+
+export const SocialLoginButtons = ({
+  callbackUrl
+}: {
+  callbackUrl?: string | null
+}) => {
+  const lastUsedLoginMethod = getLastUsedLoginMethod()
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'google',
+            callbackURL: callbackUrl || '/login'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path
+              fill="#4285F4"
+              d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+            />
+            <path
+              fill="#34A853"
+              d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+            />
+          </g>
+        </svg>
+        Continue with Google
+        {lastUsedLoginMethod === 'google' ? ' (last used)' : ''}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'github',
+            callbackURL: callbackUrl || '/login'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+        </svg>
+        Continue with GitHub
+        {lastUsedLoginMethod === 'github' ? ' (last used)' : ''}
+      </Button>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/accept-invitation-form.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { Button } from '~/components/ui/button'
+import { organization, signOut } from '~/lib/auth-client'
+
+export function AcceptInvitationForm({
+  invitationId,
+  organizationName
+}: {
+  invitationId: string
+  organizationName: string
+}) {
+  const router = useRouter()
+  const [accepting, setAccepting] = useState(false)
+  const [declining, setDeclining] = useState(false)
+
+  async function handleAccept() {
+    setAccepting(true)
+    const { error } = await organization.acceptInvitation({ invitationId })
+    if (error) {
+      toast.error(error.message ?? 'Failed to accept invitation')
+      setAccepting(false)
+      return
+    }
+    toast.success(`You've joined ${organizationName}`)
+    router.push('/app')
+  }
+
+  async function handleDecline() {
+    setDeclining(true)
+    const { error } = await organization.rejectInvitation({ invitationId })
+    if (error) {
+      toast.error(error.message ?? 'Failed to decline invitation')
+      setDeclining(false)
+      return
+    }
+    toast('Invitation declined')
+    router.push('/')
+  }
+
+  const disabled = accepting || declining
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Button onClick={handleAccept} disabled={disabled} className="w-full">
+        {accepting ? 'Accepting...' : 'Accept invitation'}
+      </Button>
+      <Button
+        onClick={handleDecline}
+        disabled={disabled}
+        variant="outline"
+        className="w-full"
+      >
+        {declining ? 'Declining...' : 'Decline'}
+      </Button>
+    </div>
+  )
+}
+
+export function WrongAccountActions({
+  invitationId
+}: {
+  invitationId: string
+}) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+
+  async function handleSwitch() {
+    setLoading(true)
+    await signOut()
+    router.push(`/login?callbackUrl=/accept-invitation/${invitationId}`)
+  }
+
+  return (
+    <div className="flex justify-center gap-3">
+      <Button asChild variant="outline">
+        <Link href="/">Return home</Link>
+      </Button>
+      <Button onClick={handleSwitch} disabled={loading}>
+        {loading ? 'Signing out...' : 'Switch account'}
+      </Button>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/page.tsx

@@ -0,0 +1,167 @@
+import { eq } from 'drizzle-orm'
+import { Building2 } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { db } from '~/db'
+import { invitationsTable } from '~/db/schema'
+import { getAuthSession } from '~/lib/auth'
+import {
+  AcceptInvitationForm,
+  WrongAccountActions
+} from './accept-invitation-form'
+
+export default async function AcceptInvitationPage({
+  params
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  const invitation = await db.query.invitationsTable.findFirst({
+    where: eq(invitationsTable.id, id),
+    with: {
+      organization: {
+        columns: {
+          id: true,
+          name: true
+        }
+      },
+      user: {
+        columns: {
+          id: true,
+          name: true
+        }
+      }
+    },
+    columns: {
+      id: true,
+      status: true,
+      expiresAt: true,
+      email: true,
+      role: true
+    }
+  })
+
+  if (!invitation || invitation.status !== 'pending') {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Invitation not found</CardTitle>
+            <CardDescription>
+              This invitation link is invalid or has already been used.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Button asChild variant="outline">
+              <Link href="/">Return home</Link>
+            </Button>
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  if (invitation.expiresAt && invitation.expiresAt < new Date()) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Invitation expired</CardTitle>
+            <CardDescription>
+              This invitation to <strong>{invitation.organization.name}</strong>{' '}
+              has expired. Ask your organization admin for a new one.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Button asChild variant="outline">
+              <Link href="/">Return home</Link>
+            </Button>
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+              <Building2 className="text-primary size-6" />
+            </div>
+            <CardTitle>You&apos;ve been invited</CardTitle>
+            <CardDescription>
+              <strong>{invitation.user.name}</strong> invited you to join{' '}
+              <strong>{invitation.organization.name}</strong>. Sign in to
+              accept.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button asChild className="w-full">
+              <Link href={`/login?callbackUrl=/accept-invitation/${id}`}>
+                Sign in to accept
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </main>
+    )
+  }
+
+  if (authSession.user.email.toLowerCase() !== invitation.email.toLowerCase()) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-4 py-12">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <CardTitle>Wrong account</CardTitle>
+            <CardDescription>
+              This invitation was sent to <strong>{invitation.email}</strong>{' '}
+              but you&apos;re signed in as{' '}
+              <strong>{authSession.user.email}</strong>. Sign in with the
+              correct account to accept.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <WrongAccountActions invitationId={id} />
+          </CardFooter>
+        </Card>
+      </main>
+    )
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-4 py-12">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Building2 className="text-primary size-6" />
+          </div>
+          <CardTitle>Join {invitation.organization.name}</CardTitle>
+          <CardDescription>
+            <strong>{invitation.user.name}</strong> has invited you to join{' '}
+            <strong>{invitation.organization.name}</strong>
+            {invitation.role ? ` as ${invitation.role}` : ''}.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AcceptInvitationForm
+            invitationId={id}
+            organizationName={invitation.organization.name}
+          />
+        </CardContent>
+      </Card>
+    </main>
+  )
+}

package/template/saas-starter/src/app/(marketing)/layout.tsx

@@ -0,0 +1,14 @@
+import { SiteFooter } from '~/components/site-footer'
+
+export default async function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <div className="flex min-h-screen flex-col space-y-4">
+      <main className="flex-1">{children}</main>
+      <SiteFooter />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(marketing)/page.tsx

@@ -0,0 +1,3 @@
+export default async function HomePage() {
+  return <div>Hello, World!</div>
+}

package/template/saas-starter/src/app/(marketing)/privacy/page.tsx

@@ -0,0 +1,3 @@
+export default async function PrivacyPage() {
+  return <div>Hello, World!</div>
+}

package/template/saas-starter/src/app/(marketing)/terms/page.tsx

@@ -0,0 +1,3 @@
+export default async function TermsPage() {
+  return <div>Hello, World!</div>
+}

package/template/saas-starter/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from 'better-auth/next-js'
+import { auth } from '~/lib/auth'
+
+export const { GET, POST } = toNextJsHandler(auth.handler)

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 })
+  }
+}