feat(ui,react): Introduce OAuthConsent component#8289
Open
wobsoriano wants to merge 8 commits intomainfrom
Open
feat(ui,react): Introduce OAuthConsent component#8289wobsoriano wants to merge 8 commits intomainfrom
wobsoriano wants to merge 8 commits intomainfrom
Conversation
Introduce a zero-config <OAuthConsent /> React component exported from @clerk/react and @clerk/nextjs that renders the OAuth consent screen for a signed-in user. The component reads client_id, scope, and redirect_uri from the URL by default and submits the consent decision via a native form POST to /v1/internal/oauth-consent. The accounts portal continues to work unchanged via the existing clerk.__internal_mountOAuthConsent path; the underlying UI component is a hybrid that uses context values when provided (accounts portal path) and falls back to the useOAuthConsent hook + URL parsing otherwise (public path). Highlights: - New public OAuthConsentProps type in @clerk/shared - OAuthConsentCtx refactored to lowercase oauth* casing with translation layer in ComponentContextProvider for accounts portal backward compat - Hybrid _OAuthConsent component with native form wrapping and submit buttons (proper a11y semantics) - URL parsing moved out of useOAuthConsent hook into the component for cleaner separation of concerns and SSR safety - New <OAuthConsent /> wrapper in @clerk/react re-exported from @clerk/nextjs - 7 unit tests covering public and accounts portal paths - Export snapshot updates for react-router and tanstack-react-start
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 320c1fb The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a new public OAuthConsent React component and exports it from Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx`:
- Around line 49-77: The form currently intercepts all submissions when either
ctx.onAllow or ctx.onDeny exists causing the missing callback to become a no-op;
change the gating logic to require both callbacks be present: replace
hasContextCallbacks = Boolean(ctx.onAllow || ctx.onDeny) with a check like
hasBothContextCallbacks = Boolean(ctx.onAllow && ctx.onDeny) and use
hasBothContextCallbacks in handleSubmit and in the code that suppresses the
hidden fallback inputs (the block around the hidden fallback inputs currently at
lines ~314-322) so that when only one callback is provided the other button
falls back to native POST.
- Around line 51-58: The actionUrl in OAuthConsent is missing forwarding of the
dev-browser JWT for development frontends, causing unauthenticated POSTs in dev;
modify the actionUrl builder in OAuthConsent so when the target is a dev
frontend (detect via clerk.frontendApi containing localhost/127.0.0.1 or a
CLERK_DEV_FRONTEND env flag), append a query param (e.g. dev_browser_jwt) with
the development JWT obtained from clerk (e.g. clerk.devBrowserJWT) or by calling
a helper like getDevBrowserJWT() before returning url.toString(), and keep the
existing session id param logic intact.
🪄 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 YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: e9b4495f-f3d8-4368-a9ff-f11a6dcb0edd
⛔ Files ignored due to path filters (2)
packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snapis excluded by!**/*.snappackages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (15)
.changeset/public-oauth-consent-component.mdpackages/nextjs/src/client-boundary/uiComponents.tsxpackages/nextjs/src/index.tspackages/react/src/components/index.tspackages/react/src/components/uiComponents.tsxpackages/shared/src/react/hooks/__tests__/useOAuthConsent.shared.spec.tspackages/shared/src/react/hooks/__tests__/useOAuthConsent.spec.tsxpackages/shared/src/react/hooks/useOAuthConsent.shared.tspackages/shared/src/react/hooks/useOAuthConsent.tsxpackages/shared/src/react/hooks/useOAuthConsent.types.tspackages/shared/src/types/clerk.tspackages/ui/src/components/OAuthConsent/OAuthConsent.tsxpackages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.spec.tsxpackages/ui/src/contexts/ClerkUIComponentsContext.tsxpackages/ui/src/types.ts
💤 Files with no reviewable changes (3)
- packages/shared/src/react/hooks/useOAuthConsent.shared.ts
- packages/shared/src/react/hooks/tests/useOAuthConsent.shared.spec.ts
- packages/shared/src/react/hooks/tests/useOAuthConsent.spec.tsx
Comment on lines
+49
to
+77
| const hasContextCallbacks = Boolean(ctx.onAllow || ctx.onDeny); | ||
|
|
||
| const actionUrl = (() => { | ||
| const url = new URL(`https://${clerk.frontendApi}/v1/internal/oauth-consent`); | ||
| if (clerk.session?.id) { | ||
| url.searchParams.set('_clerk_session_id', clerk.session.id); | ||
| } | ||
| // TODO: forward dev browser JWT for development instances | ||
| return url.toString(); | ||
| })(); | ||
|
|
||
| const forwardedParams = | ||
| typeof window !== 'undefined' && window.location | ||
| ? Array.from(new URLSearchParams(window.location.search).entries()) | ||
| : []; | ||
|
|
||
| // Accounts portal path delegates to context callbacks; public path lets the form submit natively. | ||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| if (!hasContextCallbacks) { | ||
| return; | ||
| } | ||
| e.preventDefault(); | ||
| const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null; | ||
| if (submitter?.value === 'true') { | ||
| ctx.onAllow?.(); | ||
| } else { | ||
| ctx.onDeny?.(); | ||
| } | ||
| }; |
Contributor
There was a problem hiding this comment.
Partial context callbacks break one of the consent actions.
Lines 49-77 intercept all form submissions as soon as either onAllow or onDeny exists, while Lines 314-322 suppress the hidden fallback inputs in that same case. If a caller provides only one callback, the other button becomes a no-op instead of falling back to native POST.
Suggested fix
- const hasContextCallbacks = Boolean(ctx.onAllow || ctx.onDeny);
+ const hasAllowCallback = Boolean(ctx.onAllow);
+ const hasDenyCallback = Boolean(ctx.onDeny);
+ const hasBothContextCallbacks = hasAllowCallback && hasDenyCallback;
// Accounts portal path delegates to context callbacks; public path lets the form submit natively.
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
- if (!hasContextCallbacks) {
- return;
- }
- e.preventDefault();
const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null;
- if (submitter?.value === 'true') {
- ctx.onAllow?.();
- } else {
- ctx.onDeny?.();
- }
+ const callback = submitter?.value === 'true' ? ctx.onAllow : ctx.onDeny;
+ if (!callback) {
+ return;
+ }
+ e.preventDefault();
+ callback();
};
…
- {!hasContextCallbacks &&
+ {!hasBothContextCallbacks &&
forwardedParams.map(([key, value]) => (
<input
key={key}Also applies to: 314-322
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx` around lines 49 -
77, The form currently intercepts all submissions when either ctx.onAllow or
ctx.onDeny exists causing the missing callback to become a no-op; change the
gating logic to require both callbacks be present: replace hasContextCallbacks =
Boolean(ctx.onAllow || ctx.onDeny) with a check like hasBothContextCallbacks =
Boolean(ctx.onAllow && ctx.onDeny) and use hasBothContextCallbacks in
handleSubmit and in the code that suppresses the hidden fallback inputs (the
block around the hidden fallback inputs currently at lines ~314-322) so that
when only one callback is provided the other button falls back to native POST.
Comment on lines
+51
to
+58
| const actionUrl = (() => { | ||
| const url = new URL(`https://${clerk.frontendApi}/v1/internal/oauth-consent`); | ||
| if (clerk.session?.id) { | ||
| url.searchParams.set('_clerk_session_id', clerk.session.id); | ||
| } | ||
| // TODO: forward dev browser JWT for development instances | ||
| return url.toString(); | ||
| })(); |
Contributor
There was a problem hiding this comment.
The native POST flow is still incomplete for development instances.
Line 56 calls out the missing dev-browser-JWT forwarding. As written, this new form submission path is knowingly unauthenticated on development frontends, so <OAuthConsent /> will fail there even though the component is otherwise rendered and actionable.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx` around lines 51 -
58, The actionUrl in OAuthConsent is missing forwarding of the dev-browser JWT
for development frontends, causing unauthenticated POSTs in dev; modify the
actionUrl builder in OAuthConsent so when the target is a dev frontend (detect
via clerk.frontendApi containing localhost/127.0.0.1 or a CLERK_DEV_FRONTEND env
flag), append a query param (e.g. dev_browser_jwt) with the development JWT
obtained from clerk (e.g. clerk.devBrowserJWT) or by calling a helper like
getDevBrowserJWT() before returning url.toString(), and keep the existing
session id param logic intact.
Member
Author
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
…g in OAuthConsent
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (2)
packages/ui/src/components/OAuthConsent/OAuthConsent.tsx (2)
49-53:⚠️ Potential issue | 🔴 CriticalPartial callback mode breaks one consent action.
Line 49 treats “either callback exists” as full context mode. Then Line 94 always prevents native submit, and Line 341 suppresses hidden fallback params. If only one callback is provided, the other button becomes a no-op.
Suggested fix
- const hasContextCallbacks = Boolean(ctx.onAllow || ctx.onDeny); + const hasAllowCallback = Boolean(ctx.onAllow); + const hasDenyCallback = Boolean(ctx.onDeny); + const hasBothContextCallbacks = hasAllowCallback && hasDenyCallback; - const isPublicFlow = !hasContextCallbacks; + const isPublicFlow = !hasBothContextCallbacks; const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { - if (!hasContextCallbacks) { - return; - } - e.preventDefault(); const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLButtonElement | null; - if (submitter?.value === 'true') { - ctx.onAllow?.(); - } else { - ctx.onDeny?.(); - } + const callback = submitter?.value === 'true' ? ctx.onAllow : ctx.onDeny; + if (!callback) { + return; + } + e.preventDefault(); + callback(); }; - {!hasContextCallbacks && + {!hasBothContextCallbacks && forwardedParams.map(([key, value]) => ( <input key={key} type='hidden' name={key} value={value} /> ))}As per coding guidelines, “Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.”
Also applies to: 93-104, 341-349
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx` around lines 49 - 53, The code treats "hasContextCallbacks" as true if either ctx.onAllow or ctx.onDeny exists, which breaks the other action when only one callback is provided; change the logic to require both callbacks (use both ctx.onAllow && ctx.onDeny) when deciding full-context behavior (adjust hasContextCallbacks/isPublicFlow accordingly), update the submit handler (the function that currently always prevents native submission) to only prevent default when both callbacks are present, and stop suppressing the hidden fallback params unless both callbacks exist so the fallback submit will work when one callback is missing.
78-85:⚠️ Potential issue | 🔴 CriticalNative POST auth is incomplete for development instances.
Line 83 explicitly leaves dev JWT forwarding as TODO. This keeps the dev consent POST path potentially unauthenticated and failing in development environments.
#!/bin/bash set -euo pipefail # Verify whether repo already has a canonical helper/field for dev browser JWT forwarding. rg -n -C3 --type=ts --type=tsx 'dev_browser_jwt|devBrowserJWT|getDevBrowserJWT|CLERK_DEV_FRONTEND|frontendApi' # Verify all OAuth consent POST action builders for consistency. rg -n -C3 --type=ts --type=tsx '/v1/internal/oauth-consent'As per coding guidelines, “Comment only when the issue must be resolved before merge, otherwise remain silent.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx` around lines 78 - 85, The actionUrl builder currently omits forwarding the dev browser JWT, causing dev POSTs to /v1/internal/oauth-consent to be unauthenticated; update the IIFE that constructs actionUrl to detect development instances and append the dev JWT (e.g., use the project's canonical helper such as getDevBrowserJWT or devBrowserJWT if present, or read CLERK_DEV_FRONTEND token) as a query param (e.g., dev_browser_jwt) when available, ensuring the URL includes url.searchParams.set('_clerk_dev_browser_jwt', token) or the agreed param name; reference the actionUrl constant and clerk.session usage so you add the token only in dev contexts and do not change production behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx`:
- Around line 49-53: The code treats "hasContextCallbacks" as true if either
ctx.onAllow or ctx.onDeny exists, which breaks the other action when only one
callback is provided; change the logic to require both callbacks (use both
ctx.onAllow && ctx.onDeny) when deciding full-context behavior (adjust
hasContextCallbacks/isPublicFlow accordingly), update the submit handler (the
function that currently always prevents native submission) to only prevent
default when both callbacks are present, and stop suppressing the hidden
fallback params unless both callbacks exist so the fallback submit will work
when one callback is missing.
- Around line 78-85: The actionUrl builder currently omits forwarding the dev
browser JWT, causing dev POSTs to /v1/internal/oauth-consent to be
unauthenticated; update the IIFE that constructs actionUrl to detect development
instances and append the dev JWT (e.g., use the project's canonical helper such
as getDevBrowserJWT or devBrowserJWT if present, or read CLERK_DEV_FRONTEND
token) as a query param (e.g., dev_browser_jwt) when available, ensuring the URL
includes url.searchParams.set('_clerk_dev_browser_jwt', token) or the agreed
param name; reference the actionUrl constant and clerk.session usage so you add
the token only in dev contexts and do not change production behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: b8ad3739-da04-4a58-860a-7f698aadc4dc
📒 Files selected for processing (1)
packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
Contributor
|
Hey @wobsoriano - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.3.13-snapshot.v20260412003557 --save-exact
npm i @clerk/astro@3.0.13-snapshot.v20260412003557 --save-exact
npm i @clerk/backend@3.2.9-snapshot.v20260412003557 --save-exact
npm i @clerk/chrome-extension@3.1.10-snapshot.v20260412003557 --save-exact
npm i @clerk/clerk-js@6.7.0-snapshot.v20260412003557 --save-exact
npm i @clerk/dev-cli@0.1.1-snapshot.v20260412003557 --save-exact
npm i @clerk/expo@3.1.10-snapshot.v20260412003557 --save-exact
npm i @clerk/expo-passkeys@1.0.11-snapshot.v20260412003557 --save-exact
npm i @clerk/express@2.1.1-snapshot.v20260412003557 --save-exact
npm i @clerk/fastify@3.1.11-snapshot.v20260412003557 --save-exact
npm i @clerk/hono@0.1.11-snapshot.v20260412003557 --save-exact
npm i @clerk/localizations@4.4.1-snapshot.v20260412003557 --save-exact
npm i @clerk/msw@0.0.11-snapshot.v20260412003557 --save-exact
npm i @clerk/nextjs@7.1.0-snapshot.v20260412003557 --save-exact
npm i @clerk/nuxt@2.2.0-snapshot.v20260412003557 --save-exact
npm i @clerk/react@6.3.0-snapshot.v20260412003557 --save-exact
npm i @clerk/react-router@3.0.13-snapshot.v20260412003557 --save-exact
npm i @clerk/shared@4.7.0-snapshot.v20260412003557 --save-exact
npm i @clerk/tanstack-react-start@1.0.13-snapshot.v20260412003557 --save-exact
npm i @clerk/testing@2.0.13-snapshot.v20260412003557 --save-exact
npm i @clerk/ui@1.6.0-snapshot.v20260412003557 --save-exact
npm i @clerk/upgrade@2.0.3-snapshot.v20260412003557 --save-exact
npm i @clerk/vue@2.0.12-snapshot.v20260412003557 --save-exact |
…lic flow Remove the "Authorization failed:" prefix from error messages to match the rest of the codebase's direct-message convention. Add a loading guard so the consent card does not render with empty values while the useOAuthConsent hook is still fetching. Returns null until data is available, letting the React wrapper's fallback handle loading UI.
Member
Author
|
!snapshot |
…onsentProps alongside deprecated capital-A ones Both casings coexist: new lowercase fields (oauthApplicationName, etc.) are preferred, while the deprecated capital-A fields (oAuthApplicationName, etc.) remain for accounts portal backward compat. The translation layer in ComponentContextProvider uses the new fields with ?? fallback to the deprecated ones.
…elds used by accounts portal
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
WIP
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change