create-softeneers-app 0.2.2 → 0.2.4

package/templates/tanstack-start/src/routes/api/webhooks/stripe.ts

@@ -0,0 +1,43 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { constructWebhookEvent, createStripe } from '@softeneers/payments'
+
+import { env } from '../../../server/env'
+
+const stripe = createStripe(env.STRIPE_SECRET_KEY)
+
+// Catch-all Stripe webhook server route. Reads the raw body for signature
+// verification and handles both payment and subscription events.
+export const Route = createFileRoute('/api/webhooks/stripe')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const signature = request.headers.get('stripe-signature')
+        if (!signature) return new Response('Missing stripe-signature header.', { status: 400 })
+
+        let event
+        try {
+          event = constructWebhookEvent(stripe, await request.text(), signature, env.STRIPE_WEBHOOK_SECRET)
+        } catch (error) {
+          console.error('Stripe webhook signature verification failed:', error)
+          return new Response('Invalid signature.', { status: 400 })
+        }
+
+        switch (event.type) {
+          case 'checkout.session.completed':
+            console.log('✓ checkout.session.completed', event.data.object.id)
+            break
+          case 'customer.subscription.created':
+          case 'customer.subscription.updated':
+          case 'customer.subscription.deleted':
+            console.log(`✓ ${event.type}`, event.data.object.id)
+            break
+          default:
+            console.log('Unhandled Stripe event:', event.type)
+        }
+
+        return Response.json({ received: true })
+      },
+    },
+  },
+})

package/templates/tanstack-start/src/routes/billing.tsx

@@ -0,0 +1,59 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+
+import { startCheckout, startSubscription } from '../server/payments'
+
+export const Route = createFileRoute('/billing')({ component: Billing })
+
+function Billing() {
+  const [status, setStatus] = useState({ paid: false, subscribed: false, canceled: false })
+
+  // Read the Stripe redirect result on the client (avoids a hydration mismatch).
+  useEffect(() => {
+    const p = new URLSearchParams(window.location.search)
+    setStatus({
+      paid: p.get('paid') === '1',
+      subscribed: p.get('subscribed') === '1',
+      canceled: p.get('canceled') === '1',
+    })
+  }, [])
+
+  async function buy() {
+    const { url } = await startCheckout()
+    if (url) window.location.href = url
+  }
+  async function subscribe() {
+    const { url } = await startSubscription()
+    if (url) window.location.href = url
+  }
+
+  return (
+    <div className="mx-auto max-w-xl p-8">
+      <h1 className="text-3xl font-bold">Billing</h1>
+      <p className="mt-1 text-gray-500">Stripe checkout — add your keys to .env and this just works.</p>
+
+      {status.paid && (
+        <p className="mt-4 rounded bg-green-50 p-3 text-green-700">Payment successful — thank you!</p>
+      )}
+      {status.subscribed && (
+        <p className="mt-4 rounded bg-green-50 p-3 text-green-700">You're subscribed — thank you!</p>
+      )}
+      {status.canceled && (
+        <p className="mt-4 rounded bg-yellow-50 p-3 text-yellow-700">Checkout canceled.</p>
+      )}
+
+      <div className="mt-6 flex gap-3">
+        <button className="rounded bg-black px-5 py-2.5 font-medium text-white" type="button" onClick={buy}>
+          Buy once
+        </button>
+        <button
+          className="rounded border border-gray-300 px-5 py-2.5 font-medium"
+          type="button"
+          onClick={subscribe}
+        >
+          Subscribe
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/tanstack-start/src/routes/index.tsx

@@ -9,12 +9,21 @@ function Home() {
       <p className="mt-4 text-lg text-gray-600">
         Generated by create-softeneers-app. A fullstack React app with type-safe server functions.
       </p>
-      <Link
-        to="/cars"
-        className="mt-6 inline-block rounded bg-black px-5 py-2.5 font-medium text-white"
-      >
-        Open the cars CRUD demo →
-      </Link>
+      <div className="mt-6 flex flex-wrap gap-3">
+        <Link to="/cars" className="rounded bg-black px-5 py-2.5 font-medium text-white">
+          Cars CRUD demo →
+        </Link>
+        {/* #if auth */}
+        <Link to="/login" className="rounded border border-gray-300 px-5 py-2.5 font-medium">
+          Sign in
+        </Link>
+        {/* #endif */}
+        {/* #if payments */}
+        <Link to="/billing" className="rounded border border-gray-300 px-5 py-2.5 font-medium">
+          Billing
+        </Link>
+        {/* #endif */}
+      </div>
     </div>
   )
 }

package/templates/tanstack-start/src/routes/login.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+
+import { authClient } from '../lib/auth-client'
+
+export const Route = createFileRoute('/login')({ component: Login })
+
+function Login() {
+  const router = useRouter()
+  const [mode, setMode] = useState<'in' | 'up'>('in')
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault()
+    setError('')
+    setBusy(true)
+    const res =
+      mode === 'in'
+        ? await authClient.signIn.email({ email, password })
+        : await authClient.signUp.email({ email, password, name })
+    setBusy(false)
+    if (res.error) {
+      setError(res.error.message ?? 'Something went wrong.')
+      return
+    }
+    router.navigate({ to: '/account' })
+  }
+
+  return (
+    <div className="mx-auto max-w-sm p-8">
+      <h1 className="text-3xl font-bold">{mode === 'in' ? 'Sign in' : 'Create account'}</h1>
+      <form onSubmit={submit} className="mt-6 space-y-3">
+        {mode === 'up' && (
+          <input
+            className="w-full rounded border border-gray-300 px-3 py-2"
+            placeholder="Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        )}
+        <input
+          className="w-full rounded border border-gray-300 px-3 py-2"
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          className="w-full rounded border border-gray-300 px-3 py-2"
+          type="password"
+          placeholder="Password (min 8 chars)"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        <button
+          className="w-full rounded bg-black px-4 py-2 font-medium text-white disabled:opacity-50"
+          type="submit"
+          disabled={busy}
+        >
+          {mode === 'in' ? 'Sign in' : 'Create account'}
+        </button>
+      </form>
+      <button
+        className="mt-4 text-sm text-gray-500 hover:underline"
+        type="button"
+        onClick={() => setMode(mode === 'in' ? 'up' : 'in')}
+      >
+        {mode === 'in' ? 'Need an account? Sign up' : 'Have an account? Sign in'}
+      </button>
+    </div>
+  )
+}

package/templates/tanstack-start/src/server/email.ts

@@ -0,0 +1,27 @@
+import { createServerFn } from '@tanstack/react-start'
+
+import { createEmailClient, sendEmail } from '@softeneers/email'
+
+import { env } from './env'
+
+const mailer = createEmailClient(env.RESEND_API_KEY)
+
+// Server function: send a welcome email. Call from the client as
+// `await sendWelcomeEmail({ data: { to, name } })`.
+export const sendWelcomeEmail = createServerFn({ method: 'POST' })
+  .validator((data: unknown) => {
+    const d = (data ?? {}) as Record<string, unknown>
+    const to = typeof d.to === 'string' ? d.to : ''
+    if (!to) throw new Error('to (email address) is required.')
+    return { to, name: typeof d.name === 'string' ? d.name : 'there' }
+  })
+  .handler(async ({ data }) => {
+    await sendEmail(mailer, {
+      from: env.EMAIL_FROM,
+      to: data.to,
+      subject: 'Welcome!',
+      html: `<h1>Welcome, ${data.name}!</h1><p>Thanks for joining.</p>`,
+      text: `Welcome, ${data.name}! Thanks for joining.`,
+    })
+    return { sent: true }
+  })

package/templates/tanstack-start/src/server/env.ts

@@ -18,5 +18,23 @@ export const env = createEnv({
     AUTH_SECRET: z.string().min(16).default('dev-secret-change-me-to-a-long-random-string'),
     AUTH_BASE_URL: z.string().default('http://localhost:3000'),
     // #endif
+    // #if email
+    RESEND_API_KEY: z.string().default('re_set_me_in_dotenv'),
+    EMAIL_FROM: z.string().default('onboarding@resend.dev'),
+    // #endif
+    // #if storage
+    S3_ACCESS_KEY_ID: z.string().default(''),
+    S3_SECRET_ACCESS_KEY: z.string().default(''),
+    S3_BUCKET: z.string().default('uploads'),
+    S3_REGION: z.string().default('auto'),
+    S3_ENDPOINT: z.string().default(''),
+    // #endif
+    // #if payments
+    APP_URL: z.string().default('http://localhost:3000'),
+    STRIPE_SECRET_KEY: z.string().default('sk_test_set_me_in_dotenv'),
+    STRIPE_WEBHOOK_SECRET: z.string().default('whsec_set_me_in_dotenv'),
+    STRIPE_PRICE_ID: z.string().default('price_set_me_in_dotenv'),
+    STRIPE_SUBSCRIPTION_PRICE_ID: z.string().default('price_set_me_in_dotenv'),
+    // #endif
   },
 })

package/templates/tanstack-start/src/server/payments.ts

@@ -0,0 +1,40 @@
+import { createServerFn } from '@tanstack/react-start'
+
+import { createBillingPortalSession, createCheckoutSession, createStripe } from '@softeneers/payments'
+
+import { env } from './env'
+
+const stripe = createStripe(env.STRIPE_SECRET_KEY)
+
+// Server functions: the browser calls these directly; the Stripe secret key
+// never leaves the server. Each returns a URL to redirect the browser to.
+export const startCheckout = createServerFn({ method: 'POST' }).handler(async () => {
+  const session = await createCheckoutSession(stripe, {
+    mode: 'payment',
+    priceId: env.STRIPE_PRICE_ID,
+    successUrl: `${env.APP_URL}/billing?paid=1`,
+    cancelUrl: `${env.APP_URL}/billing?canceled=1`,
+  })
+  return { url: session.url }
+})
+
+export const startSubscription = createServerFn({ method: 'POST' }).handler(async () => {
+  const session = await createCheckoutSession(stripe, {
+    mode: 'subscription',
+    priceId: env.STRIPE_SUBSCRIPTION_PRICE_ID,
+    successUrl: `${env.APP_URL}/billing?subscribed=1`,
+    cancelUrl: `${env.APP_URL}/billing?canceled=1`,
+  })
+  return { url: session.url }
+})
+
+export const openBillingPortal = createServerFn({ method: 'POST' })
+  .validator((customer: unknown) => String(customer ?? ''))
+  .handler(async ({ data: customer }) => {
+    if (!customer) throw new Error('A Stripe customer id (cus_…) is required.')
+    const session = await createBillingPortalSession(stripe, {
+      customer,
+      returnUrl: `${env.APP_URL}/billing`,
+    })
+    return { url: session.url }
+  })

package/templates/tanstack-start/src/server/storage.ts

@@ -0,0 +1,36 @@
+import { createServerFn } from '@tanstack/react-start'
+
+import { createStorage, deleteFile, getSignedDownloadUrl, uploadFile } from '@softeneers/storage'
+
+import { env } from './env'
+
+const storage = createStorage({
+  accessKeyId: env.S3_ACCESS_KEY_ID,
+  secretAccessKey: env.S3_SECRET_ACCESS_KEY,
+  bucket: env.S3_BUCKET,
+  region: env.S3_REGION,
+  endpoint: env.S3_ENDPOINT || undefined,
+})
+
+// Server functions for S3-compatible storage. uploadText is a simple demo;
+// for binary uploads, accept a base64 string or use a presigned upload URL.
+export const uploadText = createServerFn({ method: 'POST' })
+  .validator((data: unknown) => {
+    const d = (data ?? {}) as Record<string, unknown>
+    return { key: String(d.key ?? 'demo.txt'), content: String(d.content ?? '') }
+  })
+  .handler(async ({ data }) => {
+    await uploadFile(storage, { key: data.key, body: data.content, contentType: 'text/plain' })
+    return { key: data.key }
+  })
+
+export const getFileUrl = createServerFn({ method: 'GET' })
+  .validator((key: unknown) => String(key))
+  .handler(async ({ data: key }) => ({ url: await getSignedDownloadUrl(storage, key) }))
+
+export const removeFile = createServerFn({ method: 'POST' })
+  .validator((key: unknown) => String(key))
+  .handler(async ({ data: key }) => {
+    await deleteFile(storage, key)
+    return { deleted: true }
+  })