Nextbase Docs
Nextbase Docs
HomeBlogWelcome to Nextbase v5!Choose your starterGetting startedLocal Supabase per agent
TanStack + SupabaseInstallationEnvironment variablesAuthenticationAgent connectionsProject structureDeployment
AuthenticationWorkspaces and the admin area
Building with agentsEmails with Resend
TroubleshootingNextbase v5
The 8 starter kitsTanStack + Supabase

TanStack + Supabase

What the TanStack + Supabase starter ships, what you need to run it, and where to go next.

This kit uses React Router 8 framework mode and Express 5, with Supabase Postgres and Supabase Auth. You get the account, workspace and project foundation, a separately deployed administration app, and separate agent connections for users and application administrators.

Open the live demo · Repository

About the name

Despite the repository name, the apps are React Router 8 in framework mode (SSR) served by explicit Express 5 servers. There is no TanStack Router or TanStack Query dependency in apps/web/package.json or apps/admin/package.json.

The stack

LayerWhat the kit uses
FrontendReact 19, React Router 8 framework mode (SSR), Vite 8, Tailwind 4, shadcn/ui
ServerExpress 5 (apps/web/server/index.ts and apps/admin/server/index.ts), request-scoped Supabase clients
DatabaseSupabase Postgres with row-level security, SQL migrations and pgTAP tests; local projects run on the Supabase CLI stack engine (CLI pinned to 2.121.0)
AuthSupabase Auth (password and magic link) through @supabase/ssr cookies
Agent accessUser MCP served by the web app under /mcp/user; Admin MCP served by the admin app under /mcp/admin
Hosting (demo)Vercel, one project per app, using the Build Output packaging in apps/*/scripts/package-vercel.mjs

What you get out of the box

  • Accounts: sign up, login, magic link, password recovery, onboarding, terms acceptance, account deletion
  • Workspaces: multi-workspace membership, roles (owner, admin, member, readonly), invitations, notifications
  • Projects inside a workspace, with comments and realtime updates
  • A separate administration app (apps/admin, port 3002 locally) serving /admin for users, workspaces, billing, marketing content and feedback moderation, plus support sign-in into the product app
  • User MCP (web app) and Admin MCP (admin app) with OAuth consent, both read-only in v5
  • Marketing: blog, authors, tags, changelog, feedback boards, voting, roadmap and in-app docs
  • Optional integrations that fail closed when unset: Stripe billing, Resend transactional email, developer API keys with /api/v1/me, OpenAI-compatible AI chat and image endpoints, PostHog analytics
  • Health checks at /health/live and /health/ready on both apps, structured logging, Playwright browser tests, CI workflows, Renovate and Changesets

The apps/email package is a React Email template catalogue with a preview server. Neither app imports it; the emails the apps send are built in apps/web/src/.server/mail.ts and apps/admin/src/.server/mail.ts.

Application surfaces

Web app (apps/web, http://localhost:3000 locally):

AreaRoutes
Public/, /blog, /changelog, /feedback, /roadmap, /docs, /terms
Authentication/login, /sign-up, /forgot-password, /reset-password, /auth/callback, /auth/confirm, /logout
Product/app, /app/onboarding, /app/workspaces, /app/invitations, /app/notifications, /app/billing, /app/settings, /app/settings/developer
Agent connections/mcp/connections/user, server at /mcp/user
Operations and API/health/live, /health/ready, /api/stripe/webhook, /api/v1/me, /api/ai/chat, /api/ai/image, /api/analytics

Admin app (apps/admin, http://localhost:3002 locally):

AreaRoutes
Authentication/login, /forgot-password, /reset-password, /auth/callback, /auth/confirm, /logout (no sign-up; / redirects to /admin)
Administration/admin, /admin/users, /admin/users/:userId, /admin/workspaces, /admin/workspaces/:workspaceId, /admin/billing, /admin/marketing (blog, authors, tags, changelog), /admin/feedback
Agent connections/mcp/connections/admin, server at /mcp/admin
Operations and API/health/live, /health/ready, /api/admin/marketing/media, /app/notifications, /terms

Prerequisites

  • Node.js 24. .nvmrc pins 24 and package.json requires >=24.0.0.
  • pnpm 11.1.2, selected by the packageManager field. Run corepack enable and let it pick the version.
  • Docker (or Podman) for the local Supabase stack, or the native Supabase runtime in a supported sandbox. See local Supabase per agent.
  • The Supabase CLI is installed as a dependency of apps/database (pinned to 2.121.0), so you do not need a global install.
  • A Supabase project for production. Stripe, Resend, OpenAI and PostHog accounts are optional.

Next steps

  1. Installation: clone, start a local Supabase project and run the dev servers.
  2. Environment variables: every value in apps/web/.env.example and apps/admin/.env.example.
  3. Authentication: how Supabase Auth, roles and RLS protect both apps.
  4. Agent connections: the User MCP and Admin MCP.
  5. Project structure: where things live and where to make changes.
  6. Deployment: take both apps to production.

For the shared v5 concepts, start with getting started.

Deployment

Provision a Supabase project, apply migrations and deploy the Next.js + Supabase starter's web and admin apps to Vercel.

Installation

Run the TanStack + Supabase starter locally with its own Supabase project, then sign in and create a workspace.

On this page

The stackWhat you get out of the boxApplication surfacesPrerequisitesNext steps