update: Supabase new OIDC integration#764
Conversation
WalkthroughThe Kinde–Supabase integration guide was rewritten as a Quickstart covering custom OAuth configuration, Next.js authentication flows, logout handling, redirects, and verification steps. ChangesKinde–Supabase OAuth Quickstart
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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: |
da57d6b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://dd3f9d9e.kinde-docs-preview.pages.dev |
| Branch Preview URL: | https://tamal-update-supabase-new-oi.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: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/content/docs/integrate/third-party-tools/kinde-supabase.mdx`:
- Around line 100-114: Update the Kinde-Supabase integration guide’s setup steps
to instruct users to add /auth/callback to Supabase Authentication > URL
Configuration, including http://localhost:3000/auth/callback and the
corresponding production URL.
- Around line 188-198: Validate the next parameter in the GET callback before
using it in NextResponse.redirect, allowing only same-origin relative paths and
rejecting values such as `@attacker.example` or absolute URLs. Preserve the
existing /protected fallback and redirect valid paths using the existing origin.
- Around line 82-84: Update the Kinde setup instructions around the application
Details page to also add the local and production app origins to the Allowed
logout redirect URLs field, alongside the existing callback URL configuration,
so logout returns correctly to the app.
- Around line 77-79: Update the Aside in the Kinde/Supabase integration
documentation to instruct users to request the Kinde provider refresh token with
the `offline` scope instead of `offline_access`, and explicitly distinguish it
from Supabase’s session refresh token.
🪄 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: 046e3f06-c067-461d-88a2-575eb3017265
📒 Files selected for processing (1)
src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
| <Aside> | ||
| To get a refresh token, include the `offline_access` scope. | ||
| </Aside> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the target file around the cited lines.
sed -n '60,95p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
# Search for related scope usage in the repo.
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/.git/**' 'offline_access|offline scope|Kinde provider refresh token|refresh token' src/content/docsRepository: kinde-oss/documentation
Length of output: 39442
🌐 Web query:
Kinde offline_access offline scope refresh tokens documentation
💡 Result:
To request a refresh token in Kinde, you must include the offline scope in your authentication request [1]. Unlike some other OAuth 2.0 providers that use the standard OIDC offline_access scope [2][3][4], Kinde specifically uses offline [1][5][6]. Key details regarding Kinde's approach include: Scope requirement: When initiating an authentication request (e.g., via the /oauth2/auth endpoint), ensure the scope parameter contains offline [1]. Kinde's official SDKs typically include offline in the default scope list (along with openid, profile, and email), so you may not need to take extra action if using an official SDK [7]. If you are building a custom implementation or overriding the defaults, you must explicitly include offline in the scope string [1][6][7]. Behavior: Including the offline scope enables your application to receive a refresh token alongside the access token [1]. This refresh token can then be used to obtain new access tokens without requiring the user to re-authenticate, effectively extending the user's session [1][8]. Usage: Once you receive the refresh token, you use it by sending a POST request to the /oauth2/token endpoint with the grant_type set to refresh_token [1]. If you are following tutorials or documentation for other identity providers (such as Auth0 or Keycloak), note that they commonly use offline_access [2][4], whereas Kinde uses offline [1][6]. Providing the incorrect scope will generally result in failing to receive a refresh token [1].
Citations:
- 1: https://docs.kinde.com/build/tokens/refresh-tokens/
- 2: https://auth0.com/docs/secure/tokens/refresh-tokens/get-refresh-tokens
- 3: https://docs.duendesoftware.com/identityserver/tokens/refresh/
- 4: https://github.com/keycloak/keycloak/blob/main/docs/documentation/server_admin/topics/sessions/offline.adoc
- 5: https://docs.kinde.com/build/tokens/oath-scopes/
- 6: https://docs.kinde.com/developer-tools/about/using-kinde-without-an-sdk/
- 7: https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/
- 8: https://kinde.com/learn/authentication/types-and-methods/how-to-use-refresh-tokens/
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '60,95p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/.git/**' 'offline_access|offline scope|Kinde provider refresh token|refresh token' src/content/docsRepository: kinde-oss/documentation
Length of output: 39442
Use offline instead of offline_access
Kinde only returns a refresh token for offline; offline_access completes without one. Make clear this is the Kinde provider refresh token, not Supabase’s session refresh token.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/integrate/third-party-tools/kinde-supabase.mdx` around lines
77 - 79, Update the Aside in the Kinde/Supabase integration documentation to
instruct users to request the Kinde provider refresh token with the `offline`
scope instead of `offline_access`, and explicitly distinguish it from Supabase’s
session refresh token.
| 8. Copy the **Callback URL** provided by Supabase. You’ll add this to Kinde next. | ||
| 9. Select **Update provider**. | ||
| 10. Go to your Kinde application **Details** page and paste the callback URL into the **Allowed Callback URLs** field. Select **Save**. |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== file outline =="
ast-grep outline src/content/docs/integrate/third-party-tools/kinde-supabase.mdx --view expanded || true
echo
echo "== relevant line ranges =="
sed -n '70,95p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
echo
sed -n '228,248p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
echo
echo "== search for logout redirect/docs mentions =="
rg -n "logout redirect|Allowed logout redirect|window.location.origin|callback URL|Allowed Callback URLs" src/content/docs/integrate/third-party-tools/kinde-supabase.mdxRepository: kinde-oss/documentation
Length of output: 3420
🌐 Web query:
Kinde logout redirect URLs window.location.origin allowed logout redirect URLs documentation
💡 Result:
To ensure users are correctly redirected after logging out of Kinde, you must configure the "Allowed logout redirect URLs" in your Kinde application settings [1][2]. Kinde does not support silent logout; a redirect is required to terminate the session [1]. 1. Configure Allowed URLs: Go to Settings > Applications > [Your App] > View details in the Kinde dashboard [1][2]. Add the desired redirect URL to the "Allowed logout redirect URLs" field [1][2]. If this field is empty or the provided URL does not match, users may be redirected to Kinde’s default hosted logout page instead of your application [3]. 2. Using window.location.origin: You can use window.location.origin to dynamically pass your application's base URL as the redirect destination. When implementing your logout logic, ensure the value you pass to the logout endpoint matches one of the URLs registered in your "Allowed logout redirect URLs" list [2]. 3. Implementation: - Manual Redirect: If you are not using an SDK, append your URL to the logout endpoint [2]: https://<your_kinde_subdomain>.kinde.com/logout?redirect=<your_logout_url> - SDK usage: Most Kinde SDKs (such as TypeScript, Express, or Next.js) include a logout method that uses a configured logout redirect URL (often defined via environment variables like KINDE_POST_LOGOUT_REDIRECT_URL or similar configuration parameters) [4][5][6][7]. Some SDK implementations allow you to pass a custom post-logout redirect URL at runtime, which will be validated against your "Allowed" list [8][9]. Always ensure that the URL you intend to use (e.g., window.location.origin) is explicitly added to the Kinde dashboard's whitelist [1][2].
Citations:
- 1: https://docs.kinde.com/get-started/connect/callback-urls/
- 2: https://docs.kinde.com/developer-tools/about/using-kinde-without-an-sdk/
- 3: https://www.answeroverflow.com/m/1248601203550457886
- 4: https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/
- 5: https://docs.kinde.com/developer-tools/sdks/backend/php-sdk/
- 6: https://docs.kinde.com/developer-tools/sdks/backend/express-sdk/
- 7: https://docs.kinde.com/developer-tools/sdks/backend/nextjs-prev-sdk/
- 8: Bug: post_logout_redirect_url after /api/auth/logout does not redirect to specified url kinde-auth-nextjs#132
- 9: fix: Post logout redirect URL kinde-auth-nextjs#192
🌐 Web query:
site:docs.kinde.com Allowed logout redirect URLs Kinde logout redirect redirect parameter
💡 Result:
To handle logout redirects in Kinde, you must configure both the allowed URLs in your Kinde application settings and provide the specific redirect parameter in your implementation [1][2]. Allowed Logout Redirect URLs You must register your permitted logout URLs within the Kinde dashboard to ensure security [2]. 1. Navigate to Settings > Applications in your Kinde dashboard [2]. 2. Select your application and click View details [2]. 3. Add your desired URLs to the Allowed logout redirect URLs field [2]. Logout Redirect Parameter When initiating a logout via a Kinde SDK or API, you typically specify the destination URL using a logout redirect parameter [3][4][5]. While naming conventions vary slightly by SDK (e.g., logoutRedirectURL, logoutRedirectUri, or KINDE_POST_LOGOUT_REDIRECT_URL), they all serve the same purpose: defining where the user is sent after signing out [3][6][4][7]. Implementation Examples - Backend SDKs (e.g., TypeScript, PHP): You typically configure the logoutRedirectURL or KINDE_POST_LOGOUT_REDIRECT_URL environment variable during client initialization [3][7]. When the logout method is called, the SDK handles the redirection process based on this value [3][5][8]. - Native/Mobile SDKs (e.g., Android, iOS, Flutter): You must ensure the redirect URL uses your application's custom URL scheme (e.g., myapp://kinde_logoutcallback) and matches what is registered in your Kinde application settings [6][5][8]. Always ensure that any URL passed as a logout redirect parameter matches one of the URLs registered in your Allowed logout redirect URLs list, or the logout process may fail due to a security mismatch [3][4][5].
Citations:
- 1: https://docs.kinde.com/get-started/connect/callback-urls/
- 2: https://docs.kinde.com/developer-tools/about/using-kinde-without-an-sdk/
- 3: https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/
- 4: https://docs.kinde.com/developer-tools/sdks/native/react-native-sdk/
- 5: https://docs.kinde.com/developer-tools/sdks/native/ios-sdk/
- 6: https://docs.kinde.com/developer-tools/sdks/native/android-sdk/
- 7: https://docs.kinde.com/developer-tools/sdks/backend/php-sdk/
- 8: https://docs.kinde.com/developer-tools/sdks/native/flutter-sdk/
Add the app origin to Kinde logout redirects. The setup only registers the callback URL, but the logout button redirects to window.location.origin; that URL also needs to be listed under Allowed logout redirect URLs or the return-to-app logout flow can break. Add the local and production origins during setup.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/integrate/third-party-tools/kinde-supabase.mdx` around lines
82 - 84, Update the Kinde setup instructions around the application Details page
to also add the local and production app origins to the Allowed logout redirect
URLs field, alongside the existing callback URL configuration, so logout returns
correctly to the app.
| To add Kinde authentication to a Next.js app with Supabase: | ||
|
|
||
| 1. To create a new Supabase Next.js project, run: | ||
|
|
||
| ```bash | ||
| mkdir -p "app/api/auth/[kindeAuth]" | ||
| touch "app/api/auth/[kindeAuth]/route.js" | ||
| npx create-next-app -e with-supabase | ||
| ``` | ||
|
|
||
| 6. Open the newly created `route.js` file, enter the following code, and save the file: | ||
|
|
||
| ```bash | ||
| import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server" | ||
| export const GET = handleAuth() | ||
|
|
||
| 2. Add the following to your `.env.local` file: | ||
|
|
||
| ```env title="env.local" | ||
| NEXT_PUBLIC_KINDE_DOMAIN=https://<your_brand_name>.kinde.com | ||
| ``` | ||
|
|
||
| 7. Create an environment variables file `.env.local` by typing: | ||
|
|
||
|
|
||
| You can use either your Kinde domain (`https://your_brand_name.kinde.com`) or your [Custom domain](/build/domains/pointing-your-domain/) (`https://auth.your_brand_name.com`). Use the same domain you used for the Issuer URL in the previous step. |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
sed -n '1,240p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdxRepository: kinde-oss/documentation
Length of output: 9465
🏁 Script executed:
rg -n "auth/callback|Redirect URLs|URL Configuration|redirectTo|supabase" src/content/docs/integrate/third-party-tools -SRepository: kinde-oss/documentation
Length of output: 6506
Add /auth/callback to Supabase redirect URLs Both OAuth buttons send users to window.location.origin/auth/callback, but the guide never adds that route to Supabase’s Authentication > URL Configuration. Add http://localhost:3000/auth/callback and the production equivalent so the callback flow can complete.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/integrate/third-party-tools/kinde-supabase.mdx` around lines
100 - 114, Update the Kinde-Supabase integration guide’s setup steps to instruct
users to add /auth/callback to Supabase Authentication > URL Configuration,
including http://localhost:3000/auth/callback and the corresponding production
URL.
| export async function GET(request: Request) { | ||
| const { searchParams, origin } = new URL(request.url); | ||
| const code = searchParams.get("code"); | ||
| const next = searchParams.get("next") ?? "/protected"; | ||
|
|
||
| if (code) { | ||
| const supabase = await createClient(); | ||
| const { error } = await supabase.auth.exchangeCodeForSession(code); | ||
| if (!error) { | ||
| return NextResponse.redirect(`${origin}${next}`); | ||
| } |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n--- file outline ---\n'
wc -l src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
printf '\n--- relevant lines ---\n'
sed -n '160,230p' src/content/docs/integrate/third-party-tools/kinde-supabase.mdx
printf '\n--- search redirect patterns ---\n'
rg -n 'NextResponse\.redirect\(|searchParams\.get\("next"\)|new URL\(' src/content/docs -S
printf '\n--- search for next validation guidance ---\n'
rg -n 'relative paths|open redirect|redirect.*next|next parameter|`@attacker`\.example|origin === origin' src/content/docs -SRepository: kinde-oss/documentation
Length of output: 7995
🏁 Script executed:
node - <<'JS'
const origin = 'https://app.example';
for (const next of [
'/protected',
'dashboard',
'`@attacker.example`',
'//@attacker.example',
'//attacker.example',
'https://attacker.example',
'/%5C%5Cattacker.example',
]) {
const candidate = `${origin}${next}`;
try {
const url = new URL(candidate);
console.log(JSON.stringify({ next, candidate, href: url.href, origin: url.origin, username: url.username, host: url.host, pathname: url.pathname }));
} catch (e) {
console.log(JSON.stringify({ next, candidate, error: e.message }));
}
}
JSRepository: kinde-oss/documentation
Length of output: 1746
Validate next before redirecting. searchParams.get("next") is concatenated directly into ${origin}${next}, so values like @attacker.example can turn the callback into a cross-site redirect. Restrict this parameter to same-origin relative paths before calling NextResponse.redirect(...).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/integrate/third-party-tools/kinde-supabase.mdx` around lines
188 - 198, Validate the next parameter in the GET callback before using it in
NextResponse.redirect, allowing only same-origin relative paths and rejecting
values such as `@attacker.example` or absolute URLs. Preserve the existing
/protected fallback and redirect valid paths using the existing origin.
1 participant
This PR replaces the old minted JWT authentication to Supabase native OIDC integration. Now Kinde works as an IdP for Supabase; SB handles the session, and users are stored in the database.
Summary by CodeRabbit