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.

Usage with JavaScript

Add the following <meta> tag to the page that hosts the OAuth consent screen:

index.html
<meta name="referrer" content="strict-origin-when-cross-origin" />

The following methods available on an instance of the Clerk class are used to render and control the <OAuthConsent /> component:

The following examples assume that you have followed the quickstartJavaScript Icon in order to add Clerk to your JavaScript application.

Render the <OAuthConsent /> component to an HTML <div> element.

function mountOAuthConsent(node: HTMLDivElement, props?: OAuthConsentProps): void
  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element used to render the <OAuthConsent /> component.

  • Name
    props?
    Type
    OAuthConsentProps
    Description

    The properties to pass to the <OAuthConsent /> component.

main.js
import { Clerk } from '@clerk/clerk-js'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="oauth-consent"></div>
`

const oauthConsentDiv = document.getElementById('oauth-consent')

clerk.mountOAuthConsent(oauthConsentDiv)

Unmount and run cleanup on an existing <OAuthConsent /> component instance.

function unmountOAuthConsent(node: HTMLDivElement): void
  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element with a rendered <OAuthConsent /> component instance.

main.js
import { Clerk } from '@clerk/clerk-js'

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load()

document.getElementById('app').innerHTML = `
  <div id="oauth-consent"></div>
`

const oauthConsentDiv = document.getElementById('oauth-consent')

clerk.mountOAuthConsent(oauthConsentDiv)

// ...

clerk.unmountOAuthConsent(oauthConsentDiv)

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