Cloudflare React Router Base UI SaaS

Lightweight saas template packed with essential functionality for Cloudflare and React Router

Cloudflare • React Router • Better Auth • Stripe • Shadcn on Base UI • SES

Demo

Template Functionality

• Authentication & Organizations:

  • Magic link authentication using Better Auth
  • Multi-tenant organization management with automatic organization creation
  • Role-based access control (user/admin/organization member roles)
  • Organization invitations and membership management

• Payments & Subscriptions:

  • Stripe integration with subscription processing
  • Monthly and annual pricing plans with configurable trial periods
  • Stripe Checkout and Customer Portal integration
  • Webhook handling for subscription lifecycle events
  • Subscription management (cancel, reactivate, billing portal access)

• Database & Data Management:

  • Cloudflare D1 (SQLite) database with schema migrations
  • Type-safe database operations with Zod schema validation
  • Session management with automatic cleanup of expired sessions
  • Database seeding utilities for development and testing

• Admin Panel:

  • Admin interface for user management
  • Session monitoring and administration
  • Customer and subscription oversight

• UI/UX Components:

  • Shadcn with Base UI and TanStack Form integration
  • Theme switching (light/dark/system) with persistence

• Testing Infrastructure:

  • Unit and integration tests using Vitest
  • End-to-end testing with Playwright

• Email Integration:

  • AWS SES for transactional email delivery
  • Demo mode support for development without external email services

• Security & Performance:

  • IP-based rate limiting for authentication endpoints using Cloudflare Rate Limiting
  • Server-side route protection and authorization
  • Secure session handling with database storage

Quick Start

Stripe

• Install the Stripe CLI.
• Go to stripe and create a sandbox for testing named crrbuis-int
  • Remember secret key for STRIPE_SECRET_KEY environment variable.
• Create a stripe webhook
  • Endpoint URL: https://dummy.com/api/auth/stripe/webhook (This is dummy placeholder for local dev)
  • Events: checkout.session.completed, customer.subscription.deleted, customer.subscription.updated

Local Env

• Copy .env.example to .env.
• Edit the BETTER_AUTH_SECRET and STRIPE_SECRET_KEY keys.
• Set STRIPE_WEBHOOK_SECRET later after you run pnpm stripe:listent below.
• Leave the aws ses email keys empty since we are running in demo mode.

pnpm i
pnpm d1:reset
stripe login --project-name=crrbuis-int
pnpm stripe:listen
# copy webhook signing secret to STRIPE_WEBHOOK_SECRET in .env
pnpm dev

# cron
curl "http://localhost:5173/cdn-cgi/handler/scheduled?cron=0%200%20*%20*%20*"

Testing

Stripe Test Card Details

• Card Number: 4242 4242 4242 4242
• Expiration: Any future date
• CVC: Any 3-digit number

Unit and Integration Tests

pnpm test

E2E Tests

pnpm dev
pnpm stripe:listen
pnpm test:e2e

Deploy

• pnpm exec wrangler kv namespace create crrbuis-kv-production
• Update wrangler.jsonc production kv_namespaces
• pnpm d1:reset:PRODUCTION
• pnpm deploy:PRODUCTION
• pnpm exec wrangler secret put SECRET --env production
• Workers & Pages Settings: crrbuis
  • Git repository: connect to git repo
  • Build configuration
    • Build command: CLOUDFLARE_ENV=production pnpm build
    • Deploy command: pnpm exec wrangler deploy
• Storage & databases: crrbuis-d1-production: Settings
  • Enable read replication

Shandcn with Base UI

pnpm dlx shadcn@latest add --overwrite accordion alert-dialog alert aspect-ratio avatar badge breadcrumb button-group button calendar card carousel chart checkbox collapsible combobox command context-menu dialog drawer dropdown-menu empty field input-group input item label pagination popover radio-group select separator sidebar sonner spinner switch table textarea toggle tooltip

Credit

Homepage / Pricing design by dev-xo. See his remix-saas for a production-ready saas template for remix.

License

Licensed under the MIT License.