<OAuthConsent /> component
The <OAuthConsent /> component renders an OAuth consent screen for authenticated users after they are redirected to the OAuth authorization page. It retrieves the OAuth application's consent metadata and displays the requested scopes, allowing the user to approve or deny access.
By default, <OAuthConsent /> reads the OAuth client_id, scope, and redirect_uri from the current URL. You can override the client_id and scope with props when rendering the component on a custom route.
For route setup guidance and security considerations, see Set up a custom OAuth consent page.
Example
The following example includes a basic implementation of the <OAuthConsent /> component. You can use this as a starting point for your own implementation.
import type { Route } from './+types/oauth-consent'
import { OAuthConsent, Show } from '@clerk/react-router'
export const meta: Route.MetaFunction = () => [
{
name: 'referrer',
content: 'strict-origin-when-cross-origin',
},
]
export default function OAuthConsentPage() {
return (
<Show when="signed-in">
<OAuthConsent />
</Show>
)
}Properties
All props are optional.
- Name
appearance?- Type
Appearance | undefined- Description
An object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
fallback?- Type
ReactNode- Description
An element to be rendered while the component is mounting.
- Name
oauthClientId?- Type
string- Description
Override the OAuth client ID. By default, Clerk reads this from the
client_idquery parameter in the current URL.
- Name
scope?- Type
string- Description
Override the OAuth scope. By default, Clerk reads this from the
scopequery parameter in the current URL.
Feedback
Last updated on