component - Authentication components - Next.js | Clerk Docs

<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.

Important

<OAuthConsent /> only renders for authenticated users. If the user is signed out, the component will not be displayed.

Pages that host OAuth consent flows must set the referrer policy to strict-origin-when-cross-origin. This ensures the cross-origin POST request to FAPI includes the Origin header and Clerk can validate the CSRF token.

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 { OAuthConsent, Show } from '@clerk/nextjs'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  referrer: 'strict-origin-when-cross-origin',
}

export default function OAuthConsentPage() {
  return (
    <Show when="signed-in">
      <OAuthConsent />
    </Show>
  )
}

Properties

All props are optional.

An object to style your components. Will only affect Clerk components and not Account Portal pages.

An element to be rendered while the component is mounting.

Override the OAuth client ID. By default, Clerk reads this from the client_id query parameter in the current URL.

Override the OAuth scope. By default, Clerk reads this from the scope query parameter in the current URL.