# <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](https://clerk.com/docs/nextjs/guides/configure/auth-strategies/oauth/custom-consent-page.md).

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

filename: app/oauth-consent/page.tsx
```tsx
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.

| Name           | Type                    | Description                                                                                                        |
| -------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------ |
| appearance?    | Appearance | undefined | An object to style your components. Will only affect Clerk components and not Account Portal pages.                |
| fallback?      | ReactNode               | An element to be rendered while the component is mounting.                                                         |
| oauthClientId? | string                  | Override the OAuth client ID. By default, Clerk reads this from the client\_id query parameter in the current URL. |
| scope?         | string                  | Override the OAuth scope. By default, Clerk reads this from the scope query parameter in the current URL.          |

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)