ORY Kratos + Tanstack Start

[bennettscoresby]

Added an example of how to implement Ory Kratos with Tanstack Start

Summary by CodeRabbit

• New Features
  • Added a new React example application demonstrating Ory authentication integration with TanStack Start. Includes login/logout functionality, protected user profile page, and comprehensive setup documentation supporting both Ory Network and self-hosted deployment options.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR introduces a complete example project demonstrating TanStack Start with Ory authentication integration. It includes project configuration, TypeScript setup, route definitions with authentication guards, Ory session utilities, styling, and comprehensive documentation for setup and usage.

Changes

Cohort / File(s)	Summary
Project Configuration examples/react/start-basic-ory/vite.config.ts, tsconfig.json, package.json, .gitignore	Vite configuration with TanStack Start and React plugins, TypeScript compiler settings with path aliases, project metadata and dependencies, and standard build/test/IDE ignore patterns.
Router Setup examples/react/start-basic-ory/src/routeTree.gen.ts, src/router.tsx	Generated route tree defining file routes (index, authenticated, profile) with type-safe mappings and TanStack Router module augmentation. Router factory function creates a TanStack Router instance with sensible defaults for preloading, error handling, and scroll restoration.
Route Handlers examples/react/start-basic-ory/src/routes/__root.tsx, _authenticated.tsx, _authenticated/profile.tsx, index.tsx	Root route with Ory session fetching and authentication context setup; authenticated guard route that redirects unauthenticated users to Ory login; profile route accessing session identity; and index landing page with hero layout showcasing TanStack Start and Ory.
Authentication Utilities examples/react/start-basic-ory/src/utils/orySession.ts	Server-side utilities for Ory session management, including session fetching with 10-minute cache TTL, logout URL generation, and error-resilient fallbacks using FrontendApi client.
Styling examples/react/start-basic-ory/src/styles/app.css	Global CSS reset, body styling with dark background, typography defaults, and layout base rules.
Documentation examples/react/start-basic-ory/README.md	Setup instructions for two deployment options (Ory Network + Tunnel and self-hosted Kratos), prerequisites, environment variable configuration, and build/preview workflows.

Sequence Diagram(s)

sequenceDiagram
participant Client as Browser Client
participant App as TanStack Start App
participant Ory as Ory Backend
Client->>App: GET / (Initial page load)
App->>Ory: GET /sessions/whoami (fetch current session)
Ory-->>App: Session data or error
App->>App: Derive isAuthenticated flag
App-->>Client: Root component + AuthContext
Client->>App: Navigate to /profile
App->>App: Check auth via _authenticated guard
alt User is authenticated
App-->>Client: Profile page with email
else User not authenticated
App->>Ory: Redirect to /self-service/login/browser
Ory-->>Client: Login UI
end
Client->>Ory: Complete login flow
Ory->>Client: Set session cookie
Client->>App: Re-navigate to /profile
App->>Ory: Fetch session (with new cookie)
Ory-->>App: Authenticated session
App-->>Client: Profile page with email

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• docs(solid-start): start-large example #5847 — Adds example app with generated routeTree and router bootstrap patterns similar to this example.
• docs(solid-start): start-tailwind-v4 #5849 — Introduces identical React Start scaffolding structure (routeTree.gen.ts, getRouter, module augmentations).
• test(react-start): benchmarking setup w/ platformatic/flame and autocannon #6457 — Adds similar React Start app boilerplate with route setup and Vite configuration.

Suggested labels

documentation

Suggested reviewers

• schiller-manuel

Poem

🐰 A Start so fine with Ory's trust,
Routes protected, auth we must,
Sessions cached and profiles shown,
Authentication's seed is sown!
From root to guard, the flow runs true, ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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