🚧 Work in Progress: Kinde Tanstack React Start SDK doc#707
🚧 Work in Progress: Kinde Tanstack React Start SDK doc#707tamalchowdhury wants to merge 2 commits intomainfrom
Conversation
WalkthroughA new documentation page was added describing how to integrate Kinde with TanStack React Start: installation, Kinde app and callback/logout URL setup, environment variables, auth route handler, global middleware, route protection, and UI/provider integration. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Deploying kinde-docs-preview with
|
| Latest commit: |
df329c2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7928c60e.kinde-docs-preview.pages.dev |
| Branch Preview URL: | https://yoshify-feat-tanstack-start.kinde-docs-preview.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx (1)
1-13: Add standard SDK metadata fields for discoverability consistency.Frontmatter is valid, but this page is missing common SDK metadata (
description,sdk,languages,audience,complexity,keywords) used in peer backend SDK docs and search/discovery surfaces.Suggested frontmatter additions
--- page_id: 7eb15b27-864c-49fd-a12e-3f4d415f47fa title: TanStack React Start SDK +description: "Integrate Kinde authentication in TanStack React Start apps with route handlers, middleware, and client route protection." sidebar: order: 10 tableOfContents: maxHeadingLevel: 3 +sdk: + - tanstack +languages: + - typescript + - tsx +audience: + - developers +complexity: intermediate +keywords: + - tanstack react start + - authentication + - middleware head:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` around lines 1 - 13, The frontmatter block (the YAML between the leading '---' markers that contains title: "TanStack React Start SDK" and page_id) is missing standard SDK metadata; add the fields description, sdk, languages, audience, complexity, and keywords to that frontmatter with concise values appropriate for this SDK page (e.g., a short descriptive sentence for description, sdk: "TanStack React", languages: ["TypeScript", "JavaScript"], audience: ["backend developers" or "frontend developers" as appropriate], complexity: ["beginner"|"intermediate"|"advanced"], and a keywords array of relevant terms) so the page matches other backend SDK docs and is discoverable in search surfaces.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx`:
- Around line 8-12: The OG image in the frontmatter meta tag (property:
"og:image") for tsr-sdk.mdx points to a generic SDK image (SDK_NEXT.png);
replace that URL with the TanStack-specific social card image URL so the meta
head block uses the correct TanStack preview asset (update the head -> meta
attrs content value for property "og:image" accordingly).
- Line 314: The heading "## Kinde Auth data - Server" is empty and should be
completed or removed; either populate that section under the heading with the
intended server-side documentation (e.g., purpose, required env vars, example
code / API endpoints, security considerations, and usage with the TSR SDK) or
delete the header if no content is needed—locate the empty heading "## Kinde
Auth data - Server" in the document and update accordingly.
- Around line 68-70: The code sample contains an embedded review-thread artifact
("Collapse commentComment on line R67DanielRivers commented...") inside the
import block; remove that stray text so the imports are a clean code snippet
(e.g., ensure only the actual import statements like kindeAuthHandler from
"@kinde/kinde-auth-tanstack-start/server" and createFileRoute from
"@tanstack/react-router" remain in the example).
- Line 324: The .env debug-mode example in tsr-sdk.mdx uses invalid syntax
(spaces around '=' and trailing semicolons); update the .env code block (the
debug-mode example / .env example) so each entry uses KEY=value format with no
spaces around '=' and no trailing semicolons (e.g., change "KEY = value;" to
"KEY=value") to ensure valid dotenv parsing.
- Line 25: Replace the placeholder markdown link "[TanStack React Start starter
kit](TODO)" in tsr-sdk.mdx with the actual starter-kit URL (or remove the link
and replace with a correct, non-broken CTA), updating the link target so the CTA
points to the real TanStack React Start starter kit; locate the exact token
"[TanStack React Start starter kit](TODO)" and change the "(TODO)" to the real
href or plain text as appropriate.
- Line 29: Replace the incorrect package and Next.js imports with the React SDK
and TanStack Start patterns: change the PackageManagers pkg value from
"@kinde-oss/kinde-tsr" to "@kinde-oss/kinde-auth-react"; update imports that
currently reference "@kinde-oss/kinde-auth-nextjs/components" (lines around the
imports at or near where components are used) to
"@kinde-oss/kinde-auth-react/components"; wrap the app's root route with
KindeProvider (use the KindeProvider symbol) instead of Next.js provider
patterns; and replace any uses of next/navigation with TanStack Router
navigation utilities (use the TanStack Router navigation API in place of
next/navigation). Ensure all examples and import statements reference
`@kinde-oss/kinde-auth-react` and KindeProvider and remove Next.js-specific APIs.
---
Nitpick comments:
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx`:
- Around line 1-13: The frontmatter block (the YAML between the leading '---'
markers that contains title: "TanStack React Start SDK" and page_id) is missing
standard SDK metadata; add the fields description, sdk, languages, audience,
complexity, and keywords to that frontmatter with concise values appropriate for
this SDK page (e.g., a short descriptive sentence for description, sdk:
"TanStack React", languages: ["TypeScript", "JavaScript"], audience: ["backend
developers" or "frontend developers" as appropriate], complexity:
["beginner"|"intermediate"|"advanced"], and a keywords array of relevant terms)
so the page matches other backend SDK docs and is discoverable in search
surfaces.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 5d853569-e9d7-445c-a95a-8b96f6830d92
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx
| head: | ||
| - tag: meta | ||
| attrs: | ||
| property: "og:image" | ||
| content: "https://kinde.com/assets/images/open-graph/DOCS-SSI-SDK_NEXT.png" |
There was a problem hiding this comment.
Swap placeholder OG image for a TanStack-specific social card.
Current OG image appears to be a placeholder/other-SDK asset (...SDK_NEXT.png), which weakens social preview accuracy for this doc.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` around lines 8 -
12, The OG image in the frontmatter meta tag (property: "og:image") for
tsr-sdk.mdx points to a generic SDK image (SDK_NEXT.png); replace that URL with
the TanStack-specific social card image URL so the meta head block uses the
correct TanStack preview asset (update the head -> meta attrs content value for
property "og:image" accordingly).
|
|
||
| ## **Install for an existing project** | ||
|
|
||
| <PackageManagers pkg="@kinde-oss/kinde-tsr" /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
`For the latest Kinde TanStack React Start SDK docs, what is the canonical npm package name, and which module paths export:
- kindeAuthHandler (server route handler)
- KindeTanstackProvider
- LoginLink/RegisterLink/LogoutLink (if supported)?
Also confirm whether Next.jsnext/navigationshould ever be used in TanStack React Start examples.`
💡 Result:
Canonical npm package (Kinde + TanStack React Start)
Kinde does not currently publish an official “TanStack React Start” SDK/package (no tanstack repos under kinde-oss). The canonical Kinde package you’ll be using is the React SDK: @kinde-oss/kinde-auth-react. [1], [2]
Exports / module paths
1) kindeAuthHandler (server route handler)
Not exported by Kinde’s React SDK, and there is no official Kinde TanStack Start SDK that provides a kindeAuthHandler. (Kinde’s React SDK is client-focused; the docs do not define TanStack Start server route handlers.) [1], [2]
2) KindeTanstackProvider
Not exported by Kinde’s React SDK, and there is no official Kinde TanStack Start SDK that provides KindeTanstackProvider. [1], [2]
3) LoginLink / RegisterLink / LogoutLink (supported?)
Yes—in the React SDK, via:
LoginLink,RegisterLink,LogoutLink:@kinde-oss/kinde-auth-react/components[1]
(And the main provider shown in the docs is:)
KindeProvider:@kinde-oss/kinde-auth-react[1]
Should Next.js next/navigation ever be used in TanStack React Start examples?
No. TanStack Start examples/docs use TanStack Router imports (e.g. Link from @tanstack/react-router), not Next.js navigation APIs. [3]
Sources:
[1] Kinde React SDK docs (imports for KindeProvider, LoginLink/RegisterLink/LogoutLink) (docs.kinde.com)
[2] kinde-oss GitHub org repo search showing no TanStack-related repos (github.com)
[3] TanStack Start example code importing Link from @tanstack/react-router (tanstack.com)
Citations:
- 1: https://docs.kinde.com/developer-tools/sdks/frontend/react-sdk/
- 2: https://github.com/orgs/kinde-oss/repositories?language=&q=tanstack&sort=&type=all
- 3: https://tanstack.com/router/latest/docs/framework/react/examples/start-basic-auth
🏁 Script executed:
# First, locate and examine the actual file
fd -type f -name "tsr-sdk.mdx" | head -5Repository: kinde-oss/documentation
Length of output: 237
🏁 Script executed:
# Check if the file exists and read the relevant lines
if [ -f "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" ]; then
echo "=== File size ===" && wc -l "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx"
echo "=== Lines 29-35 ===" && sed -n '25,35p' "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | cat -n
echo "=== Lines 260-270 ===" && sed -n '260,270p' "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | cat -n
echo "=== Lines 280-290 ===" && sed -n '280,290p' "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | cat -n
echo "=== Lines 290-305 ===" && sed -n '290,305p' "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | cat -n
echo "=== Lines 303-312 ===" && sed -n '303,312p' "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | cat -n
fiRepository: kinde-oss/documentation
Length of output: 2349
🏁 Script executed:
# Search for all imports and package references in the file to identify inconsistencies
rg -n "@kinde-oss|next/|@tanstack" "src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx" | head -30Repository: kinde-oss/documentation
Length of output: 684
🏁 Script executed:
# Search for kinde-tsr in the repository and check if it's referenced elsewhere
rg -n "kinde-tsr|kinde-auth-react" "src/content/docs/developer-tools/sdks/" | grep -E "(tsr|auth-react)" | head -20Repository: kinde-oss/documentation
Length of output: 2646
🌐 Web query:
kinde-tsr npm package Kinde TanStack React Start SDK
💡 Result:
I couldn’t find any npm package actually named kinde-tsr (or a Kinde “TanStack React Start SDK”) on npm/GitHub as of April 7, 2026.
If you’re trying to use Kinde with TanStack React Start (“TSR/Start”), the closest official Kinde packages are:
- Kinde React SDK:
@kinde-oss/kinde-auth-react(Kinde’s React SDK docs show this as the install package). [1] - Kinde TypeScript SDK (server/API usage):
@kinde-oss/kinde-typescript-sdk. [2] - TanStack Start package itself:
@tanstack/start. [3]
So in practice, you’d typically integrate Kinde into TanStack Start by using the React SDK on the client and/or the TypeScript SDK in TanStack Start server functions/routes, rather than a dedicated kinde-tsr package.
Sources: [1] [2] [3]
🌐 Web query:
@kinde-oss/kinde-auth-react TanStack Start installation setup
💡 Result:
1) Install
npm i `@kinde-oss/kinde-auth-react`(Or pnpm add / yarn add.) [1]
2) Add TanStack Start env vars
In TanStack Start, client code can only read VITE_-prefixed env vars via import.meta.env. [2]
.env (or .env.local):
VITE_KINDE_DOMAIN=yourapp.kinde.com
VITE_KINDE_CLIENT_ID=your_kinde_client_id
# Use a fixed absolute URL so you don't need `window` during SSR
VITE_APP_URL=http://localhost:30003) Create a provider component (safe with SSR)
src/components/KindeAuthProvider.tsx
import * as React from 'react'
import { KindeProvider } from '@kinde-oss/kinde-auth-react'
export function KindeAuthProvider({ children }: { children: React.ReactNode }) {
const domain = import.meta.env.VITE_KINDE_DOMAIN
const clientId = import.meta.env.VITE_KINDE_CLIENT_ID
const appUrl = import.meta.env.VITE_APP_URL
return (
<KindeProvider
domain={domain}
clientId={clientId}
redirectUri={`${appUrl}/kinde/callback`}
logoutUri={appUrl}
>
{children}
</KindeProvider>
)
}Kinde’s React SDK is configured by wrapping your app in KindeProvider with domain, clientId, redirectUri, and logoutUri. [1]
4) Wrap your TanStack Start root route
In TanStack Start, this is typically src/routes/__root.tsx (or wherever your root layout component is):
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { KindeAuthProvider } from '../components/KindeAuthProvider'
export const Route = createRootRoute({
component: () => (
<KindeAuthProvider>
<Outlet />
</KindeAuthProvider>
),
})5) Add the callback + logout URLs in Kinde
In your Kinde app settings, set: [1]
- Allowed callback URLs (redirect URIs):
http://localhost:3000/kinde/callback - Allowed logout redirect URLs:
http://localhost:3000
If you tell me your TanStack Start folder structure (where your root route/layout lives), I can adapt the wrap step exactly to your project.
Sources: Kinde React SDK docs [1], TanStack Start env var rules (VITE_ on client) [2].
Replace all package names and imports to use the React SDK with TanStack Start conventions.
The page uses a non-existent package (@kinde-oss/kinde-tsr) and incorrectly mixes Next.js SDK imports (@kinde-oss/kinde-auth-nextjs/components) with TanStack Start code. For TanStack Start integration, use @kinde-oss/kinde-auth-react, wrap your root route with KindeProvider, and rely on TanStack Router instead of Next.js APIs (next/navigation).
Affected lines:
- Line 29: Install package should be
@kinde-oss/kinde-auth-react - Lines 264, 283, 307: Import from
@kinde-oss/kinde-auth-react/componentsinstead of@kinde-oss/kinde-auth-nextjs/components - Line 294: Replace
next/navigationwith TanStack Router navigation
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` at line 29,
Replace the incorrect package and Next.js imports with the React SDK and
TanStack Start patterns: change the PackageManagers pkg value from
"@kinde-oss/kinde-tsr" to "@kinde-oss/kinde-auth-react"; update imports that
currently reference "@kinde-oss/kinde-auth-nextjs/components" (lines around the
imports at or near where components are used) to
"@kinde-oss/kinde-auth-react/components"; wrap the app's root route with
KindeProvider (use the KindeProvider symbol) instead of Next.js provider
patterns; and replace any uses of next/navigation with TanStack Router
navigation utilities (use the TanStack Router navigation API in place of
next/navigation). Ensure all examples and import statements reference
`@kinde-oss/kinde-auth-react` and KindeProvider and remove Next.js-specific APIs.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx (2)
13-17:⚠️ Potential issue | 🟡 MinorReplace placeholder OG image with the TanStack-specific social card.
The
og:imagestill points toDOCS-SSI-SDK_NEXT.png, which looks like a generic placeholder rather than page-specific social metadata.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` around lines 13 - 17, The page frontmatter uses a generic placeholder OG image; update the head meta tag with property "og:image" to point to the TanStack-specific social card URL for this SDK page by replacing the current content value ("https://kinde.com/assets/images/open-graph/DOCS-SSI-SDK_NEXT.png") with the correct TanStack card asset; look for the head -> meta entry with property "og:image" in this file and swap the content value to the page-specific TanStack image URL.
74-74:⚠️ Potential issue | 🟠 MajorVerify install package matches all documented import paths.
The page installs
@kinde/tsr(Line 74) while examples import from@kinde/kinde-auth-tanstack-startpackages. Please verify this mapping is intentional and documented; otherwise users may install the wrong package.For Kinde TanStack React Start (as of April 2026), what is the canonical npm package users should install, and are imports from "@kinde/kinde-auth-tanstack-start" expected after installing "@kinde/tsr" (e.g., via alias/re-export)?Also applies to: 100-101, 133-134, 156-157, 207-207, 242-242, 282-282, 314-314
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` at line 74, The PackageManagers entry currently lists pkg="@kinde/tsr" while code examples import from "@kinde/kinde-auth-tanstack-start"; confirm which npm package is canonical (e.g., "@kinde/kinde-auth-tanstack-start" vs "@kinde/tsr") and update the PackageManagers pkg value to the correct package or add a clear note explaining that "@kinde/tsr" intentionally re-exports/aliases the "@kinde/kinde-auth-tanstack-start" modules; apply the same fix to all other occurrences noted (lines near 100-101, 133-134, 156-157, 207, 242, 282, 314) and ensure examples and import paths (references to "@kinde/kinde-auth-tanstack-start") match the documented install command or are documented as coming from an alias/re-export.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx`:
- Around line 91-95: Update the setup instructions so the file path text and the
shell command match: either change the written filename
`src/routes/api.auth.$.ts` to `src/routes/api.auth.$/route.ts` everywhere, or
change the touch command to create `src/routes/api.auth.$.ts`; ensure the
displayed filename and the example command reference the same path (look for the
strings `src/routes/api.auth.$.ts` and `src/routes/api.auth.$/route.ts` and make
them consistent).
- Around line 63-68: The ordered list in the docs contains duplicate "2."
entries; update the sequence in
src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx so the steps read 1.,
2., 3., 4. (i.e., change the second "2." that instructs to add callback URLs to
"3." and change "3. Select Save." to "4.") to restore proper sequential
numbering.
---
Duplicate comments:
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx`:
- Around line 13-17: The page frontmatter uses a generic placeholder OG image;
update the head meta tag with property "og:image" to point to the
TanStack-specific social card URL for this SDK page by replacing the current
content value
("https://kinde.com/assets/images/open-graph/DOCS-SSI-SDK_NEXT.png") with the
correct TanStack card asset; look for the head -> meta entry with property
"og:image" in this file and swap the content value to the page-specific TanStack
image URL.
- Line 74: The PackageManagers entry currently lists pkg="@kinde/tsr" while code
examples import from "@kinde/kinde-auth-tanstack-start"; confirm which npm
package is canonical (e.g., "@kinde/kinde-auth-tanstack-start" vs "@kinde/tsr")
and update the PackageManagers pkg value to the correct package or add a clear
note explaining that "@kinde/tsr" intentionally re-exports/aliases the
"@kinde/kinde-auth-tanstack-start" modules; apply the same fix to all other
occurrences noted (lines near 100-101, 133-134, 156-157, 207, 242, 282, 314) and
ensure examples and import paths (references to
"@kinde/kinde-auth-tanstack-start") match the documented install command or are
documented as coming from an alias/re-export.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ec9e096a-6982-4099-9fe9-08ddec3f4895
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx
| 1. In Kinde, select **Add new application**, select **Back-end application > Other back end** | ||
| 2. Go to **View details** and copy the **Domain**, **Client ID** and **Client secret** values. | ||
| 2. Add callback URLs, for example: | ||
| - **Allowed callback URLs** — `http://localhost:3000/api/auth/callback` | ||
| - **Allowed logout redirect URLs** — `http://localhost:3000` | ||
| 3. Select **Save**. |
There was a problem hiding this comment.
Correct ordered list numbering for step sequence.
The list repeats 2. at Line 65; renumbering improves readability and avoids confusion in procedural docs.
Suggested fix
-2. Add callback URLs, for example:
+3. Add callback URLs, for example:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` around lines 63 -
68, The ordered list in the docs contains duplicate "2." entries; update the
sequence in src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx so the
steps read 1., 2., 3., 4. (i.e., change the second "2." that instructs to add
callback URLs to "3." and change "3. Select Save." to "4.") to restore proper
sequential numbering.
| Create `src/routes/api.auth.$.ts`: | ||
|
|
||
| ```bash | ||
| touch "src/routes/api.auth.$/route.ts" | ||
| ``` |
There was a problem hiding this comment.
Fix route-file path mismatch in setup instructions.
Line 91 says create src/routes/api.auth.$.ts, but Lines 93-95 create src/routes/api.auth.$/route.ts. This will mislead users and break copy/paste setup.
Suggested fix
-Create `src/routes/api.auth.$.ts`:
+Create `src/routes/api.auth.$/route.ts`:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/content/docs/developer-tools/sdks/backend/tsr-sdk.mdx` around lines 91 -
95, Update the setup instructions so the file path text and the shell command
match: either change the written filename `src/routes/api.auth.$.ts` to
`src/routes/api.auth.$/route.ts` everywhere, or change the touch command to
create `src/routes/api.auth.$.ts`; ensure the displayed filename and the example
command reference the same path (look for the strings `src/routes/api.auth.$.ts`
and `src/routes/api.auth.$/route.ts` and make them consistent).
1 participant
TODO
[] Create a starter kit to link to.
[] Link to js-utils and describe how its utilities are used for the server
[] Link to kinde-auth-react and describe how its utilities are used for the client
[] Needs its own og image, has Next's as a placeholder
[] Needs to be added to
data/sdkList.tsSummary by CodeRabbit