Skip to main content

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

Important

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.

src/routes/oauth-consent.tsx
import { OAuthConsent, Show } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/oauth-consent')({
  head: () => ({
    meta: [
      {
        name: 'referrer',
        content: 'strict-origin-when-cross-origin',
      },
    ],
  }),
  component: OAuthConsentPage,
})

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_id query parameter in the current URL.

  • Name
    scope?
    Type
    string
    Description

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

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub