Skip to content

Conversation

@tannerlinsley
Copy link
Member

@tannerlinsley tannerlinsley commented Jan 11, 2026

Summary by CodeRabbit

  • Documentation
    • Added comprehensive guide for implementing security headers in TanStack Start applications, covering global middleware, CSP configuration, and per-route customization.
    • Added guide for multi-tenant subdomain routing, including tenant context propagation, database-backed lookup patterns, and development setup.

✏️ Tip: You can customize this high-level summary in your review settings.

@tannerlinsley tannerlinsley marked this pull request as ready for review January 11, 2026 05:23
@github-actions github-actions bot added the documentation Everything documentation related label Jan 11, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 11, 2026

📝 Walkthrough

Walkthrough

Two new comprehensive guides are added to the React documentation covering security headers implementation in middleware and multi-tenant subdomain routing patterns. The configuration file is updated to reference these new guides.

Changes

Cohort / File(s) Summary
Documentation Guides
docs/start/config.json
Added two new guide entries: Security Headers and Multi-Tenant Routing pointing to framework/react/guide paths
Security Headers Guide
docs/start/framework/react/guide/security-headers.md
New documentation covering global/per-route security header implementation, CSP configuration with nonce handling, CORS setup, and production-ready middleware examples
Multi-Tenant Routing Guide
docs/start/framework/react/guide/multi-tenant-routing.md
New documentation explaining subdomain tenant extraction, middleware context propagation, database-backed tenant lookup patterns (with in-memory and Redis caching), type-safe context definitions, and development setup for localhost subdomains

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

documentation

Suggested reviewers

  • schiller-manuel
  • birkskyum

Poem

🐰 A hop, skip, and guide through headers so keen,
Multi-tenant routes dancing between the serene,
With contexts and nonces, security tight,
Documentation blooms—a reviewers delight! 🌟

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'more guides' is vague and generic, using non-descriptive phrasing that doesn't convey meaningful information about which guides are being added or what they cover. Use a more descriptive title such as 'Add security headers and multi-tenant routing guides' to clearly specify what new documentation is being introduced.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Jan 11, 2026

View your CI Pipeline Execution ↗ for commit c127dce

Command Status Duration Result
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 25s View ↗
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-01-11 05:26:08 UTC

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In @docs/start/framework/react/guide/multi-tenant-routing.md:
- Around line 601-604: The fenced code block that shows the /etc/hosts entries
(the block containing "127.0.0.1 acme.localhost" and "127.0.0.1
globex.localhost") is missing a language tag; update that triple-backtick fence
to include a language identifier (e.g., add "text" so it becomes ```text) to
satisfy markdownlint and improve rendering.
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 166cc45 and c127dce.

📒 Files selected for processing (3)
  • docs/start/config.json
  • docs/start/framework/react/guide/multi-tenant-routing.md
  • docs/start/framework/react/guide/security-headers.md
🧰 Additional context used
📓 Path-based instructions (1)
docs/**/*.{md,mdx}

📄 CodeRabbit inference engine (AGENTS.md)

Use relative links to docs/ folder format (e.g., ./guide/data-loading) for internal documentation references

Files:

  • docs/start/framework/react/guide/security-headers.md
  • docs/start/framework/react/guide/multi-tenant-routing.md
🪛 markdownlint-cli2 (0.18.1)
docs/start/framework/react/guide/multi-tenant-routing.md

601-601: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Preview
🔇 Additional comments (3)
docs/start/config.json (1)

152-159: LGTM! Well-organized guide additions.

The new Security Headers and Multi-Tenant Routing guide entries are appropriately placed after the Authentication entry, logically grouping security and routing concerns. The paths follow the established pattern and align with the new documentation files.

docs/start/framework/react/guide/security-headers.md (1)

1-462: Excellent comprehensive security guide!

This guide provides thorough coverage of security headers implementation in TanStack Start. The content is well-structured, covering:

  • Global and per-route middleware approaches
  • CSP with nonce support for inline scripts
  • Development vs production configurations
  • CORS for API routes
  • Production-ready examples

The internal documentation links (lines 460-462) correctly use the relative format as specified in the coding guidelines.

docs/start/framework/react/guide/multi-tenant-routing.md (1)

1-615: Excellent comprehensive multi-tenant routing guide!

This guide provides thorough coverage of multi-tenant subdomain routing in TanStack Start. The content is well-structured, covering:

  • Subdomain extraction for both localhost and production
  • Database lookups with caching strategies (in-memory and Redis)
  • Type-safe context propagation
  • Handling unknown tenants with multiple approaches
  • Complete working examples

The internal documentation links (lines 613-615) correctly use the relative format as specified in the coding guidelines.

Comment on lines +601 to +604
```
127.0.0.1 acme.localhost
127.0.0.1 globex.localhost
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add language specification to code fence.

The code block showing /etc/hosts configuration is missing a language identifier, which is flagged by markdownlint.

📝 Proposed fix
-```
+```text
 127.0.0.1 acme.localhost
 127.0.0.1 globex.localhost

</details>

Based on static analysis hints (markdownlint).

<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion

🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

601-601: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents
In @docs/start/framework/react/guide/multi-tenant-routing.md around lines 601 -
604, The fenced code block that shows the /etc/hosts entries (the block
containing "127.0.0.1 acme.localhost" and "127.0.0.1 globex.localhost") is
missing a language tag; update that triple-backtick fence to include a language
identifier (e.g., add "text" so it becomes ```text) to satisfy markdownlint and
improve rendering.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 11, 2026

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@6357

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@6357

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@6357

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@6357

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@6357

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@6357

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@6357

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@6357

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@6357

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@6357

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@6357

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@6357

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@6357

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@6357

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@6357

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@6357

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@6357

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@6357

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@6357

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@6357

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@6357

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@6357

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@6357

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@6357

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@6357

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@6357

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-fn-stubs@6357

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@6357

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@6357

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@6357

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@6357

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@6357

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@6357

@tanstack/vue-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router@6357

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-devtools@6357

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-ssr-query@6357

@tanstack/vue-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start@6357

@tanstack/vue-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-client@6357

@tanstack/vue-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-server@6357

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@6357

commit: c127dce


## Handling Unknown Tenants

When a subdomain does not match a known tenant, you have several options:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When a subdomain does not match a known tenant, you have several options:
When a subdomain does not match a known tenant, you have few options:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly so we aren't talking having the too many options syndrome.

export const Route = createFileRoute('/_tenant')({
beforeLoad: async ({ context }) => {
if (context.tenantNotFound) {
throw redirect({ to: '/workspace-not-found' })
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
throw redirect({ to: '/workspace-not-found' })
// redirect to a page with a CTA to sign up for your app
throw redirect({ to: '/workspace-not-found' })

})
```

```tsx
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to show them what a possible error page with a CTA would look like. Unless we're expecting them to copy-paste this, but given the kind of guide this is, I wonder if this is what that kind of user is looking for.


## Content-Security-Policy (CSP)

CSP prevents cross-site scripting (XSS) attacks by controlling which resources can be loaded.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe move this to the top of the page as a GFM callout (maybe a NOTE or INFO), instead of having its own heading for just this little one-liner bit of content that doesn't have any sub-headings under it.

Security headers protect your application against common web vulnerabilities. TanStack Start provides several approaches for setting headers:

- **Global request middleware** applies headers to all responses (SSR, server functions, server routes)
- **Server route handlers** set headers for specific API endpoints
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The headings not matching the these list items did confuse me for a second there when doing a read through.
Perhaps keep this guide a bit a more concise?

  • Here are ways you can apply CSP (using an imported set of headers so the code blocks are kept short) in TanStack Start - like using global middleware, server routes, per-route, etc.
  • Here are some common recipes or here's a good starter you can build upon as your app needs it.
  • Here are some tools for testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Everything documentation related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants