Add custom OAuth consent page docs#3412
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@jescalan I think there may be some overlap with this PR from @wobsoriano |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5cfba6f380
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {Array.from(searchParams.entries()).map(([key, value], index) => ( | ||
| <input key={`${key}:${index}`} type="hidden" name={key} value={value} /> | ||
| ))} |
There was a problem hiding this comment.
If a malicious authorization URL reaches this custom consent route with a query parameter like consented=true, this loop renders it as a hidden input before the clicked submit button, so the POST body contains both the attacker-supplied value and the user's Allow/Deny value. Any parser that reads the first form value, such as FormData.get(), would treat a user clicking Deny as consent; whitelist the OAuth authorization parameters to preserve and exclude reserved form fields like consented (and apply the same fix to the repeated snippets).
Useful? React with 👍 / 👎.
| --- | ||
| title: '`<OAuthConsent />` component' | ||
| description: Clerk's <OAuthConsent /> component renders a consent screen for OAuth provider flows. | ||
| sdk: astro, nextjs, nuxt, react, react-router, tanstack-react-start, vue |
There was a problem hiding this comment.
The shared Clerk reference already exposes mountOAuthConsent and unmountOAuthConsent on Clerk, but this frontmatter omits js-frontend, so the SDK selector/search will hide the new OAuthConsent reference page from JavaScript Frontend users even though they have the public mounting API for this component. Include js-frontend and document the mount/unmount usage as the other component reference pages do.
Useful? React with 👍 / 👎.
| export function OAuthConsentPage() { | ||
| return ( | ||
| <Show when="signed-in"> | ||
| <OAuthConsent /> | ||
| </Show> |
There was a problem hiding this comment.
These React, React Router, and TanStack snippets are presented as copy-paste custom consent routes, but unlike the Next/Astro/Nuxt examples they never set strict-origin-when-cross-origin even though this guide says that policy is required because the form posts to Clerk's Frontend API and can otherwise be rejected with Origin: null. Users following these snippets directly can end up with consent submissions that fail in the affected SPA/framework routes; add the same <meta name="referrer" ...>/head configuration to each example.
Useful? React with 👍 / 👎.
| ```tsx {{ filename: 'app/oauth-consent/custom-consent-form.tsx' }} | ||
| 'use client' | ||
|
|
||
| import { useClerk, useOAuthConsent } from '@clerk/nextjs' |
There was a problem hiding this comment.
The generated reference for useOAuthConsent() in this repo documents the hook as imported from @clerk/react/internal, while this new custom-flow snippet imports it from the public framework package; the same pattern is repeated for React Router and TanStack. If customers copy these examples with the currently documented exports, TypeScript/module resolution fails before the consent page can render, so the snippets should use an available import path or the package references need to be updated to expose the hook publicly.
Useful? React with 👍 / 👎.
|
|
||
| return ( | ||
| <form method="POST" action={clerk.oauthApplication.buildConsentActionUrl({ clientId })}> | ||
| <h1>{data.oauthApplicationName} wants access to your account</h1> |
There was a problem hiding this comment.
For customers who copy the low-level custom-flow examples, the rendered consent surface only shows the OAuth app name/logo plus scopes and redirect host, even though the guide's required work also includes the OAuth application URL, client ID, resource service, and signed-in user. Omitting those fields makes the sample weaker than the security requirements it documents and can lead custom pages to ship without enough identity context for users to distinguish a legitimate client from an impersonating one; add these fields to each repeated snippet or avoid presenting the sample as the minimum shape.
Useful? React with 👍 / 👎.
jescalan
force-pushed
the
je/docs-oauth-custom-consent-page
branch
from
5cfba6f to
da91f34
Compare
|
Superseded by #3413 |
3 participants
Summary
Adds documentation for configuring a custom OAuth consent page, with a strong recommendation to use the default Account Portal page or Clerk prebuilt OAuthConsent component instead of a fully custom flow. The guide explains the phishing and token-grant risks, redirect URI presentation requirements, safe route configuration, and low-level custom-flow responsibilities when a custom implementation is unavoidable.
Changes in this repo
Adds a new custom OAuth consent page guide, an OAuthConsent component reference page, framework-specific prebuilt and custom-flow snippets, navigation entries, and cross-links from existing OAuth docs.
Preview links
New pages:
<OAuthConsent />component referenceChanged sections: