You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/developer-tools/sdks/backend/remix-sdk.mdx
+27-21Lines changed: 27 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,25 +38,25 @@ ai_summary: Complete guide for Remix SDK including installation, route handlers,
38
38
39
39
This SDK is for developers using Remix.
40
40
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/).
42
42
43
-
## Install for a new project
43
+
## Installation – New Project
44
44
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.
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:
52
52
53
53
```bash
54
54
npm install @kinde-oss/kinde-auth-react
55
55
# or
56
56
yarn add @kinde-oss/kinde-auth-react
57
57
```
58
58
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:
60
60
61
61
```bash
62
62
npm install @kinde/js-utils
@@ -68,15 +68,17 @@ yarn add @kinde/js-utils
68
68
69
69
The Remix SDK works with back-end applications. Create one in Kinde. See [Add and manage applications](/build/applications/add-and-manage-applications/).
70
70
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:
- Allowed logout redirect URLs - e.g. `http://localhost:3000`
75
+
3.Click **Save**.
76
76
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).
78
81
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.
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
+
94
99
95
-
Create `app/routes/kinde-auth.$index.tsx`. This single route file handles login, logout, register, callback, health, etc.
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/`):
109
113
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
111
116
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
113
118
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.
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.
0 commit comments