fix: remix sdk doc #638
fix: remix sdk doc #638
Conversation
WalkthroughRemix backend SDK docs were rewritten and expanded to cover installation (new/existing/starter), environment variables (adds KINDE_AUDIENCE), auth route handlers (custom base path), loader/action patterns, server/client session APIs, token/org/permissions, refresh/health/debug, Management API, analytics, i18n, preview/subdomain guidance, and a migration guide. Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Client
participant Server as RemixServer
participant Kinde as KindeAuth
participant Mgmt as ManagementAPI
Client->>Server: Request protected route (loader)
Server->>Server: Check session / getToken / getUser
alt session missing or expired
Server->>Client: Redirect to /auth/login (with returnTo)
Client->>Kinde: Redirect to Kinde (auth request)
Kinde->>Client: Redirect back with code & state
Client->>Server: /auth/callback (code & state)
Server->>Kinde: Exchange code for tokens
Kinde-->>Server: Tokens + user info
Server->>Mgmt: (optional) Fetch orgs/permissions
Mgmt-->>Server: Orgs/permissions
Server->>Client: Set session cookie + redirect to returnTo
else session valid
Server->>Client: Render protected resource with server-side Kinde data
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx(9 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-12T06:00:08.396Z
Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 253
File: src/content/docs/properties/work-with-properties/property-groups.mdx:13-13
Timestamp: 2024-11-12T06:00:08.396Z
Learning: In the project documentation, the `/kinde-apis/management` and `/kinde-apis/frontend` pages use a third-party API reference and client that loads a Single Page Application (SPA). Therefore, links to sections within these pages are valid, even if they appear to point to non-existent sections in static analysis, and should not be flagged.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
🪛 LanguageTool
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
[grammar] ~41-~41: Ensure spelling is correct
Context: ...apps with Kinde authentication. New to Kinde? [Get started here](/get-started/guides/...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~43-~43: Use a hyphen to join words.
Context: .../first-things-first/). ## Create a back end application in Kinde The Remix SDK ...
(QB_NEW_EN_HYPHEN)
[grammar] ~45-~45: Use a hyphen to join words.
Context: ... in Kinde The Remix SDK works with back end applications. Create one in Kinde. S...
(QB_NEW_EN_HYPHEN)
[grammar] ~185-~185: Ensure spelling is correct
Context: ...ticated!", user); } }); } ## Kinde session helpers jsx const { getUs...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (7)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (7)
72-85: Good structure for auth route setup.Clear setup instructions, correct file path pattern, proper type imports, and helpful clarification about route responsibilities.
87-139: Authentication flows are well-structured with good patterns.Clear examples for sign up, sign in, org-specific login, and logout. The
returnToparameter pattern (line 124) is a UX best practice for returning users to their origin page after auth.
141-166: Excellent route protection pattern with proper header propagation.The loader-based guard with header propagation ensures refresh tokens work correctly in background. The aside note clearly explains this critical requirement.
168-183: Callback pattern is clear and well-documented.Good example showing how to perform side effects after authentication. The onRedirectCallback receives the user object as expected.
185-261: Comprehensive session helpers documentation with good organization.Clear code examples, complete method table with proper section anchors, and well-grouped detailed descriptions for claims, authentication, feature flags, permissions, and organizations. Documentation structure mirrors Next.js SDK guide as intended.
286-299: Internationalization section is clear and follows Remix patterns.Good example showing how to set language preference via search parameters.
301-303: Management API reference is appropriately brief.Simple pointer to external library documentation.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx(6 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2024-11-12T06:00:08.396Z
Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 253
File: src/content/docs/properties/work-with-properties/property-groups.mdx:13-13
Timestamp: 2024-11-12T06:00:08.396Z
Learning: In the project documentation, the `/kinde-apis/management` and `/kinde-apis/frontend` pages use a third-party API reference and client that loads a Single Page Application (SPA). Therefore, links to sections within these pages are valid, even if they appear to point to non-existent sections in static analysis, and should not be flagged.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
📚 Learning: 2025-09-04T02:15:38.458Z
Learnt from: clairekinde11
Repo: kinde-oss/documentation PR: 545
File: src/content/docs/design/customize-with-code/custom-styling-per-application.mdx:59-70
Timestamp: 2025-09-04T02:15:38.458Z
Learning: In Kinde custom pages repository structure, layout.tsx should be placed as a sibling to the (kinde) directory at pages/layout.tsx level, not inside the (kinde) directory. The import path "../../layout" from pages/(kinde)/(default)/page.tsx works correctly with this structure in Kinde's system.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
🪛 LanguageTool
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
[grammar] ~41-~41: Ensure spelling is correct
Context: ... is for developers using Remix. New to Kinde? [Get started here](/get-started/guides/...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~52-~52: Ensure spelling is correct
Context: ...mix-starter-kit). Clone it and add your Kinde application details. ## Install for an...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~263-~263: Ensure spelling is correct
Context: ...ticated!", user); } }); } ## Kinde Auth data - Server jsx const { ge...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~388-~388: Use a hyphen to join words.
Context: ...org` or use the Management API. ## Self Serve Portal Send users to the self-ser...
(QB_NEW_EN_HYPHEN)
🔇 Additional comments (2)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (2)
43-481: Overall structure and content quality look good.The documentation has been comprehensively restructured to align with the Next.js SDK format. The coverage is thorough, including installation, environment configuration, route handlers, middleware, authentication flows, Kinde Auth APIs (server and client), management API integration, organizations, analytics, i18n, and troubleshooting sections. Code examples are consistent and properly demonstrate best practices like header propagation for automatic token refresh. The organization is logical and follows a clear progression from setup to advanced topics.
60-60: Both documentation links are valid and exist in the repository.The links at line 60 (
/build/applications/add-and-manage-applications/) and line 390 (/build/self-service-portal/self-serve-portal-for-orgs/) point to existing documentation pages and are correctly referenced.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx(7 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-09-04T02:15:38.458Z
Learnt from: clairekinde11
Repo: kinde-oss/documentation PR: 545
File: src/content/docs/design/customize-with-code/custom-styling-per-application.mdx:59-70
Timestamp: 2025-09-04T02:15:38.458Z
Learning: In Kinde custom pages repository structure, layout.tsx should be placed as a sibling to the (kinde) directory at pages/layout.tsx level, not inside the (kinde) directory. The import path "../../layout" from pages/(kinde)/(default)/page.tsx works correctly with this structure in Kinde's system.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
🪛 LanguageTool
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
[grammar] ~41-~41: Ensure spelling is correct
Context: ... is for developers using Remix. New to Kinde? [Get started here](/get-started/guides/...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~52-~52: Ensure spelling is correct
Context: ...mix-starter-kit). Clone it and add your Kinde application details. ## Install for an...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~284-~284: Ensure spelling is correct
Context: ...ticated!", user); } }); } ## Kinde Auth data - Server jsx const { ge...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (9)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (9)
33-33: Verify the updated date is intentional.The frontmatter date is set to "2024-01-15", which is in the past. For a restructuring PR created on 2025-12-09, confirm whether this should be updated to the current date or if there's a reason to retain the older date.
50-82: Installation and configuration sections are well-structured. Clear organization of new/existing project flows, callback URLs, and environment setup. The optional KINDE_AUDIENCE parameter is properly documented.
84-119: Auth route and middleware setup is idiomatic Remix. The single-route approach with handleAuth is clean. Middleware pattern using loaders and headers for background token refresh is well-explained and correct.
121-165: Provider setup correctly bridges server and client state. The loader-based data hydration pattern with KindeProvider is idiomatic Remix and properly typed. Headers are correctly threaded for token refresh.
167-282: Authentication flows are comprehensive and well-documented. Sign up, login, logout, organization routing, internationalization, and return-to patterns are all clearly explained with practical examples. The onRedirectCallback hook for post-auth side effects is properly documented.
284-358: Server and client data sections are well-organized and practical. Methods are grouped logically by function (claims, auth, flags, permissions, organizations). Client example effectively demonstrates data hydration from server loaders to components.
360-391: Protected route example is complete and demonstrates best practices. Auth check with proper redirect and returnTo parameter for UX recovery is well-implemented. Headers threading is correct.
442-591: Remaining sections are comprehensive and well-documented. Organizations, Self-Serve Portal (correctly hyphenated ✓), Analytics, Internationalization, Audience, subdomains, preview URLs, health check, and troubleshooting are all clearly explained with practical examples. Management API correctly references the separate package.
60-60: Past review comments have been properly addressed. Hyphenation corrections ("back-end" at line 60 and "Self-Serve Portal" at line 461) are in place per previous feedback.Also applies to: 461-461
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (2)
43-48: Consider consolidating duplicate Internationalization sections.The guide includes internationalization content in two places: a subsection under "Sign up and sign in" (lines 221–234) and a standalone "Internationalization" section (lines 513–526) with identical information about setting the
langparameter.Consolidate these into a single section or clarify the distinction (e.g., one is auth-specific, the other is general guidance). Alternatively, the top-level section could be removed if the subsection within auth flows is sufficient.
Also applies to: 221-234, 513-526
206-219: Clarify or consolidate Organizations content.Organizations are discussed in two places:
- Lines 206–219: Logging into specific organizations during authentication (org_code parameter)
- Lines 448–465: Broader organizations section covering login and creation
Consider whether this separation is intentional (auth-specific vs. org management) or if it should be consolidated into a single, well-organized section for clarity.
Also applies to: 448-465
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx(7 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2024-11-12T06:00:08.396Z
Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 253
File: src/content/docs/properties/work-with-properties/property-groups.mdx:13-13
Timestamp: 2024-11-12T06:00:08.396Z
Learning: In the project documentation, the `/kinde-apis/management` and `/kinde-apis/frontend` pages use a third-party API reference and client that loads a Single Page Application (SPA). Therefore, links to sections within these pages are valid, even if they appear to point to non-existent sections in static analysis, and should not be flagged.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
📚 Learning: 2025-09-04T02:15:38.458Z
Learnt from: clairekinde11
Repo: kinde-oss/documentation PR: 545
File: src/content/docs/design/customize-with-code/custom-styling-per-application.mdx:59-70
Timestamp: 2025-09-04T02:15:38.458Z
Learning: In Kinde custom pages repository structure, layout.tsx should be placed as a sibling to the (kinde) directory at pages/layout.tsx level, not inside the (kinde) directory. The import path "../../layout" from pages/(kinde)/(default)/page.tsx works correctly with this structure in Kinde's system.
Applied to files:
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
🪛 LanguageTool
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
[grammar] ~41-~41: Ensure spelling is correct
Context: ... is for developers using Remix. New to Kinde? [Get started here](/get-started/guides/...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~52-~52: Ensure spelling is correct
Context: ...mix-starter-kit). Clone it and add your Kinde application details. ## Install for an...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~284-~284: Ensure spelling is correct
Context: ...ticated!", user); } }); } ## Kinde Auth data - Server jsx const { ge...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (2)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (2)
60-60: Excellent: previous issues have been resolved.
- Line 60: "back-end" is now correctly hyphenated ✓
- Line 467: "Self-Serve Portal" heading is now correctly hyphenated ✓
- Lines 405–425: Import statements are now present in refresh token examples ✓
Also applies to: 467-467, 405-425
1-597: Well-structured comprehensive guide with solid code examples.The restructuring mirrors the Next.js SDK format effectively:
- Installation paths (new/existing projects) are clear and actionable
- Route handler setup (lines 84–95), middleware (lines 101–119), and provider setup (lines 121–165) are well-documented with working examples
- Kinde Auth data methods are logically grouped into categories (claims, auth, flags, permissions, orgs)
- Refresh token patterns include proper imports and preserve headers for background rotation
- New sections (Management API, Analytics, Audience, Subdomains, Preview URLs, Debug mode, Health check, Migration guide) provide comprehensive coverage
Code examples consistently follow Remix conventions (LoaderFunctionArgs, ActionFunctionArgs, useLoaderData, redirect/json responses) and are copy-paste ready.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (1)
245-256: Add missing imports for copy-paste usability.This code block uses
LoaderFunctionArgs,json,redirect, andgetKindeSessionwithout imports. For consistency with other examples in this doc, include the necessary imports.🔎 Suggested fix
+import { json, LoaderFunctionArgs, redirect } from "@remix-run/node"; +import { getKindeSession } from "@kinde-oss/kinde-remix-sdk"; + export const loader = async ({request}: LoaderFunctionArgs) => { const {getUser, headers} = await getKindeSession(request);
🤖 Fix all issues with AI agents
In @src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx:
- Line 33: The frontmatter 'updated' field in the document is stale (shows
2024-01-15); update the 'updated' field value to the current date (e.g.,
2025-12-09 or today's date) in the same file so the metadata reflects the PR's
changes.
- Around line 407-418: The exported Remix action is currently named
updateProfile which Remix won't recognize as a route action; rename the function
export from updateProfile to action (keep the implementation the same: async ({
request }: ActionFunctionArgs) => { ... }) and update any internal references to
use action so Remix can pick up the route handler, ensuring you still import
json, ActionFunctionArgs, and getKindeSession and return json({ user }, {
headers }) as before.
- Around line 114-131: The docs import KindeProvider from the package
@kinde-oss/kinde-auth-react but the install section only references
@kinde-oss/kinde-remix-sdk; update the install instructions to mention
@kinde-oss/kinde-auth-react as an optional dependency required when using the
KindeProvider (client-side auth state), and add a brief note near the example
calling out that you must install @kinde-oss/kinde-auth-react if you plan to use
KindeProvider in app/root.tsx.
- Around line 472-479: The docs example uses PortalPage from the external
package "@kinde/js-utils" but the install section doesn’t mention this optional
dependency; update the installation or the example with a short note that
PortalPage (and related portal helpers) come from "@kinde/js-utils" and must be
installed when using portal features (referencing PortalPage in the example) —
either add a one-line inline note next to the import or add the package to the
prerequisite install list so readers know to npm/yarn add @kinde/js-utils when
using portal utilities.
🧹 Nitpick comments (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (1)
525-528: Clarify multi-audience env var syntax.The inline
#comment may not work in all.envparsers (some treat it as part of the value). Consider showing the multi-audience example on a separate line with a preceding comment, and quote values with spaces.🔎 Suggested fix
```shell KINDE_AUDIENCE=<your-api> -KINDE_AUDIENCE=<api-one> <api-two> # multiple audiences (space separated) +# Multiple audiences (space-separated) +KINDE_AUDIENCE="<api-one> <api-two>"</details> </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used**: Repository UI **Review profile**: CHILL **Plan**: Pro <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 2d3fa9e6656e82f979d11b157c119d19fabab00f and 6cebbc9190aa2e84d4f6c848da0fc87645a77da8. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> <details> <summary>🧰 Additional context used</summary> <details> <summary>🧠 Learnings (6)</summary> <details> <summary>📓 Common learnings</summary>Learnt from: victoreronmosele
Repo: kinde-oss/documentation PR: 647
File: src/content/docs/developer-tools/sdks/native/ios-sdk.mdx:278-297
Timestamp: 2025-12-27T18:42:35.893Z
Learning: In Kinde iOS SDK documentation (src/content/docs/developer-tools/sdks/native/ios-sdk.mdx), when parameters like loginHint and connectionId are documented, it is preferred to list them in the API reference Arguments section and link to detailed documentation pages rather than duplicating detailed descriptions, format specifications, and validation rules inline. This follows the "document once, reference anywhere" principle.</details> <details> <summary>📚 Learning: 2024-11-12T06:00:08.396Z</summary>Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 253
File: src/content/docs/properties/work-with-properties/property-groups.mdx:13-13
Timestamp: 2024-11-12T06:00:08.396Z
Learning: In the project documentation, the/kinde-apis/managementand/kinde-apis/frontendpages use a third-party API reference and client that loads a Single Page Application (SPA). Therefore, links to sections within these pages are valid, even if they appear to point to non-existent sections in static analysis, and should not be flagged.**Applied to files:** - `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> <details> <summary>📚 Learning: 2024-10-22T06:12:51.559Z</summary>Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 226
File: src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx:0-0
Timestamp: 2024-10-22T06:12:51.559Z
Learning: The Kinde documentation's base URL is notkinde.com, so links to the documentation should use the correct base URL.**Applied to files:** - `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> <details> <summary>📚 Learning: 2024-10-22T06:13:23.808Z</summary>Learnt from: marcosmartini
Repo: kinde-oss/documentation PR: 226
File: src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx:0-0
Timestamp: 2024-10-22T06:13:23.808Z
Learning: In the Kinde documentation, links may uselocalhostURLs that are fixed to relative paths, and the docs base URL is notkinde.com.**Applied to files:** - `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> <details> <summary>📚 Learning: 2025-09-04T02:15:38.458Z</summary>Learnt from: clairekinde11
Repo: kinde-oss/documentation PR: 545
File: src/content/docs/design/customize-with-code/custom-styling-per-application.mdx:59-70
Timestamp: 2025-09-04T02:15:38.458Z
Learning: In Kinde custom pages repository structure, layout.tsx should be placed as a sibling to the (kinde) directory at pages/layout.tsx level, not inside the (kinde) directory. The import path "../../layout" from pages/(kinde)/(default)/page.tsx works correctly with this structure in Kinde's system.**Applied to files:** - `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> <details> <summary>📚 Learning: 2025-12-27T18:42:29.479Z</summary>Learnt from: victoreronmosele
Repo: kinde-oss/documentation PR: 647
File: src/content/docs/developer-tools/sdks/native/ios-sdk.mdx:278-297
Timestamp: 2025-12-27T18:42:29.479Z
Learning: In MDX documentation files (e.g., any API reference docs), when documenting parameters (like loginHint, connectionId), prefer listing them in the API reference Arguments section and link to detailed documentation pages instead of duplicating descriptions, format specs, or validation rules inline. This follows the 'document once, reference anywhere' principle.**Applied to files:** - `src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` </details> </details><details> <summary>🪛 LanguageTool</summary> <details> <summary>src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx</summary> [grammar] ~41-~41: Ensure spelling is correct Context: ... is for developers using Remix. New to Kinde? [Get started here](/get-started/guides/... (QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1) --- [grammar] ~53-~53: Ensure spelling is correct Context: ...th back-end applications. Create one in Kinde. See [Add and manage applications](/bui... (QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1) --- [grammar] ~328-~328: Ensure spelling is correct Context: ...ation()` - `getUserOrganizations()` ## Kinde Auth data - Client Pass data from your... (QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1) </details> </details> </details> <details> <summary>🔇 Additional comments (3)</summary><blockquote> <details> <summary>src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (3)</summary><blockquote> `353-384`: **LGTM!** The protected route example is complete with all necessary imports, proper loader structure, headers propagation for token refresh, and `returnTo` parameter usage. This demonstrates the recommended pattern clearly. --- `420-439`: **LGTM!** The Management API section provides a clear server-side example with proper imports and headers propagation. --- `568-577`: **LGTM!** The "State not found error" section clearly explains the cause (domain mismatch between auth start and callback) and provides actionable solutions. This will help developers troubleshoot a common issue. </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
|
|
||
| This SDK is for developers using Remix. | ||
|
|
||
| New to Kinde? [Get started here](/get-started/guides/first-things-first/). |
There was a problem hiding this comment.
I'll just add suggestions down the document like below. Please don't feel the need to use them :-) Just ideas
New to Kinde? Refer to the Getting Started guide.
| New to Kinde? [Get started here](/get-started/guides/first-things-first/). | ||
|
|
||
| ## Create a back end application in Kinde | ||
| ## Install for a new project |
| The quickest way to start is with the [Remix starter kit](https://github.com/kinde-starter-kits/kinde-remix-starter-kit). Clone it and add your Kinde application details. | ||
|
|
||
| ## Install the Kinde Remix SDK into your Remix project | ||
| ## Install for an existing project |
| ## Install for a new project | ||
|
|
||
| The Remix SDK works with back end applications. Create one in Kinde. See [Add and manage applications](/build/applications/add-and-manage-applications/). | ||
| The quickest way to start is with the [Remix starter kit](https://github.com/kinde-starter-kits/kinde-remix-starter-kit). Clone it and add your Kinde application details. |
There was a problem hiding this comment.
"quickest" -> "fastest"
"Clone it" -> "Clone the repository"
| <PackageManagers pkg="@kinde-oss/kinde-remix-sdk" /> | ||
|
|
||
| ## **Set callback URLs** | ||
| If you plan to use the optional client-side `KindeProvider` example below, also install `@kinde-oss/kinde-auth-react`: |
There was a problem hiding this comment.
If you intend to use the optional client-side KindeProvider component (illustrated in the example below), also install the React authentication helpers:
| yarn add @kinde-oss/kinde-auth-react | ||
| ``` | ||
|
|
||
| If you want to use portal navigation helpers (for example `PortalPage`), install `@kinde/js-utils`: |
There was a problem hiding this comment.
To utilize portal navigation utilities (e.g., PortalPage), install the JavaScript utilities package:
|
|
||
| The Remix SDK works with back-end applications. Create one in Kinde. See [Add and manage applications](/build/applications/add-and-manage-applications/). | ||
|
|
||
| 1. In Kinde, go to **Settings > Applications > [Your app] > View details**. |
There was a problem hiding this comment.
"In Kinde" -> "In the Kinde dashboard"
| The Remix SDK works with back-end applications. Create one in Kinde. See [Add and manage applications](/build/applications/add-and-manage-applications/). | ||
|
|
||
| 1. In Kinde, go to **Settings > Applications > [Your app] > View details**. | ||
| 2. Add your callback URLs in the relevant fields. For example: |
|
|
||
| 1. In Kinde, go to **Settings > Applications > [Your app] > View details**. | ||
| 2. Add your callback URLs in the relevant fields. For example: | ||
| - Allowed callback URLs (also known as redirect URIs) - for example `http://localhost:3000/kinde-auth/callback` |
There was a problem hiding this comment.
Allowed callback URLs (redirect URIs) - e.g. http://localhost:3000/kinde-auth/callback
| 1. In Kinde, go to **Settings > Applications > [Your app] > View details**. | ||
| 2. Add your callback URLs in the relevant fields. For example: | ||
| - Allowed callback URLs (also known as redirect URIs) - for example `http://localhost:3000/kinde-auth/callback` | ||
| - Allowed logout redirect URLs - for example `http://localhost:3000` |
There was a problem hiding this comment.
Allowed logout redirect URLs - e.g. http://localhost:3000
| 2. Add your callback URLs in the relevant fields. For example: | ||
| - Allowed callback URLs (also known as redirect URIs) - for example `http://localhost:3000/kinde-auth/callback` | ||
| - Allowed logout redirect URLs - for example `http://localhost:3000` | ||
| 3. Select **Save**. |
| ## Configure environment variables | ||
|
|
||
| While you are in your Kinde backend application, copy the Client ID and Client secret, redirect URLs, etc. Add these details to the Environment variables for your application. | ||
| While you are in your Kinde backend application, copy the Client ID and Client secret, redirect URLs, etc. Add these details to the environment variables for your application. Add `KINDE_AUDIENCE` if you need to call a protected API. |
There was a problem hiding this comment.
While configuring your backend application in the Kinde dashboard, copy the Client ID, Client Secret, Issuer URL, and any required redirect URIs. Store these values securely in your application's environment variables.
Add KINDE_AUDIENCE if your application needs to call protected APIs (this populates the aud claim in access tokens).
| 3. Select **Save**. | ||
|
|
||
| ## Set up environment variables | ||
| ## Configure environment variables |
There was a problem hiding this comment.
"Configure environment variables" -> "Environment Variables"
| ``` | ||
|
|
||
| ## Set up authentication routes | ||
| ## Set up Kinde Auth Route Handlers |
There was a problem hiding this comment.
"Set up Kinde Auth Route Handlers" -> "Authentication Route Handler"
| ## Set up Kinde Auth Route Handlers | ||
|
|
||
| Create this file `app/routes/kinde-auth.$index.tsx`. | ||
| Create `app/routes/kinde-auth.$index.tsx`. This single route file handles login, logout, register, callback, health, etc. |
There was a problem hiding this comment.
Create a catch-all route to handle all Kinde authentication endpoints (login, logout, callback, register, health check, etc.) - e.g. app/routes/kinde-auth.$index.tsx
| } | ||
| ``` | ||
|
|
||
| ## Customising Kinde Auth API paths |
There was a problem hiding this comment.
""Customising Kinde Auth API paths" -> "Custom Base Path"
|
|
||
| ## Customising Kinde Auth API paths | ||
|
|
||
| By default, Kinde endpoints live at `/kinde-auth/*`. If you want a different base path, rename the route file (for example `app/routes/auth.$index.tsx`) and update any links that point to `/kinde-auth/...` to the new path. |
There was a problem hiding this comment.
By default, authentication endpoints are mounted at /kinde-auth/. To use a different prefix (e.g. /auth/):
- Rename the file → app/routes/auth.$index.tsx
- Update all references (links, redirects) from /kinde-auth/... to the new path
|
|
||
| By default, Kinde endpoints live at `/kinde-auth/*`. If you want a different base path, rename the route file (for example `app/routes/auth.$index.tsx`) and update any links that point to `/kinde-auth/...` to the new path. | ||
|
|
||
| ## Set up middleware |
There was a problem hiding this comment.
"Set up middleware" -> "Session Management"
|
|
||
| ## Set up middleware | ||
|
|
||
| Remix does not require a separate middleware file. Use loaders to validate the session and pass the returned `headers` through your responses so refresh tokens can rotate in the background. |
There was a problem hiding this comment.
Remix handles protection and session validation via loaders. Always return the headers object from getKindeSession in your responses to enable automatic background refresh token rotation.
| }; | ||
| ``` | ||
|
|
||
| ## Set up the Kinde Auth Provider |
There was a problem hiding this comment.
"Set up the Kinde Auth Provider" -> "Client-Side Auth Context (KindeProvider)"
|
|
||
| ## Set up the Kinde Auth Provider | ||
|
|
||
| The Remix SDK works server-side, but you can wrap your root to expose auth state to components. Use the React provider and feed it data from your loader. |
There was a problem hiding this comment.
Although the SDK is primarily server-oriented, you can expose authentication state to React components using the KindeProvider.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (2)
299-332: AddrefreshTokensto the destructuring example.The
refreshTokens()method is documented in the "Authentication and user information" section but is missing from the code snippet destructuring. According to the Kinde Remix SDK API,refreshTokens()is available fromgetKindeSession(request)and should be included.Suggested fix
const { getUser, getBooleanFlag, getFlag, getIntegerFlag, getStringFlag, getPermission, getClaim, getClaimValue, getOrganization, getPermissions, getToken, + refreshTokens, getUserOrganizations, getUserProfile, isAuthenticated } = await getKindeSession(request);
261-276: Add headers to auth redirects — required for session rotation to work.The
redirect()calls on lines 261-276 and 385-390 are missing theheadersparameter. Per Kinde's SDK requirements, these headers must be passed to anyredirect()response so that Set-Cookie headers for session rotation survive the redirect. Without them, session rotation will fail.🔧 Required fix
- throw redirect("/kinde-auth/login?returnTo=/protected-route"); + throw redirect("/kinde-auth/login?returnTo=/protected-route", { headers });- throw redirect("/kinde-auth/login?returnTo=/protected"); + throw redirect("/kinde-auth/login?returnTo=/protected", { headers });
🤖 Fix all issues with AI agents
In `@src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx`:
- Around line 549-556: Change the code fence from "shell" to "env" and update
the multi-audience example to use quoted space-separated values; specifically,
in the Audience section replace the ```shell fence with ```env and change the
second KINDE_AUDIENCE line to use KINDE_AUDIENCE="<api-one> <api-two>" so it
correctly represents a .env value for KINDE_AUDIENCE.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (2)
267-277: Add missing imports in thereturnToloader example.The snippet uses
json,redirect,LoaderFunctionArgs, andgetKindeSessionbut lacks their import statements. Unlike the surrounding examples in this section, which include imports, this snippet is not copy-paste ready. Add the following imports:+import { json, LoaderFunctionArgs, redirect } from "@remix-run/node"; +import { getKindeSession } from "@kinde-oss/kinde-remix-sdk"; + export const loader = async ({request}: LoaderFunctionArgs) => {
95-116: Fix the catch‑all route filename and parameter syntax to match Remix splat route conventions.The example uses
app/routes/kinde-auth.$index.tsxandparams.index, which are incorrect for Remix splat routes. Splat routes use$in the filename and access the captured path viaparams["*"].Required changes
-Create a catch-all route to handle all Kinde authentication endpoints (login, logout, callback, register, health check, etc.) - e.g. `app/routes/kinde-auth.$index.tsx` +Create a catch-all route to handle all Kinde authentication endpoints (login, logout, callback, register, health check, etc.) - e.g. `app/routes/kinde-auth.$.tsx` export async function loader({ params, request }: LoaderFunctionArgs) { - return await handleAuth(request, params.index); + return await handleAuth(request, params["*"]); } -1. Rename the file → `app/routes/auth.$index.tsx` +1. Rename the file → `app/routes/auth.$.tsx`
🤖 Fix all issues with AI agents
In `@src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx`:
- Around line 412-440: The first snippet defines loader and calls json,
LoaderFunctionArgs and getKindeSession but is missing imports; add the imports
at the top of that snippet—import json and LoaderFunctionArgs from
"@remix-run/node" and import getKindeSession from "@kinde-oss/kinde-remix-sdk"
so the loader function compiles and the referenced symbols (loader, json,
LoaderFunctionArgs, getKindeSession) are resolved.
♻️ Duplicate comments (1)
src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx (1)
482-505: Re‑validate the Self‑serve portal API link.This link was previously reported as returning 404. Please re‑check the target and update if the canonical path has changed.
#!/bin/bash # Verify the Self-serve portal API link target curl -s -o /dev/null -w "%{http_code}\n" "https://kinde.com/build/self-service-portal/self-serve-portal-for-orgs/"
| ```typescript | ||
| // Refresh tokens in the background | ||
| export const loader = async ({request}: LoaderFunctionArgs) => { | ||
| const {headers} = await getKindeSession(request); | ||
| return json({paylod: "Refreshing tokens in the backgrounf"}, {headers}); | ||
| return json({payload: "Refreshing tokens in the background"}, {headers}); | ||
| }; | ||
|
|
||
| // Refresh tokens manually | ||
| export const action = ({request}: ActionFunctionArgs) => { | ||
| import { json, LoaderFunctionArgs, ActionFunctionArgs, redirect } from "@remix-run/node"; | ||
| import { getKindeSession } from "@kinde-oss/kinde-remix-sdk"; | ||
|
|
||
| export const action = async ({request}: ActionFunctionArgs) => { | ||
| const {refreshTokens} = await getKindeSession(request); | ||
| const headers = refreshTokens(); | ||
| const headers = await refreshTokens(); | ||
| return redirect("/profile", {headers}); | ||
| }; | ||
|
|
||
| // Refresh after an update | ||
| import { json, ActionFunctionArgs } from "@remix-run/node"; | ||
| import { getKindeSession } from "@kinde-oss/kinde-remix-sdk"; | ||
|
|
||
| export const action = async ({request}: ActionFunctionArgs) => { | ||
| const { refreshTokens, getUser } = await getKindeSession(request); | ||
| // ...perform your mutation here... | ||
| const headers = await refreshTokens(); | ||
| const user = await getUser(); | ||
| return json({ user }, { headers }); | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx | sed -n '412,440p'Repository: kinde-oss/documentation
Length of output: 1348
Add missing imports to the first code snippet.
The first example uses json, LoaderFunctionArgs, and getKindeSession without importing them. Add the required imports at the top of the snippet.
Suggested fix
+import { json, LoaderFunctionArgs } from "@remix-run/node";
+import { getKindeSession } from "@kinde-oss/kinde-remix-sdk";
+
// Refresh tokens in the background
export const loader = async ({request}: LoaderFunctionArgs) => {
const {headers} = await getKindeSession(request);🤖 Prompt for AI Agents
In `@src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx` around lines 412
- 440, The first snippet defines loader and calls json, LoaderFunctionArgs and
getKindeSession but is missing imports; add the imports at the top of that
snippet—import json and LoaderFunctionArgs from "@remix-run/node" and import
getKindeSession from "@kinde-oss/kinde-remix-sdk" so the loader function
compiles and the referenced symbols (loader, json, LoaderFunctionArgs,
getKindeSession) are resolved.
3 participants
Description (required)
Remix SDK guide has been restructured to mirror the Next.js SDK format: clearer install/setup steps, auth flow guidance, route protection, session helper reference, refresh guidance, i18n, and management API note. Updated frontmatter metadata/date accordingly.
Key updates (see src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx):
Added install + callback URL + .env configuration section matching the Next.js guide structure.
Clarified auth route setup and login/register/logout patterns with organization and return-to examples.
Added route-protection example that returns headers for background token refresh and a callback hook example after auth.
Documented getKindeSession helpers in a table with grouped explanations for claims, tokens, flags, permissions, and organizations.
Refined refresh-token examples with imports and guidance on preserving headers, plus a dedicated i18n section.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.