Skip to content

Commit 2449521

Browse files
committed
fix: small fix in comment
1 parent 6558cb6 commit 2449521

1 file changed

Lines changed: 27 additions & 21 deletions

File tree

src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,25 @@ ai_summary: Complete guide for Remix SDK including installation, route handlers,
3838

3939
This SDK is for developers using Remix.
4040

41-
New to Kinde? [Get started here](/get-started/guides/first-things-first/).
41+
New to Kinde? [Refer to the Getting Started guide](/get-started/guides/first-things-first/).
4242

43-
## Install for a new project
43+
## Installation – New Project
4444

45-
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.
45+
The fastest way to start is with the [Remix starter kit](https://github.com/kinde-starter-kits/kinde-remix-starter-kit). Clone the repository and add your Kinde application details.
4646

47-
## Install for an existing project
47+
## Installation – Existing Project
4848

4949
<PackageManagers pkg="@kinde-oss/kinde-remix-sdk" />
5050

51-
If you plan to use the optional client-side `KindeProvider` example below, also install `@kinde-oss/kinde-auth-react`:
51+
If you intend to use the optional client-side `KindeProvider` component (illustrated in the example below), also install the React authentication helpers:
5252

5353
```bash
5454
npm install @kinde-oss/kinde-auth-react
5555
# or
5656
yarn add @kinde-oss/kinde-auth-react
5757
```
5858

59-
If you want to use portal navigation helpers (for example `PortalPage`), install `@kinde/js-utils`:
59+
To utilize portal navigation utilities (e.g. `PortalPage`), install the JavaScript utilities package:
6060

6161
```bash
6262
npm install @kinde/js-utils
@@ -68,15 +68,17 @@ yarn add @kinde/js-utils
6868

6969
The Remix SDK works with back-end applications. Create one in Kinde. See [Add and manage applications](/build/applications/add-and-manage-applications/).
7070

71-
1. In Kinde, go to **Settings > Applications > [Your app] > View details**.
72-
2. Add your callback URLs in the relevant fields. For example:
73-
- Allowed callback URLs (also known as redirect URIs) - for example `http://localhost:3000/kinde-auth/callback`
74-
- Allowed logout redirect URLs - for example `http://localhost:3000`
75-
3. Select **Save**.
71+
1. In the Kinde dashboard, go to **Settings > Applications > [Your app] > View details**.
72+
2. Add your callback URLs in the corresponding fields. For example:
73+
- Allowed callback URLs (redirect URIs) - e.g. `http://localhost:3000/kinde-auth/callback`
74+
- Allowed logout redirect URLs - e.g. `http://localhost:3000`
75+
3. Click **Save**.
7676

77-
## Configure environment variables
77+
## Environment Variables
78+
79+
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.
80+
Add `KINDE_AUDIENCE` if your application needs to call protected APIs (this populates the `aud` claim in access tokens).
7881

79-
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.
8082

8183
`.env`
8284

@@ -90,9 +92,11 @@ KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000
9092
KINDE_AUDIENCE=<optional-audience>
9193
```
9294

93-
## Set up Kinde Auth Route Handlers
95+
## Authentication Route Handler
96+
97+
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`
98+
9499

95-
Create `app/routes/kinde-auth.$index.tsx`. This single route file handles login, logout, register, callback, health, etc.
96100

97101
```jsx
98102
import { handleAuth } from "@kinde-oss/kinde-remix-sdk";
@@ -103,14 +107,16 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
103107
}
104108
```
105109

106-
## Customising Kinde Auth API paths
110+
## Custom Base Path
107111

108-
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.
112+
By default, authentication endpoints are mounted at `/kinde-auth/`. To use a different prefix (e.g. `/auth/`):
109113

110-
## Set up middleware
114+
1. Rename the file → `app/routes/auth.$index.tsx`
115+
2. Update all references (links, redirects) from `/kinde-auth/...` to the new path
111116

112-
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.
117+
## Session Management
113118

119+
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.
114120
```ts
115121
import { json, LoaderFunctionArgs } from "@remix-run/node";
116122
import { getKindeSession } from "@kinde-oss/kinde-remix-sdk";
@@ -127,9 +133,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
127133
};
128134
```
129135

130-
## Set up the Kinde Auth Provider
136+
## Client-Side Auth Context (KindeProvider)
131137

132-
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.
138+
Although the SDK is primarily server-oriented, you can expose authentication state to React components using the KindeProvider.
133139

134140
```tsx
135141
// app/root.tsx

0 commit comments

Comments
 (0)