From adf0d782b50774267ff09d5ac71ffc9bc51655a3 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 22 Apr 2026 19:33:44 -0700
Subject: [PATCH 01/21] Add OAuthConsent and useOAuthConsent docs

---
 docs/_partials/hooks/hook-list.mdx            |   1 +
 docs/manifest.json                            |   8 +
 .../authentication/oauth-consent.mdx          | 224 ++++++++++++++++++
 docs/reference/components/overview.mdx        |   1 +
 docs/reference/hooks/use-oauth-consent.mdx    | 194 +++++++++++++++
 5 files changed, 428 insertions(+)
 create mode 100644 docs/reference/components/authentication/oauth-consent.mdx
 create mode 100644 docs/reference/hooks/use-oauth-consent.mdx

diff --git a/docs/_partials/hooks/hook-list.mdx b/docs/_partials/hooks/hook-list.mdx
index 5d5164e1e3..0fb144a390 100644
--- a/docs/_partials/hooks/hook-list.mdx
+++ b/docs/_partials/hooks/hook-list.mdx
@@ -1,6 +1,7 @@
 - [`useUser()`](/docs/reference/hooks/use-user)
 - [`useClerk()`](/docs/reference/hooks/use-clerk)
 - [`useAuth()`](/docs/reference/hooks/use-auth)
+- [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent)
 - [`useSignIn()`](/docs/reference/hooks/use-sign-in)
 - [`useSignUp()`](/docs/reference/hooks/use-sign-up)
 - [`useWaitlist()`](/docs/reference/hooks/use-waitlist)
diff --git a/docs/manifest.json b/docs/manifest.json
index f7ee6b46b7..9700e69fc3 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2292,6 +2292,10 @@
                           "title": "`useAuth()`",
                           "href": "/docs/reference/hooks/use-auth"
                         },
+                        {
+                          "title": "`useOAuthConsent()`",
+                          "href": "/docs/reference/hooks/use-oauth-consent"
+                        },
                         {
                           "title": "`useSignIn()`",
                           "href": "/docs/reference/hooks/use-sign-in"
@@ -3570,6 +3574,10 @@
                           "title": "`<GoogleOneTap />`",
                           "href": "/docs/reference/components/authentication/google-one-tap"
                         },
+                        {
+                          "title": "`<OAuthConsent />`",
+                          "href": "/docs/reference/components/authentication/oauth-consent"
+                        },
                         {
                           "title": "`<TaskChooseOrganization />`",
                           "href": "/docs/reference/components/authentication/task-choose-organization"
diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
new file mode 100644
index 0000000000..1246eae867
--- /dev/null
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -0,0 +1,224 @@
+---
+title: '`<OAuthConsent />` component'
+description: Clerk's <OAuthConsent /> component renders an OAuth consent screen for signed-in users.
+sdk: astro, nextjs, nuxt, react, react-router, tanstack-react-start, vue, js-frontend
+---
+
+The `<OAuthConsent />` component renders an OAuth consent screen for a signed-in user on an OAuth authorize redirect page. It loads the OAuth application's consent metadata and displays the requested scopes so the user can allow 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 you need to render the component on a custom route.
+
+> [!IMPORTANT]
+> `<OAuthConsent />` only renders for signed-in users. If the user is signed out, Clerk won't render the component.
+
+## Example
+
+The following example demonstrates how to render `<OAuthConsent />` on a dedicated consent page.
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/oauth-consent/page.tsx' }}
+  import { OAuthConsent } from '@clerk/nextjs'
+
+  export default function Page() {
+    return <OAuthConsent />
+  }
+  ```
+</If>
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
+  import { OAuthConsent } from '@clerk/react'
+
+  export default function OAuthConsentPage() {
+    return <OAuthConsent />
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import { OAuthConsent } from '@clerk/react-router'
+
+  export default function OAuthConsentPage() {
+    return <OAuthConsent />
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import { OAuthConsent } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/oauth-consent')({
+    component: OAuthConsentPage,
+  })
+
+  function OAuthConsentPage() {
+    return <OAuthConsent />
+  }
+  ```
+</If>
+
+<If sdk="astro">
+  ```astro {{ filename: 'src/pages/oauth-consent.astro' }}
+  ---
+  import { OAuthConsent } from '@clerk/astro/components'
+  ---
+
+  <OAuthConsent />
+  ```
+</If>
+
+<If sdk="vue">
+  ```vue {{ filename: 'oauth-consent.vue' }}
+  <script setup lang="ts">
+  import { OAuthConsent } from '@clerk/vue'
+  </script>
+
+  <template>
+    <OAuthConsent />
+  </template>
+  ```
+</If>
+
+<If sdk="nuxt">
+  ```vue {{ filename: 'pages/oauth-consent.vue' }}
+  <script setup lang="ts">
+  // Components are automatically imported
+  </script>
+
+  <template>
+    <OAuthConsent />
+  </template>
+  ```
+</If>
+
+<If sdk="js-frontend">
+  ## Usage with JavaScript
+
+  The following methods available on an instance of the [`Clerk`](/docs/reference/objects/clerk) class are used to render and control the `<OAuthConsent />` component:
+
+  - [`mountOAuthConsent()`](#mount-o-auth-consent)
+  - [`unmountOAuthConsent()`](#unmount-o-auth-consent)
+
+  The following examples assume that you have followed the [quickstart](/docs/js-frontend/getting-started/quickstart) in order to add Clerk to your JavaScript application.
+
+  ### `mountOAuthConsent()`
+
+  Render the `<OAuthConsent />` component to an HTML `<div>` element.
+
+  ```typescript
+  function mountOAuthConsent(node: HTMLDivElement, props?: OAuthConsentProps): void
+  ```
+
+  #### `mountOAuthConsent()` params
+
+  <Properties>
+    - `node`
+    - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+
+    The container `<div>` element used to render the `<OAuthConsent />` component
+
+    ---
+
+    - `props?`
+    - [`OAuthConsentProps`](#properties)
+
+    The properties to pass to the `<OAuthConsent />` component
+  </Properties>
+
+  #### `mountOAuthConsent()` usage
+
+  ```js {{ filename: 'main.js', mark: [15] }}
+  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)
+  ```
+
+  ### `unmountOAuthConsent()`
+
+  Unmount and run cleanup on an existing `<OAuthConsent />` component instance.
+
+  ```typescript
+  function unmountOAuthConsent(node: HTMLDivElement): void
+  ```
+
+  #### `unmountOAuthConsent()` params
+
+  <Properties>
+    - `node`
+    - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+
+    The container `<div>` element with a rendered `<OAuthConsent />` component instance
+  </Properties>
+
+  #### `unmountOAuthConsent()` usage
+
+  ```js {{ filename: 'main.js', mark: [19] }}
+  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)
+  ```
+</If>
+
+## Properties
+
+All props are optional.
+
+<Properties>
+  - `appearance?`
+  - <code>[Appearance](/docs/guides/customizing-clerk/appearance-prop/overview) | undefined</code>
+
+  An object to style your components. This only affects Clerk components and not your application UI outside Clerk.
+
+  ---
+
+  - `fallback?`
+  - `ReactNode`
+
+  An element to render 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.
+</Properties>
+
+> [!NOTE]
+> The `oAuthApplicationName`, `oAuthApplicationLogoUrl`, `oAuthApplicationUrl`, `scopes`, `redirectUrl`, `onAllow`, and `onDeny` props are deprecated internal props used by Clerk's accounts portal. For public apps, prefer passing the OAuth `client_id` and `redirect_uri` in the URL.
diff --git a/docs/reference/components/overview.mdx b/docs/reference/components/overview.mdx
index 28235d2994..0f8d2e8a5d 100644
--- a/docs/reference/components/overview.mdx
+++ b/docs/reference/components/overview.mdx
@@ -11,6 +11,7 @@ Clerk offers a comprehensive suite of components designed to seamlessly integrat
 - [`<SignIn />`](/docs/reference/components/authentication/sign-in)
 - [`<SignUp />`](/docs/reference/components/authentication/sign-up)
 - [`<GoogleOneTap />`](/docs/reference/components/authentication/google-one-tap)
+- [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent)
 - [`<TaskChooseOrganization />`](/docs/reference/components/authentication/task-choose-organization)
 - [`<TaskResetPassword />`](/docs/reference/components/authentication/task-reset-password)
 - [`<TaskSetupMFA />`](/docs/reference/components/authentication/task-setup-mfa)
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
new file mode 100644
index 0000000000..2282072480
--- /dev/null
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -0,0 +1,194 @@
+---
+title: useOAuthConsent()
+description: Load OAuth consent metadata for a signed-in user with Clerk's useOAuthConsent() hook.
+sdk: nextjs, react, react-router, tanstack-react-start
+---
+
+The `useOAuthConsent()` hook loads OAuth consent metadata for a signed-in user. You can use it to build a custom OAuth consent page that fetches the OAuth application's name, logo, URL, requested scopes, and related loading state.
+
+Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component, this hook doesn't read values from the current URL. Pass the `oauthClientId` explicitly, and optionally pass `scope` if you want Clerk to scope the request to a specific space-delimited scope string.
+
+## Parameters
+
+`useOAuthConsent()` accepts a single optional object with the following properties:
+
+<Properties>
+  - `oauthClientId`
+  - `string`
+
+  The OAuth `client_id` from the authorize request. The hook is disabled when this value is empty or omitted.
+
+  ---
+
+  - `scope`
+  - `string`
+
+  An optional space-delimited scope string from the authorize request.
+
+  ---
+
+  - `enabled`
+  - `boolean`
+
+  If `true`, a request will be triggered when the hook is mounted and the user is signed in. Defaults to `true`.
+
+  ---
+
+  - `keepPreviousData`
+  - `boolean`
+
+  If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `true`.
+</Properties>
+
+## Returns
+
+<Properties>
+  - `data`
+  - `OAuthConsentInfo | undefined`
+
+  The OAuth consent screen metadata returned by Clerk, or `undefined` before the first successful fetch.
+
+  ---
+
+  - `error`
+  - `ClerkAPIResponseError | null`
+
+  Any error that occurred during the data fetch, or `null` if no error occurred.
+
+  ---
+
+  - `isLoading`
+  - `boolean`
+
+  Whether the initial consent metadata fetch is still in progress.
+
+  ---
+
+  - `isFetching`
+  - `boolean`
+
+  Whether any request is still in flight, including background updates.
+</Properties>
+
+## Example
+
+The following example demonstrates how to fetch OAuth consent metadata and render a custom consent screen.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
+  import { useOAuthConsent } from '@clerk/react'
+
+  export default function OAuthConsentPage() {
+    const { data, isLoading, error } = useOAuthConsent({
+      oauthClientId: 'client_123',
+      scope: 'openid email profile',
+    })
+
+    if (isLoading) return <div>Loading...</div>
+    if (error) return <div>{error.message}</div>
+    if (!data) return null
+
+    return (
+      <div>
+        <h1>{data.oauthApplicationName}</h1>
+        <ul>
+          {data.scopes.map((scope) => (
+            <li key={scope.scope}>{scope.description || scope.scope}</li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/oauth-consent/page.tsx' }}
+  'use client'
+
+  import { useOAuthConsent } from '@clerk/nextjs'
+
+  export default function Page() {
+    const { data, isLoading, error } = useOAuthConsent({
+      oauthClientId: 'client_123',
+      scope: 'openid email profile',
+    })
+
+    if (isLoading) return <div>Loading...</div>
+    if (error) return <div>{error.message}</div>
+    if (!data) return null
+
+    return (
+      <div>
+        <h1>{data.oauthApplicationName}</h1>
+        <ul>
+          {data.scopes.map((scope) => (
+            <li key={scope.scope}>{scope.description || scope.scope}</li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import { useOAuthConsent } from '@clerk/react-router'
+
+  export default function OAuthConsentPage() {
+    const { data, isLoading, error } = useOAuthConsent({
+      oauthClientId: 'client_123',
+      scope: 'openid email profile',
+    })
+
+    if (isLoading) return <div>Loading...</div>
+    if (error) return <div>{error.message}</div>
+    if (!data) return null
+
+    return (
+      <div>
+        <h1>{data.oauthApplicationName}</h1>
+        <ul>
+          {data.scopes.map((scope) => (
+            <li key={scope.scope}>{scope.description || scope.scope}</li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import { useOAuthConsent } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/oauth-consent')({
+    component: OAuthConsentPage,
+  })
+
+  function OAuthConsentPage() {
+    const { data, isLoading, error } = useOAuthConsent({
+      oauthClientId: 'client_123',
+      scope: 'openid email profile',
+    })
+
+    if (isLoading) return <div>Loading...</div>
+    if (error) return <div>{error.message}</div>
+    if (!data) return null
+
+    return (
+      <div>
+        <h1>{data.oauthApplicationName}</h1>
+        <ul>
+          {data.scopes.map((scope) => (
+            <li key={scope.scope}>{scope.description || scope.scope}</li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+  ```
+</If>

From 07b2e325fa68f317b5506b33ecac4b1375c7f27c Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 22 Apr 2026 19:42:15 -0700
Subject: [PATCH 02/21] chore: improve examples

---
 .../authentication/oauth-consent.mdx          |   3 -
 docs/reference/hooks/use-oauth-consent.mdx    | 118 ++++++++++++++----
 2 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index 1246eae867..9828e2fd9a 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -219,6 +219,3 @@ All props are optional.
 
   Override the OAuth scope. By default, Clerk reads this from the `scope` query parameter in the current URL.
 </Properties>
-
-> [!NOTE]
-> The `oAuthApplicationName`, `oAuthApplicationLogoUrl`, `oAuthApplicationUrl`, `scopes`, `redirectUrl`, `onAllow`, and `onDeny` props are deprecated internal props used by Clerk's accounts portal. For public apps, prefer passing the OAuth `client_id` and `redirect_uri` in the URL.
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 2282072480..ee4131b553 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -72,31 +72,47 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 ## Example
 
-The following example demonstrates how to fetch OAuth consent metadata and render a custom consent screen.
+The following examples demonstrate how to fetch OAuth consent metadata and build a custom consent form. In each example, the `client_id` is read from the current URL and passed to `useOAuthConsent()`, and the form submits to the URL returned by `clerk.oauthApplication.buildConsentActionUrl()`.
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
-  import { useOAuthConsent } from '@clerk/react'
+  import { useClerk, useOAuthConsent } from '@clerk/react'
 
   export default function OAuthConsentPage() {
+    const clerk = useClerk()
+    const params = new URLSearchParams(window.location.search)
+    const clientId = params.get('client_id') ?? ''
+
     const { data, isLoading, error } = useOAuthConsent({
-      oauthClientId: 'client_123',
-      scope: 'openid email profile',
+      oauthClientId: clientId,
     })
 
+    const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
+
     if (isLoading) return <div>Loading...</div>
     if (error) return <div>{error.message}</div>
     if (!data) return null
 
     return (
-      <div>
-        <h1>{data.oauthApplicationName}</h1>
+      <form method="POST" action={actionUrl}>
+        <h1>{data.oauthApplicationName} wants access to your account</h1>
         <ul>
           {data.scopes.map((scope) => (
             <li key={scope.scope}>{scope.description || scope.scope}</li>
           ))}
         </ul>
-      </div>
+
+        <button type="submit" name="consented" value="false">
+          Deny
+        </button>
+        <button type="submit" name="consented" value="true">
+          Allow
+        </button>
+
+        {Array.from(params.entries()).map(([key, value]) => (
+          <input key={key} type="hidden" name={key} value={value} />
+        ))}
+      </form>
     )
   }
   ```
@@ -106,27 +122,44 @@ The following example demonstrates how to fetch OAuth consent metadata and rende
   ```tsx {{ filename: 'app/oauth-consent/page.tsx' }}
   'use client'
 
-  import { useOAuthConsent } from '@clerk/nextjs'
+  import { useClerk, useOAuthConsent } from '@clerk/nextjs'
+  import { useSearchParams } from 'next/navigation'
 
   export default function Page() {
+    const clerk = useClerk()
+    const params = useSearchParams()
+    const clientId = params.get('client_id') ?? ''
+
     const { data, isLoading, error } = useOAuthConsent({
-      oauthClientId: 'client_123',
-      scope: 'openid email profile',
+      oauthClientId: clientId,
     })
 
+    const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
+
     if (isLoading) return <div>Loading...</div>
     if (error) return <div>{error.message}</div>
     if (!data) return null
 
     return (
-      <div>
-        <h1>{data.oauthApplicationName}</h1>
+      <form method="POST" action={actionUrl}>
+        <h1>{data.oauthApplicationName} wants access to your account</h1>
         <ul>
           {data.scopes.map((scope) => (
-            <li key={scope.scope}>{scope.description || scope.scope}</li>
+            <li key={scope.scope}>{scope.description ?? scope.scope}</li>
           ))}
         </ul>
-      </div>
+
+        <button type="submit" name="consented" value="false">
+          Deny
+        </button>
+        <button type="submit" name="consented" value="true">
+          Allow
+        </button>
+
+        {Array.from(params.entries()).map(([key, value]) => (
+          <input key={key} type="hidden" name={key} value={value} />
+        ))}
+      </form>
     )
   }
   ```
@@ -134,27 +167,44 @@ The following example demonstrates how to fetch OAuth consent metadata and rende
 
 <If sdk="react-router">
   ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
-  import { useOAuthConsent } from '@clerk/react-router'
+  import { useClerk, useOAuthConsent } from '@clerk/react-router'
+  import { useSearchParams } from 'react-router'
 
   export default function OAuthConsentPage() {
+    const clerk = useClerk()
+    const [params] = useSearchParams()
+    const clientId = params.get('client_id') ?? ''
+
     const { data, isLoading, error } = useOAuthConsent({
-      oauthClientId: 'client_123',
-      scope: 'openid email profile',
+      oauthClientId: clientId,
     })
 
+    const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
+
     if (isLoading) return <div>Loading...</div>
     if (error) return <div>{error.message}</div>
     if (!data) return null
 
     return (
-      <div>
-        <h1>{data.oauthApplicationName}</h1>
+      <form method="POST" action={actionUrl}>
+        <h1>{data.oauthApplicationName} wants access to your account</h1>
         <ul>
           {data.scopes.map((scope) => (
             <li key={scope.scope}>{scope.description || scope.scope}</li>
           ))}
         </ul>
-      </div>
+
+        <button type="submit" name="consented" value="false">
+          Deny
+        </button>
+        <button type="submit" name="consented" value="true">
+          Allow
+        </button>
+
+        {Array.from(params.entries()).map(([key, value]) => (
+          <input key={key} type="hidden" name={key} value={value} />
+        ))}
+      </form>
     )
   }
   ```
@@ -162,7 +212,7 @@ The following example demonstrates how to fetch OAuth consent metadata and rende
 
 <If sdk="tanstack-react-start">
   ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
-  import { useOAuthConsent } from '@clerk/tanstack-react-start'
+  import { useClerk, useOAuthConsent } from '@clerk/tanstack-react-start'
   import { createFileRoute } from '@tanstack/react-router'
 
   export const Route = createFileRoute('/oauth-consent')({
@@ -170,24 +220,40 @@ The following example demonstrates how to fetch OAuth consent metadata and rende
   })
 
   function OAuthConsentPage() {
+    const clerk = useClerk()
+    const params = new URLSearchParams(window.location.search)
+    const clientId = params.get('client_id') ?? ''
+
     const { data, isLoading, error } = useOAuthConsent({
-      oauthClientId: 'client_123',
-      scope: 'openid email profile',
+      oauthClientId: clientId,
     })
 
+    const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
+
     if (isLoading) return <div>Loading...</div>
     if (error) return <div>{error.message}</div>
     if (!data) return null
 
     return (
-      <div>
-        <h1>{data.oauthApplicationName}</h1>
+      <form method="POST" action={actionUrl}>
+        <h1>{data.oauthApplicationName} wants access to your account</h1>
         <ul>
           {data.scopes.map((scope) => (
             <li key={scope.scope}>{scope.description || scope.scope}</li>
           ))}
         </ul>
-      </div>
+
+        <button type="submit" name="consented" value="false">
+          Deny
+        </button>
+        <button type="submit" name="consented" value="true">
+          Allow
+        </button>
+
+        {Array.from(params.entries()).map(([key, value]) => (
+          <input key={key} type="hidden" name={key} value={value} />
+        ))}
+      </form>
     )
   }
   ```

From d1db10309b35b75817009119d947abfb9b889825 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 23 Apr 2026 07:54:21 -0700
Subject: [PATCH 03/21] chore: idiomatic tanstack start search params

---
 docs/reference/hooks/use-oauth-consent.mdx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index ee4131b553..8298e72b17 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -90,8 +90,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
 
     if (isLoading) return <div>Loading...</div>
-    if (error) return <div>{error.message}</div>
-    if (!data) return null
+    if (error) return <div>Something went wrong.</div>
 
     return (
       <form method="POST" action={actionUrl}>
@@ -137,8 +136,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
 
     if (isLoading) return <div>Loading...</div>
-    if (error) return <div>{error.message}</div>
-    if (!data) return null
+    if (error) return <div>Something went wrong.</div>
 
     return (
       <form method="POST" action={actionUrl}>
@@ -182,8 +180,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
 
     if (isLoading) return <div>Loading...</div>
-    if (error) return <div>{error.message}</div>
-    if (!data) return null
+    if (error) return <div>Something went wrong.</div>
 
     return (
       <form method="POST" action={actionUrl}>
@@ -216,13 +213,16 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
   import { createFileRoute } from '@tanstack/react-router'
 
   export const Route = createFileRoute('/oauth-consent')({
+    validateSearch: (search: Record<string, unknown>) => ({
+      client_id: typeof search.client_id === 'string' ? search.client_id : '',
+    }),
     component: OAuthConsentPage,
   })
 
   function OAuthConsentPage() {
     const clerk = useClerk()
-    const params = new URLSearchParams(window.location.search)
-    const clientId = params.get('client_id') ?? ''
+    const params = Route.useSearch()
+    const clientId = params.client_id
 
     const { data, isLoading, error } = useOAuthConsent({
       oauthClientId: clientId,
@@ -231,8 +231,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
 
     if (isLoading) return <div>Loading...</div>
-    if (error) return <div>{error.message}</div>
-    if (!data) return null
+    if (error) return <div>Something went wrong.</div>
 
     return (
       <form method="POST" action={actionUrl}>
@@ -250,7 +249,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
           Allow
         </button>
 
-        {Array.from(params.entries()).map(([key, value]) => (
+        {Object.entries(params).map(([key, value]) => (
           <input key={key} type="hidden" name={key} value={value} />
         ))}
       </form>

From 4082e14aa36c13a5569422409633ca599c39f4f8 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Thu, 23 Apr 2026 08:00:41 -0700
Subject: [PATCH 04/21] chore: pass scope to hook

---
 docs/reference/hooks/use-oauth-consent.mdx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 8298e72b17..342e94b26c 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -82,9 +82,11 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const clerk = useClerk()
     const params = new URLSearchParams(window.location.search)
     const clientId = params.get('client_id') ?? ''
+    const scope = params.get('scope') ?? undefined
 
     const { data, isLoading, error } = useOAuthConsent({
       oauthClientId: clientId,
+      scope,
     })
 
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
@@ -128,9 +130,11 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const clerk = useClerk()
     const params = useSearchParams()
     const clientId = params.get('client_id') ?? ''
+    const scope = params.get('scope') ?? undefined
 
     const { data, isLoading, error } = useOAuthConsent({
       oauthClientId: clientId,
+      scope,
     })
 
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
@@ -172,9 +176,11 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const clerk = useClerk()
     const [params] = useSearchParams()
     const clientId = params.get('client_id') ?? ''
+    const scope = params.get('scope') ?? undefined
 
     const { data, isLoading, error } = useOAuthConsent({
       oauthClientId: clientId,
+      scope,
     })
 
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })
@@ -215,6 +221,7 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
   export const Route = createFileRoute('/oauth-consent')({
     validateSearch: (search: Record<string, unknown>) => ({
       client_id: typeof search.client_id === 'string' ? search.client_id : '',
+      scope: typeof search.scope === 'string' ? search.scope : undefined,
     }),
     component: OAuthConsentPage,
   })
@@ -223,9 +230,11 @@ The following examples demonstrate how to fetch OAuth consent metadata and build
     const clerk = useClerk()
     const params = Route.useSearch()
     const clientId = params.client_id
+    const scope = params.scope
 
     const { data, isLoading, error } = useOAuthConsent({
       oauthClientId: clientId,
+      scope,
     })
 
     const actionUrl = clerk.oauthApplication.buildConsentActionUrl({ clientId })

From 63c770af389c51a17ee8360aab70e77b6cc9ff9b Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 4 May 2026 10:57:32 -0600
Subject: [PATCH 05/21] docs review

---
 .../components/authentication/oauth-consent.mdx      | 12 ++++++------
 docs/reference/hooks/use-oauth-consent.mdx           |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index 9828e2fd9a..35bcdf2d0a 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -1,15 +1,15 @@
 ---
 title: '`<OAuthConsent />` component'
-description: Clerk's <OAuthConsent /> component renders an OAuth consent screen for signed-in users.
+description: Clerk's <OAuthConsent /> component renders an OAuth consent screen for authenticated users.
 sdk: astro, nextjs, nuxt, react, react-router, tanstack-react-start, vue, js-frontend
 ---
 
-The `<OAuthConsent />` component renders an OAuth consent screen for a signed-in user on an OAuth authorize redirect page. It loads the OAuth application's consent metadata and displays the requested scopes so the user can allow or deny access.
+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 you need to render the component on a custom route.
+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.
 
 > [!IMPORTANT]
-> `<OAuthConsent />` only renders for signed-in users. If the user is signed out, Clerk won't render the component.
+> `<OAuthConsent />` only renders for authenticated users. If the user is signed out, the component will not be displayed.
 
 ## Example
 
@@ -196,14 +196,14 @@ All props are optional.
   - `appearance?`
   - <code>[Appearance](/docs/guides/customizing-clerk/appearance-prop/overview) | undefined</code>
 
-  An object to style your components. This only affects Clerk components and not your application UI outside Clerk.
+  An object to style your components. Will only affect [Clerk components](/docs/reference/components/overview) and not [Account Portal](/docs/guides/account-portal/overview) pages.
 
   ---
 
   - `fallback?`
   - `ReactNode`
 
-  An element to render while the component is mounting.
+  An element to be rendered while the component is mounting.
 
   ---
 
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 342e94b26c..87cf9172da 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -1,10 +1,10 @@
 ---
 title: useOAuthConsent()
-description: Load OAuth consent metadata for a signed-in user with Clerk's useOAuthConsent() hook.
+description: Load OAuth consent metadata for an authenticated user with Clerk's useOAuthConsent() hook.
 sdk: nextjs, react, react-router, tanstack-react-start
 ---
 
-The `useOAuthConsent()` hook loads OAuth consent metadata for a signed-in user. You can use it to build a custom OAuth consent page that fetches the OAuth application's name, logo, URL, requested scopes, and related loading state.
+The `useOAuthConsent()` hook loads OAuth consent metadata for an authenticated user. You can use it to build a custom OAuth consent page that fetches the OAuth application's name, logo, URL, requested scopes, and related loading state.
 
 Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component, this hook doesn't read values from the current URL. Pass the `oauthClientId` explicitly, and optionally pass `scope` if you want Clerk to scope the request to a specific space-delimited scope string.
 

From 99cae19979a68857ef735a337ff312553e3e5fbb Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 4 May 2026 11:14:56 -0700
Subject: [PATCH 06/21] Fix hook parameter description

---
 docs/reference/hooks/use-oauth-consent.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 87cf9172da..fe70726f1b 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -10,7 +10,7 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 ## Parameters
 
-`useOAuthConsent()` accepts a single optional object with the following properties:
+`useOAuthConsent()` accepts a single object with the following properties:
 
 <Properties>
   - `oauthClientId`

From 1773cf869077810f7b4cffbdd56bfbd944d51b25 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 4 May 2026 11:20:31 -0700
Subject: [PATCH 07/21] Specify optional properties

---
 docs/reference/hooks/use-oauth-consent.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index fe70726f1b..5749a56cb9 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -21,21 +21,21 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
   ---
 
   - `scope`
-  - `string`
+  - `string?`
 
   An optional space-delimited scope string from the authorize request.
 
   ---
 
   - `enabled`
-  - `boolean`
+  - `boolean?`
 
   If `true`, a request will be triggered when the hook is mounted and the user is signed in. Defaults to `true`.
 
   ---
 
   - `keepPreviousData`
-  - `boolean`
+  - `boolean?`
 
   If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `true`.
 </Properties>

From eec21824e443a2b4352f0cff318cbb7f8a1dc535 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 4 May 2026 12:22:20 -0600
Subject: [PATCH 08/21] Fix props

---
 docs/reference/hooks/use-oauth-consent.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 5749a56cb9..abf76e4692 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -20,22 +20,22 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
   ---
 
-  - `scope`
-  - `string?`
+  - `scope?`
+  - `string`
 
-  An optional space-delimited scope string from the authorize request.
+  A space-delimited scope string from the authorize request.
 
   ---
 
-  - `enabled`
-  - `boolean?`
+  - `enabled?`
+  - `boolean`
 
   If `true`, a request will be triggered when the hook is mounted and the user is signed in. Defaults to `true`.
 
   ---
 
   - `keepPreviousData`
-  - `boolean?`
+  - `boolean`
 
   If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `true`.
 </Properties>

From f34c8f978bec8484e0f8a36e0bb8d0cba469bd5b Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 4 May 2026 12:34:29 -0600
Subject: [PATCH 09/21] Missing optional

---
 docs/reference/hooks/use-oauth-consent.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index abf76e4692..17761e3847 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -34,7 +34,7 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
   ---
 
-  - `keepPreviousData`
+  - `keepPreviousData?`
   - `boolean`
 
   If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `true`.

From 2376a656530e7121834fdd7b2769d35662772bf6 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 4 May 2026 12:43:36 -0600
Subject: [PATCH 10/21] Make filenames consistent

---
 docs/reference/components/authentication/oauth-consent.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index 35bcdf2d0a..fecfc65772 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -61,7 +61,7 @@ The following example demonstrates how to render `<OAuthConsent />` on a dedicat
 </If>
 
 <If sdk="astro">
-  ```astro {{ filename: 'src/pages/oauth-consent.astro' }}
+  ```astro {{ filename: 'pages/oauth-consent.astro' }}
   ---
   import { OAuthConsent } from '@clerk/astro/components'
   ---
@@ -83,7 +83,7 @@ The following example demonstrates how to render `<OAuthConsent />` on a dedicat
 </If>
 
 <If sdk="nuxt">
-  ```vue {{ filename: 'pages/oauth-consent.vue' }}
+  ```vue {{ filename: 'oauth-consent.vue' }}
   <script setup lang="ts">
   // Components are automatically imported
   </script>

From 3f560dbd4a917667f5ec7d954a8692e4c717f31c Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 4 May 2026 12:57:37 -0600
Subject: [PATCH 11/21] docs review pt 2

---
 docs/reference/components/authentication/oauth-consent.mdx | 2 +-
 docs/reference/hooks/use-oauth-consent.mdx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index fecfc65772..d6d169fa4c 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -13,7 +13,7 @@ By default, `<OAuthConsent />` reads the OAuth `client_id`, `scope`, and `redire
 
 ## Example
 
-The following example demonstrates how to render `<OAuthConsent />` on a dedicated consent page.
+The following example includes a basic implementation of the `<OAuthConsent />` component. You can use this as a starting point for your own implementation.
 
 <If sdk="nextjs">
   ```tsx {{ filename: 'app/oauth-consent/page.tsx' }}
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 17761e3847..5b0c2cf44d 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -72,7 +72,7 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 ## Example
 
-The following examples demonstrate how to fetch OAuth consent metadata and build a custom consent form. In each example, the `client_id` is read from the current URL and passed to `useOAuthConsent()`, and the form submits to the URL returned by `clerk.oauthApplication.buildConsentActionUrl()`.
+The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by `clerk.oauthApplication.buildConsentActionUrl()`.
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}

From 8055401a2ec0049617cf02831d953984fad976ee Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Tue, 5 May 2026 14:24:43 -0700
Subject: [PATCH 12/21] chore: add OAuthApplicatioNamespace docs

---
 docs/manifest.json                           |   4 +
 docs/reference/hooks/use-oauth-consent.mdx   |   2 +-
 docs/reference/objects/clerk.mdx             |   9 +
 docs/reference/objects/oauth-application.mdx | 239 +++++++++++++++++++
 docs/reference/objects/overview.mdx          |   4 +
 5 files changed, 257 insertions(+), 1 deletion(-)
 create mode 100644 docs/reference/objects/oauth-application.mdx

diff --git a/docs/manifest.json b/docs/manifest.json
index 5fc677daf5..e1e3c13624 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2444,6 +2444,10 @@
                           "href": "/docs/reference/objects/api-keys",
                           "tag": "(Beta)"
                         },
+                        {
+                          "title": "`OAuthApplication`",
+                          "href": "/docs/reference/objects/oauth-application"
+                        },
                         {
                           "title": "`Billing`",
                           "href": "/docs/reference/objects/billing",
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 5b0c2cf44d..31899275e7 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -72,7 +72,7 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 ## Example
 
-The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by `clerk.oauthApplication.buildConsentActionUrl()`.
+The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by [`clerk.oauthApplication.buildConsentActionUrl()`](/docs/reference/objects/oauth-application#build-consent-action-url).
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
diff --git a/docs/reference/objects/clerk.mdx b/docs/reference/objects/clerk.mdx
index 8bf3f82f75..9935203879 100644
--- a/docs/reference/objects/clerk.mdx
+++ b/docs/reference/objects/clerk.mdx
@@ -115,6 +115,13 @@ The `Clerk` class serves as the central interface for working with Clerk's authe
 
   ---
 
+  - `oauthApplication`
+  - [`OAuthApplication`][oauth-application-ref]
+
+  The `OAuthApplication` object used for building custom OAuth consent flows.
+
+  ---
+
   - `proxyUrl`
   - `string | undefined`
 
@@ -1478,4 +1485,6 @@ The `Clerk` class also contains a number of methods for interacting with prebuil
 
 [api-ref]: /docs/reference/objects/api-keys
 
+[oauth-application-ref]: /docs/reference/objects/oauth-application
+
 [billing-ref]: /docs/reference/objects/billing
diff --git a/docs/reference/objects/oauth-application.mdx b/docs/reference/objects/oauth-application.mdx
new file mode 100644
index 0000000000..544836aa49
--- /dev/null
+++ b/docs/reference/objects/oauth-application.mdx
@@ -0,0 +1,239 @@
+---
+title: '`OAuthApplication` object'
+description: The OAuthApplication object provides helpers for building custom OAuth consent flows in Clerk.
+sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
+---
+
+The `OAuthApplication` object provides helpers for building custom OAuth consent flows in Clerk. It is available on the [`Clerk`](/docs/reference/objects/clerk) object as `clerk.oauthApplication`.
+
+Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook or the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component when you need to render a custom consent page for an OAuth application.
+
+## Example
+
+<If sdk="js-frontend">
+  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object.
+
+  ```js {{ filename: 'src/main.js' }}
+  import { Clerk } from '@clerk/clerk-js'
+
+  const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+  const clerk = new Clerk(publishableKey)
+  await clerk.load()
+
+  const oauthApplication = clerk.oauthApplication
+  ```
+</If>
+
+<If notSdk={["js-frontend", "astro", "vue", "nuxt"]}>
+  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`useClerk()`](/docs/reference/hooks/use-clerk) hook to access the `clerk` object, as shown in the following example.
+
+  <If sdk="react">
+    ```tsx {{ filename: 'src/pages/Example.tsx' }}
+    import { useClerk } from '@clerk/react'
+
+    export default function Example() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+  </If>
+
+  <If sdk="nextjs">
+    ```tsx {{ filename: 'app/page.tsx' }}
+    'use client'
+
+    import { useClerk } from '@clerk/nextjs'
+
+    export default function Page() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+  </If>
+
+  <If sdk="react-router">
+    ```tsx {{ filename: 'app/routes/home.tsx' }}
+    import { useClerk } from '@clerk/react-router'
+
+    export default function Home() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+  </If>
+
+  <If sdk="chrome-extension">
+    ```tsx {{ filename: 'src/routes/page.tsx' }}
+    import { useClerk } from '@clerk/chrome-extension'
+
+    export default function Home() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+  </If>
+
+  <If sdk="tanstack-react-start">
+    ```tsx {{ filename: 'app/routes/index.tsx' }}
+    import { useClerk } from '@clerk/tanstack-react-start'
+    import { createFileRoute } from '@tanstack/react-router'
+
+    export const Route = createFileRoute('/')({
+      component: Home,
+    })
+
+    export default function Home() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+  </If>
+
+  <If sdk="expo">
+    ```tsx {{ filename: 'app/(clerk)/index.tsx' }}
+    import { useClerk } from '@clerk/expo'
+    import { Text, View } from 'react-native'
+
+    export default function Page() {
+      const clerk = useClerk()
+      const oauthApplication = clerk.oauthApplication
+
+      return (
+        <View>
+          <Text style={{ whiteSpace: 'pre' }}>{JSON.stringify(oauthApplication, null, 2)}</Text>
+        </View>
+      )
+    }
+    ```
+  </If>
+</If>
+
+<If sdk="astro">
+  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`$clerkStore`](/docs/reference/astro/client-side-helpers/clerk-store) to access the `Clerk` object, as shown in the following example.
+
+  <CodeBlockTabs options={['React', 'Vue', 'Svelte']}>
+    ```tsx {{ filename: 'components/oauth-application.tsx' }}
+    import { useStore } from '@nanostores/react'
+    import { $clerkStore } from '@clerk/astro/client'
+
+    export default function Client() {
+      const clerk = useStore($clerkStore)
+      const oauthApplication = clerk.oauthApplication
+
+      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    }
+    ```
+
+    ```vue {{ filename: 'components/oauth-application.vue' }}
+    <script setup>
+    import { useStore } from '@nanostores/vue'
+    import { $clerkStore } from '@clerk/astro/client'
+
+    const clerk = useStore($clerkStore)
+    const oauthApplication = clerk.value.oauthApplication
+    </script>
+
+    <template>
+      <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    </template>
+    ```
+
+    ```svelte {{ filename: 'components/oauth-application.svelte' }}
+    <script>
+      import { $clerkStore as clerk } from '@clerk/astro/client'
+    </script>
+
+    const oauthApplication = $clerk.oauthApplication
+
+    <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+    ```
+  </CodeBlockTabs>
+</If>
+
+<If sdk={["vue", "nuxt"]}>
+  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`useClerk()`](/docs/reference/composables/use-clerk) composable to access the `clerk` object, as shown in the following example.
+
+  ```vue {{ filename: 'oauth-application.vue' }}
+  <script setup>
+  import { useClerk } from '@clerk/vue'
+
+  const clerk = useClerk()
+  const oauthApplication = clerk.oauthApplication
+  </script>
+
+  <template>
+    <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
+  </template>
+  ```
+</If>
+
+## Methods
+
+### `buildConsentActionUrl()`
+
+Returns the URL to use as the `action` attribute of your consent form. Clerk includes the current session context automatically, including `_clerk_session_id` and, in development, the dev browser JWT.
+
+```typescript
+function buildConsentActionUrl(params: { clientId: string }): string
+```
+
+#### Parameters
+
+<Properties>
+  - `clientId`
+  - `string`
+
+  The OAuth `client_id` from the authorize request.
+</Properties>
+
+#### Example
+
+```tsx
+const actionUrl = clerk.oauthApplication.buildConsentActionUrl({
+  clientId,
+})
+```
+
+### `getConsentInfo()`
+
+Loads the consent metadata for a signed-in user and OAuth application. Use this when you want to build your own consent UI without the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook.
+
+```typescript
+function getConsentInfo(params: { oauthClientId: string; scope?: string }): Promise<OAuthConsentInfo>
+```
+
+#### Parameters
+
+<Properties>
+  - `oauthClientId`
+  - `string`
+
+  The OAuth `client_id` from the authorize request.
+
+  ---
+
+  - `scope?`
+  - `string`
+
+  A space-delimited scope string from the authorize request.
+</Properties>
+
+#### Example
+
+```tsx
+const consentInfo = await clerk.oauthApplication.getConsentInfo({
+  oauthClientId: clientId,
+  scope,
+})
+```
diff --git a/docs/reference/objects/overview.mdx b/docs/reference/objects/overview.mdx
index 142e15ddf6..ddaad070b5 100644
--- a/docs/reference/objects/overview.mdx
+++ b/docs/reference/objects/overview.mdx
@@ -56,6 +56,10 @@ Organizations are a flexible and scalable way to manage users and their access t
 
 The [`APIKeys`](/docs/reference/objects/api-keys) object provides methods for managing API keys that allow your application's users to grant third-party services programmatic access to your application's API endpoints on their behalf. API keys are long-lived, [opaque tokens](!opaque-token) that can be instantly revoked.
 
+## `OAuthApplication`
+
+The [`OAuthApplication`](/docs/reference/objects/oauth-application) object provides helpers for building custom OAuth consent flows, including loading consent metadata and generating the consent form action URL.
+
 ## `Billing`
 
 The [`Billing`](/docs/reference/objects/billing) object provides methods for managing billing for a user or organization. It allows you to retrieve billing plans, payment attempts, and manage Subscriptions.

From ea38cbe5fbce1447a2d6f1e4969ef714a44dedc7 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Tue, 5 May 2026 13:46:00 -0600
Subject: [PATCH 13/21] Change to Typedoc

---
 docs/manifest.json                           |  8 +++
 docs/reference/hooks/use-oauth-consent.mdx   | 58 +-------------------
 docs/reference/objects/oauth-application.mdx | 37 +++++++++++--
 docs/reference/types/oauth-consent-info.mdx  |  7 +++
 docs/reference/types/oauth-consent-scope.mdx |  7 +++
 5 files changed, 58 insertions(+), 59 deletions(-)
 create mode 100644 docs/reference/types/oauth-consent-info.mdx
 create mode 100644 docs/reference/types/oauth-consent-scope.mdx

diff --git a/docs/manifest.json b/docs/manifest.json
index e1e3c13624..b930c2296f 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2608,6 +2608,14 @@
                           "title": "Metadata types",
                           "href": "/docs/reference/types/metadata"
                         },
+                        {
+                          "title": "`OAuthConsentInfo`",
+                          "href": "/docs/reference/types/oauth-consent-info"
+                        },
+                        {
+                          "title": "`OAuthConsentScope`",
+                          "href": "/docs/reference/types/oauth-consent-scope"
+                        },
                         {
                           "title": "`OrganizationCreationDefaults`",
                           "href": "/docs/reference/types/organization-creation-defaults"
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 31899275e7..9f4912c19b 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -12,67 +12,15 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 `useOAuthConsent()` accepts a single object with the following properties:
 
-<Properties>
-  - `oauthClientId`
-  - `string`
-
-  The OAuth `client_id` from the authorize request. The hook is disabled when this value is empty or omitted.
-
-  ---
-
-  - `scope?`
-  - `string`
-
-  A space-delimited scope string from the authorize request.
-
-  ---
-
-  - `enabled?`
-  - `boolean`
-
-  If `true`, a request will be triggered when the hook is mounted and the user is signed in. Defaults to `true`.
-
-  ---
-
-  - `keepPreviousData?`
-  - `boolean`
-
-  If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `true`.
-</Properties>
+<Typedoc src="shared/use-o-auth-consent-params" />
 
 ## Returns
 
-<Properties>
-  - `data`
-  - `OAuthConsentInfo | undefined`
-
-  The OAuth consent screen metadata returned by Clerk, or `undefined` before the first successful fetch.
-
-  ---
-
-  - `error`
-  - `ClerkAPIResponseError | null`
-
-  Any error that occurred during the data fetch, or `null` if no error occurred.
-
-  ---
-
-  - `isLoading`
-  - `boolean`
-
-  Whether the initial consent metadata fetch is still in progress.
-
-  ---
-
-  - `isFetching`
-  - `boolean`
-
-  Whether any request is still in flight, including background updates.
-</Properties>
+<Typedoc src="shared/use-o-auth-consent-return" />
 
 ## Example
 
-The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by [`clerk.oauthApplication.buildConsentActionUrl()`](/docs/reference/objects/oauth-application#build-consent-action-url).
+The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by the `buildConsentActionUrl()` method available on the [`OAuthApplication`](/docs/reference/objects/oauth-application) object.
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
diff --git a/docs/reference/objects/oauth-application.mdx b/docs/reference/objects/oauth-application.mdx
index 544836aa49..642ee54b6c 100644
--- a/docs/reference/objects/oauth-application.mdx
+++ b/docs/reference/objects/oauth-application.mdx
@@ -4,7 +4,7 @@ description: The OAuthApplication object provides helpers for building custom OA
 sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
 ---
 
-The `OAuthApplication` object provides helpers for building custom OAuth consent flows in Clerk. It is available on the [`Clerk`](/docs/reference/objects/clerk) object as `clerk.oauthApplication`.
+The `OAuthApplication` object provides helpers for building custom OAuth consent flows in Clerk.
 
 Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook or the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component when you need to render a custom consent page for an OAuth application.
 
@@ -18,9 +18,13 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
 
   const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
+  // Initialize Clerk with your Clerk Publishable Key
   const clerk = new Clerk(publishableKey)
+
+  // Load Clerk
   await clerk.load()
 
+  // Access the OAuthApplication object
   const oauthApplication = clerk.oauthApplication
   ```
 </If>
@@ -33,7 +37,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { useClerk } from '@clerk/react'
 
     export default function Example() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -48,7 +55,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { useClerk } from '@clerk/nextjs'
 
     export default function Page() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -61,7 +71,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { useClerk } from '@clerk/react-router'
 
     export default function Home() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -74,7 +87,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { useClerk } from '@clerk/chrome-extension'
 
     export default function Home() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -92,7 +108,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     })
 
     export default function Home() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -106,7 +125,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { Text, View } from 'react-native'
 
     export default function Page() {
+      // Use the useClerk hook to access the clerk object
       const clerk = useClerk()
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return (
@@ -128,7 +150,10 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
     import { $clerkStore } from '@clerk/astro/client'
 
     export default function Client() {
+      // Use the $clerkStore to access the Clerk object
       const clerk = useStore($clerkStore)
+
+      // Access the OAuthApplication object
       const oauthApplication = clerk.oauthApplication
 
       return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
@@ -151,6 +176,8 @@ Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/us
 
     ```svelte {{ filename: 'components/oauth-application.svelte' }}
     <script>
+      // The $ prefix is reserved in Svelte for its own reactivity system.
+      // Alias the imports to avoid conflicts.
       import { $clerkStore as clerk } from '@clerk/astro/client'
     </script>
 
@@ -207,13 +234,15 @@ const actionUrl = clerk.oauthApplication.buildConsentActionUrl({
 
 ### `getConsentInfo()`
 
-Loads the consent metadata for a signed-in user and OAuth application. Use this when you want to build your own consent UI without the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook.
+Loads the consent metadata for a signed-in user and OAuth application. Returns a [`OAuthConsentInfo`](/docs/reference/types/oauth-consent-info) object.
+
+Use this method when you want to build your own consent UI without the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook.
 
 ```typescript
-function getConsentInfo(params: { oauthClientId: string; scope?: string }): Promise<OAuthConsentInfo>
+function getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo>
 ```
 
-#### Parameters
+#### `GetOAuthConsentInfoParams`
 
 <Properties>
   - `oauthClientId`
diff --git a/docs/reference/types/oauth-consent-info.mdx b/docs/reference/types/oauth-consent-info.mdx
new file mode 100644
index 0000000000..31cb85498a
--- /dev/null
+++ b/docs/reference/types/oauth-consent-info.mdx
@@ -0,0 +1,7 @@
+---
+title: '`OAuthConsentInfo`'
+description: An interface representing OAuth consent information.
+sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
+---
+
+<Typedoc src="shared/o-auth-consent-info" />
diff --git a/docs/reference/types/oauth-consent-scope.mdx b/docs/reference/types/oauth-consent-scope.mdx
new file mode 100644
index 0000000000..b1c313f1f2
--- /dev/null
+++ b/docs/reference/types/oauth-consent-scope.mdx
@@ -0,0 +1,7 @@
+---
+title: '`OAuthConsentScope`'
+description: An interface representing a single OAuth scope with its description and whether it requires consent.
+sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
+---
+
+<Typedoc src="shared/o-auth-consent-scope" />

From 1a27d2f584da27e0104065d791c75b32e7bca6f5 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Wed, 6 May 2026 12:48:07 -0700
Subject: [PATCH 14/21] small nits

---
 docs/manifest.json                                        | 8 ++++----
 .../reference/components/authentication/oauth-consent.mdx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/manifest.json b/docs/manifest.json
index b930c2296f..a8bdc1494b 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2435,6 +2435,10 @@
                           "title": "`SignUpFuture`",
                           "href": "/docs/reference/objects/sign-up-future"
                         },
+                        {
+                          "title": "`OAuthApplication`",
+                          "href": "/docs/reference/objects/oauth-application"
+                        },
                         {
                           "title": "`Organization`",
                           "href": "/docs/reference/objects/organization"
@@ -2444,10 +2448,6 @@
                           "href": "/docs/reference/objects/api-keys",
                           "tag": "(Beta)"
                         },
-                        {
-                          "title": "`OAuthApplication`",
-                          "href": "/docs/reference/objects/oauth-application"
-                        },
                         {
                           "title": "`Billing`",
                           "href": "/docs/reference/objects/billing",
diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index d6d169fa4c..e56a32caba 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -118,14 +118,14 @@ The following example includes a basic implementation of the `<OAuthConsent />`
     - `node`
     - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
 
-    The container `<div>` element used to render the `<OAuthConsent />` component
+    The container `<div>` element used to render the `<OAuthConsent />` component.
 
     ---
 
     - `props?`
     - [`OAuthConsentProps`](#properties)
 
-    The properties to pass to the `<OAuthConsent />` component
+    The properties to pass to the `<OAuthConsent />` component.
   </Properties>
 
   #### `mountOAuthConsent()` usage
@@ -161,7 +161,7 @@ The following example includes a basic implementation of the `<OAuthConsent />`
     - `node`
     - [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
 
-    The container `<div>` element with a rendered `<OAuthConsent />` component instance
+    The container `<div>` element with a rendered `<OAuthConsent />` component instance.
   </Properties>
 
   #### `unmountOAuthConsent()` usage

From aec79db77301be59aa2d49db8c2cea815a33da79 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Thu, 7 May 2026 10:25:04 -0600
Subject: [PATCH 15/21] Make OAuthApplication a type

---
 docs/manifest.json                           |   8 +-
 docs/reference/hooks/use-oauth-consent.mdx   |   2 +-
 docs/reference/objects/clerk.mdx             |   9 -
 docs/reference/objects/oauth-application.mdx | 268 -------------------
 docs/reference/objects/overview.mdx          |   4 -
 docs/reference/types/oauth-application.mdx   |  71 +++++
 6 files changed, 76 insertions(+), 286 deletions(-)
 delete mode 100644 docs/reference/objects/oauth-application.mdx
 create mode 100644 docs/reference/types/oauth-application.mdx

diff --git a/docs/manifest.json b/docs/manifest.json
index a8bdc1494b..e223ce03d7 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2435,10 +2435,6 @@
                           "title": "`SignUpFuture`",
                           "href": "/docs/reference/objects/sign-up-future"
                         },
-                        {
-                          "title": "`OAuthApplication`",
-                          "href": "/docs/reference/objects/oauth-application"
-                        },
                         {
                           "title": "`Organization`",
                           "href": "/docs/reference/objects/organization"
@@ -2608,6 +2604,10 @@
                           "title": "Metadata types",
                           "href": "/docs/reference/types/metadata"
                         },
+                        {
+                          "title": "`OAuthApplication`",
+                          "href": "/docs/reference/types/oauth-application"
+                        },
                         {
                           "title": "`OAuthConsentInfo`",
                           "href": "/docs/reference/types/oauth-consent-info"
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 9f4912c19b..582b04440b 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -20,7 +20,7 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 ## Example
 
-The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by the `buildConsentActionUrl()` method available on the [`OAuthApplication`](/docs/reference/objects/oauth-application) object.
+The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by the [`buildConsentActionUrl()`](/docs/reference/types/oauth-application) method.
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
diff --git a/docs/reference/objects/clerk.mdx b/docs/reference/objects/clerk.mdx
index 9935203879..8bf3f82f75 100644
--- a/docs/reference/objects/clerk.mdx
+++ b/docs/reference/objects/clerk.mdx
@@ -115,13 +115,6 @@ The `Clerk` class serves as the central interface for working with Clerk's authe
 
   ---
 
-  - `oauthApplication`
-  - [`OAuthApplication`][oauth-application-ref]
-
-  The `OAuthApplication` object used for building custom OAuth consent flows.
-
-  ---
-
   - `proxyUrl`
   - `string | undefined`
 
@@ -1485,6 +1478,4 @@ The `Clerk` class also contains a number of methods for interacting with prebuil
 
 [api-ref]: /docs/reference/objects/api-keys
 
-[oauth-application-ref]: /docs/reference/objects/oauth-application
-
 [billing-ref]: /docs/reference/objects/billing
diff --git a/docs/reference/objects/oauth-application.mdx b/docs/reference/objects/oauth-application.mdx
deleted file mode 100644
index 642ee54b6c..0000000000
--- a/docs/reference/objects/oauth-application.mdx
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: '`OAuthApplication` object'
-description: The OAuthApplication object provides helpers for building custom OAuth consent flows in Clerk.
-sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
----
-
-The `OAuthApplication` object provides helpers for building custom OAuth consent flows in Clerk.
-
-Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook or the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component when you need to render a custom consent page for an OAuth application.
-
-## Example
-
-<If sdk="js-frontend">
-  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object.
-
-  ```js {{ filename: 'src/main.js' }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-  // Initialize Clerk with your Clerk Publishable Key
-  const clerk = new Clerk(publishableKey)
-
-  // Load Clerk
-  await clerk.load()
-
-  // Access the OAuthApplication object
-  const oauthApplication = clerk.oauthApplication
-  ```
-</If>
-
-<If notSdk={["js-frontend", "astro", "vue", "nuxt"]}>
-  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`useClerk()`](/docs/reference/hooks/use-clerk) hook to access the `clerk` object, as shown in the following example.
-
-  <If sdk="react">
-    ```tsx {{ filename: 'src/pages/Example.tsx' }}
-    import { useClerk } from '@clerk/react'
-
-    export default function Example() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-  </If>
-
-  <If sdk="nextjs">
-    ```tsx {{ filename: 'app/page.tsx' }}
-    'use client'
-
-    import { useClerk } from '@clerk/nextjs'
-
-    export default function Page() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-  </If>
-
-  <If sdk="react-router">
-    ```tsx {{ filename: 'app/routes/home.tsx' }}
-    import { useClerk } from '@clerk/react-router'
-
-    export default function Home() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-  </If>
-
-  <If sdk="chrome-extension">
-    ```tsx {{ filename: 'src/routes/page.tsx' }}
-    import { useClerk } from '@clerk/chrome-extension'
-
-    export default function Home() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-  </If>
-
-  <If sdk="tanstack-react-start">
-    ```tsx {{ filename: 'app/routes/index.tsx' }}
-    import { useClerk } from '@clerk/tanstack-react-start'
-    import { createFileRoute } from '@tanstack/react-router'
-
-    export const Route = createFileRoute('/')({
-      component: Home,
-    })
-
-    export default function Home() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-  </If>
-
-  <If sdk="expo">
-    ```tsx {{ filename: 'app/(clerk)/index.tsx' }}
-    import { useClerk } from '@clerk/expo'
-    import { Text, View } from 'react-native'
-
-    export default function Page() {
-      // Use the useClerk hook to access the clerk object
-      const clerk = useClerk()
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return (
-        <View>
-          <Text style={{ whiteSpace: 'pre' }}>{JSON.stringify(oauthApplication, null, 2)}</Text>
-        </View>
-      )
-    }
-    ```
-  </If>
-</If>
-
-<If sdk="astro">
-  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`$clerkStore`](/docs/reference/astro/client-side-helpers/clerk-store) to access the `Clerk` object, as shown in the following example.
-
-  <CodeBlockTabs options={['React', 'Vue', 'Svelte']}>
-    ```tsx {{ filename: 'components/oauth-application.tsx' }}
-    import { useStore } from '@nanostores/react'
-    import { $clerkStore } from '@clerk/astro/client'
-
-    export default function Client() {
-      // Use the $clerkStore to access the Clerk object
-      const clerk = useStore($clerkStore)
-
-      // Access the OAuthApplication object
-      const oauthApplication = clerk.oauthApplication
-
-      return <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    }
-    ```
-
-    ```vue {{ filename: 'components/oauth-application.vue' }}
-    <script setup>
-    import { useStore } from '@nanostores/vue'
-    import { $clerkStore } from '@clerk/astro/client'
-
-    const clerk = useStore($clerkStore)
-    const oauthApplication = clerk.value.oauthApplication
-    </script>
-
-    <template>
-      <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    </template>
-    ```
-
-    ```svelte {{ filename: 'components/oauth-application.svelte' }}
-    <script>
-      // The $ prefix is reserved in Svelte for its own reactivity system.
-      // Alias the imports to avoid conflicts.
-      import { $clerkStore as clerk } from '@clerk/astro/client'
-    </script>
-
-    const oauthApplication = $clerk.oauthApplication
-
-    <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-    ```
-  </CodeBlockTabs>
-</If>
-
-<If sdk={["vue", "nuxt"]}>
-  The `OAuthApplication` object is available on the [`Clerk`](/docs/reference/objects/clerk) object. Use the [`useClerk()`](/docs/reference/composables/use-clerk) composable to access the `clerk` object, as shown in the following example.
-
-  ```vue {{ filename: 'oauth-application.vue' }}
-  <script setup>
-  import { useClerk } from '@clerk/vue'
-
-  const clerk = useClerk()
-  const oauthApplication = clerk.oauthApplication
-  </script>
-
-  <template>
-    <pre>{JSON.stringify(oauthApplication, null, 2)}</pre>
-  </template>
-  ```
-</If>
-
-## Methods
-
-### `buildConsentActionUrl()`
-
-Returns the URL to use as the `action` attribute of your consent form. Clerk includes the current session context automatically, including `_clerk_session_id` and, in development, the dev browser JWT.
-
-```typescript
-function buildConsentActionUrl(params: { clientId: string }): string
-```
-
-#### Parameters
-
-<Properties>
-  - `clientId`
-  - `string`
-
-  The OAuth `client_id` from the authorize request.
-</Properties>
-
-#### Example
-
-```tsx
-const actionUrl = clerk.oauthApplication.buildConsentActionUrl({
-  clientId,
-})
-```
-
-### `getConsentInfo()`
-
-Loads the consent metadata for a signed-in user and OAuth application. Returns a [`OAuthConsentInfo`](/docs/reference/types/oauth-consent-info) object.
-
-Use this method when you want to build your own consent UI without the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook.
-
-```typescript
-function getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo>
-```
-
-#### `GetOAuthConsentInfoParams`
-
-<Properties>
-  - `oauthClientId`
-  - `string`
-
-  The OAuth `client_id` from the authorize request.
-
-  ---
-
-  - `scope?`
-  - `string`
-
-  A space-delimited scope string from the authorize request.
-</Properties>
-
-#### Example
-
-```tsx
-const consentInfo = await clerk.oauthApplication.getConsentInfo({
-  oauthClientId: clientId,
-  scope,
-})
-```
diff --git a/docs/reference/objects/overview.mdx b/docs/reference/objects/overview.mdx
index ddaad070b5..142e15ddf6 100644
--- a/docs/reference/objects/overview.mdx
+++ b/docs/reference/objects/overview.mdx
@@ -56,10 +56,6 @@ Organizations are a flexible and scalable way to manage users and their access t
 
 The [`APIKeys`](/docs/reference/objects/api-keys) object provides methods for managing API keys that allow your application's users to grant third-party services programmatic access to your application's API endpoints on their behalf. API keys are long-lived, [opaque tokens](!opaque-token) that can be instantly revoked.
 
-## `OAuthApplication`
-
-The [`OAuthApplication`](/docs/reference/objects/oauth-application) object provides helpers for building custom OAuth consent flows, including loading consent metadata and generating the consent form action URL.
-
 ## `Billing`
 
 The [`Billing`](/docs/reference/objects/billing) object provides methods for managing billing for a user or organization. It allows you to retrieve billing plans, payment attempts, and manage Subscriptions.
diff --git a/docs/reference/types/oauth-application.mdx b/docs/reference/types/oauth-application.mdx
new file mode 100644
index 0000000000..1c8dbaaadd
--- /dev/null
+++ b/docs/reference/types/oauth-application.mdx
@@ -0,0 +1,71 @@
+---
+title: '`OAuthApplication`'
+description: The OAuthApplication object provides helpers for building custom OAuth consent flows in Clerk.
+sdk: js-frontend, astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start, nuxt, vue
+---
+
+The `OAuthApplication` object provides helpers for building custom OAuth consent flows in Clerk.
+
+Use this object together with the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook or the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-consent) component when you need to render a custom consent page for an OAuth application.
+
+## Methods
+
+### `buildConsentActionUrl()`
+
+Returns the URL to use as the `action` attribute of your consent form. Clerk includes the current session context automatically, including `_clerk_session_id` and, in development, the dev browser JWT.
+
+```typescript
+function buildConsentActionUrl(params: { clientId: string }): string
+```
+
+#### Parameters
+
+<Properties>
+  - `clientId`
+  - `string`
+
+  The OAuth `client_id` from the authorize request.
+</Properties>
+
+#### Example
+
+```tsx
+const actionUrl = clerk.oauthApplication.buildConsentActionUrl({
+  clientId,
+})
+```
+
+### `getConsentInfo()`
+
+Loads the consent metadata for a signed-in user and OAuth application. Returns a [`OAuthConsentInfo`](/docs/reference/types/oauth-consent-info) object.
+
+Use this method when you want to build your own consent UI without the [`useOAuthConsent()`](/docs/reference/hooks/use-oauth-consent) hook.
+
+```typescript
+function getConsentInfo(params: GetOAuthConsentInfoParams): Promise<OAuthConsentInfo>
+```
+
+#### `GetOAuthConsentInfoParams`
+
+<Properties>
+  - `oauthClientId`
+  - `string`
+
+  The OAuth `client_id` from the authorize request.
+
+  ---
+
+  - `scope?`
+  - `string`
+
+  A space-delimited scope string from the authorize request.
+</Properties>
+
+#### Example
+
+```tsx
+const consentInfo = await clerk.oauthApplication.getConsentInfo({
+  oauthClientId: clientId,
+  scope,
+})
+```

From 4c731f5cb2aef01da3e86052341da17c6f75bb50 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 8 May 2026 14:49:21 -0600
Subject: [PATCH 16/21] Remove typedoc ignore

---
 scripts/build-docs.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/scripts/build-docs.ts b/scripts/build-docs.ts
index d695ded7b0..7bdafc126c 100644
--- a/scripts/build-docs.ts
+++ b/scripts/build-docs.ts
@@ -197,11 +197,7 @@ async function main() {
         'guides/development/webhooks/inngest.mdx': ['doc-not-in-manifest'],
         'guides/development/webhooks/loops.mdx': ['doc-not-in-manifest'],
       },
-      typedoc: {
-        'shared/o-auth-application-namespace.mdx': ['link-doc-not-found'],
-        'shared/o-auth-consent-info.mdx': ['link-doc-not-found'],
-        'shared/use-o-auth-consent-return.mdx': ['link-doc-not-found'],
-      },
+      typedoc: {},
       partials: {},
       tooltips: {},
     },

From a0bee88e02b7fbcc1639c16a5a0c20bf1343e511 Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 8 May 2026 15:06:21 -0600
Subject: [PATCH 17/21] Add OAuthApplication back to Clerk object overview

---
 docs/reference/objects/clerk.mdx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/reference/objects/clerk.mdx b/docs/reference/objects/clerk.mdx
index 8bf3f82f75..64da97c705 100644
--- a/docs/reference/objects/clerk.mdx
+++ b/docs/reference/objects/clerk.mdx
@@ -115,6 +115,13 @@ The `Clerk` class serves as the central interface for working with Clerk's authe
 
   ---
 
+  - `oauthApplication`
+  - [`OAuthApplication`][oauth-application-ref]
+
+  The `OAuthApplication` object used for building custom OAuth consent flows.
+
+  ---
+
   - `proxyUrl`
   - `string | undefined`
 
@@ -1433,6 +1440,11 @@ The `Clerk` class also contains a number of methods for interacting with prebuil
 - [`mountOrganizationList`](/docs/reference/components/organization/organization-list#mount-organization-list)
 - [`unmountOrganizationList`](/docs/reference/components/organization/organization-list#unmount-organization-list)
 
+### `<OAuthConsent />`
+
+- [`mountOAuthConsent`](/docs/reference/components/organization/oauth-consent#mount-oauth-consent)
+- [`unmountOAuthConsent`](/docs/reference/components/organization/oauth-consent#unmount-oauth-consent)
+
 ### `<Waitlist />`
 
 - [`mountWaitlist()`](/docs/reference/components/authentication/waitlist#mount-waitlist)
@@ -1476,6 +1488,8 @@ The `Clerk` class also contains a number of methods for interacting with prebuil
 
 [organization-ref]: /docs/reference/objects/organization
 
+[oauth-application-ref]: /docs/reference/types/oauth-application
+
 [api-ref]: /docs/reference/objects/api-keys
 
 [billing-ref]: /docs/reference/objects/billing

From 5b1e699b9aaafd5cee2e74c87e7faa8850a40a8f Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Fri, 8 May 2026 15:11:55 -0600
Subject: [PATCH 18/21] Fix build

---
 docs/reference/objects/clerk.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference/objects/clerk.mdx b/docs/reference/objects/clerk.mdx
index 64da97c705..d8889848a3 100644
--- a/docs/reference/objects/clerk.mdx
+++ b/docs/reference/objects/clerk.mdx
@@ -1442,8 +1442,8 @@ The `Clerk` class also contains a number of methods for interacting with prebuil
 
 ### `<OAuthConsent />`
 
-- [`mountOAuthConsent`](/docs/reference/components/organization/oauth-consent#mount-oauth-consent)
-- [`unmountOAuthConsent`](/docs/reference/components/organization/oauth-consent#unmount-oauth-consent)
+- [`mountOAuthConsent`](/docs/reference/components/authentication/oauth-consent#mount-o-auth-consent)
+- [`unmountOAuthConsent`](/docs/reference/components/authentication/oauth-consent#unmount-o-auth-consent)
 
 ### `<Waitlist />`
 

From 5b7dccc6473886b7718adabf1d81ea945e6bf7a8 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 May 2026 15:38:21 -0700
Subject: [PATCH 19/21] Add shared partial for consent requirements

---
 docs/_partials/oauth-consent/callout.mdx      |  2 +
 .../authentication/oauth-consent.mdx          | 64 ++++++++++++++++++-
 docs/reference/hooks/use-oauth-consent.mdx    | 31 ++++++++-
 3 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 docs/_partials/oauth-consent/callout.mdx

diff --git a/docs/_partials/oauth-consent/callout.mdx b/docs/_partials/oauth-consent/callout.mdx
new file mode 100644
index 0000000000..2b9837fe96
--- /dev/null
+++ b/docs/_partials/oauth-consent/callout.mdx
@@ -0,0 +1,2 @@
+> [!WARNING]
+> Custom OAuth consent routes are not generally available yet and must be enabled for your Clerk instance. Pages that host OAuth consent must also set the referrer policy to `strict-origin-when-cross-origin` so the cross-origin POST to FAPI includes the `Origin` header and Clerk can validate the CSRF token.
diff --git a/docs/reference/components/authentication/oauth-consent.mdx b/docs/reference/components/authentication/oauth-consent.mdx
index e56a32caba..6741b2edd4 100644
--- a/docs/reference/components/authentication/oauth-consent.mdx
+++ b/docs/reference/components/authentication/oauth-consent.mdx
@@ -11,6 +11,8 @@ By default, `<OAuthConsent />` reads the OAuth `client_id`, `scope`, and `redire
 > [!IMPORTANT]
 > `<OAuthConsent />` only renders for authenticated users. If the user is signed out, the component will not be displayed.
 
+<Include src="_partials/oauth-consent/callout" />
+
 ## Example
 
 The following example includes a basic implementation of the `<OAuthConsent />` component. You can use this as a starting point for your own implementation.
@@ -19,6 +21,10 @@ The following example includes a basic implementation of the `<OAuthConsent />`
   ```tsx {{ filename: 'app/oauth-consent/page.tsx' }}
   import { OAuthConsent } from '@clerk/nextjs'
 
+  export const metadata: Metadata = {
+    referrer: 'strict-origin-when-cross-origin',
+  }
+
   export default function Page() {
     return <OAuthConsent />
   }
@@ -26,9 +32,16 @@ The following example includes a basic implementation of the `<OAuthConsent />`
 </If>
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
+  ```tsx {{ filename: 'src/routes/oauth-consent.tsx' }}
   import { OAuthConsent } from '@clerk/react'
 
+  export const meta = () => [
+    {
+      name: 'referrer',
+      content: 'strict-origin-when-cross-origin',
+    },
+  ]
+
   export default function OAuthConsentPage() {
     return <OAuthConsent />
   }
@@ -37,8 +50,16 @@ The following example includes a basic implementation of the `<OAuthConsent />`
 
 <If sdk="react-router">
   ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import type { Route } from './+types/oauth-consent'
   import { OAuthConsent } from '@clerk/react-router'
 
+  export const meta: Route.MetaFunction = () => [
+    {
+      name: 'referrer',
+      content: 'strict-origin-when-cross-origin',
+    },
+  ]
+
   export default function OAuthConsentPage() {
     return <OAuthConsent />
   }
@@ -51,6 +72,14 @@ The following example includes a basic implementation of the `<OAuthConsent />`
   import { createFileRoute } from '@tanstack/react-router'
 
   export const Route = createFileRoute('/oauth-consent')({
+    head: () => ({
+      meta: [
+        {
+          name: 'referrer',
+          content: 'strict-origin-when-cross-origin',
+        },
+      ],
+    }),
     component: OAuthConsentPage,
   })
 
@@ -66,7 +95,14 @@ The following example includes a basic implementation of the `<OAuthConsent />`
   import { OAuthConsent } from '@clerk/astro/components'
   ---
 
-  <OAuthConsent />
+  <html lang="en">
+    <head>
+      <meta name="referrer" content="strict-origin-when-cross-origin" />
+    </head>
+    <body>
+      <OAuthConsent />
+    </body>
+  </html>
   ```
 </If>
 
@@ -74,6 +110,16 @@ The following example includes a basic implementation of the `<OAuthConsent />`
   ```vue {{ filename: 'oauth-consent.vue' }}
   <script setup lang="ts">
   import { OAuthConsent } from '@clerk/vue'
+  import { useHead } from '@unhead/vue'
+
+  useHead({
+    meta: [
+      {
+        name: 'referrer',
+        content: 'strict-origin-when-cross-origin',
+      },
+    ],
+  })
   </script>
 
   <template>
@@ -86,6 +132,14 @@ The following example includes a basic implementation of the `<OAuthConsent />`
   ```vue {{ filename: 'oauth-consent.vue' }}
   <script setup lang="ts">
   // Components are automatically imported
+  useHead({
+    meta: [
+      {
+        name: 'referrer',
+        content: 'strict-origin-when-cross-origin',
+      },
+    ],
+  })
   </script>
 
   <template>
@@ -97,6 +151,12 @@ The following example includes a basic implementation of the `<OAuthConsent />`
 <If sdk="js-frontend">
   ## Usage with JavaScript
 
+  Add the following `<meta>` tag to the page that hosts the OAuth consent screen:
+
+  ```html {{ filename: 'index.html' }}
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  ```
+
   The following methods available on an instance of the [`Clerk`](/docs/reference/objects/clerk) class are used to render and control the `<OAuthConsent />` component:
 
   - [`mountOAuthConsent()`](#mount-o-auth-consent)
diff --git a/docs/reference/hooks/use-oauth-consent.mdx b/docs/reference/hooks/use-oauth-consent.mdx
index 582b04440b..b5d24e8deb 100644
--- a/docs/reference/hooks/use-oauth-consent.mdx
+++ b/docs/reference/hooks/use-oauth-consent.mdx
@@ -18,14 +18,23 @@ Unlike the [`<OAuthConsent />`](/docs/reference/components/authentication/oauth-
 
 <Typedoc src="shared/use-o-auth-consent-return" />
 
+<Include src="_partials/oauth-consent/callout" />
+
 ## Example
 
 The following example demonstrates how to use the `useOAuthConsent()` hook to fetch OAuth consent metadata and build a custom consent form. In this example, the `client_id` is read from the current URL and passed to the hook, and the form submits to the URL generated by the [`buildConsentActionUrl()`](/docs/reference/types/oauth-application) method.
 
 <If sdk="react">
-  ```tsx {{ filename: 'src/pages/OAuthConsentPage.tsx' }}
+  ```tsx {{ filename: 'src/routes/oauth-consent.tsx' }}
   import { useClerk, useOAuthConsent } from '@clerk/react'
 
+  export const meta = () => [
+    {
+      name: 'referrer',
+      content: 'strict-origin-when-cross-origin',
+    },
+  ]
+
   export default function OAuthConsentPage() {
     const clerk = useClerk()
     const params = new URLSearchParams(window.location.search)
@@ -74,6 +83,10 @@ The following example demonstrates how to use the `useOAuthConsent()` hook to fe
   import { useClerk, useOAuthConsent } from '@clerk/nextjs'
   import { useSearchParams } from 'next/navigation'
 
+  export const metadata: Metadata = {
+    referrer: 'strict-origin-when-cross-origin',
+  }
+
   export default function Page() {
     const clerk = useClerk()
     const params = useSearchParams()
@@ -117,9 +130,17 @@ The following example demonstrates how to use the `useOAuthConsent()` hook to fe
 
 <If sdk="react-router">
   ```tsx {{ filename: 'app/routes/oauth-consent.tsx' }}
+  import type { Route } from './+types/oauth-consent'
   import { useClerk, useOAuthConsent } from '@clerk/react-router'
   import { useSearchParams } from 'react-router'
 
+  export const meta: Route.MetaFunction = () => [
+    {
+      name: 'referrer',
+      content: 'strict-origin-when-cross-origin',
+    },
+  ]
+
   export default function OAuthConsentPage() {
     const clerk = useClerk()
     const [params] = useSearchParams()
@@ -167,6 +188,14 @@ The following example demonstrates how to use the `useOAuthConsent()` hook to fe
   import { createFileRoute } from '@tanstack/react-router'
 
   export const Route = createFileRoute('/oauth-consent')({
+    head: () => ({
+      meta: [
+        {
+          name: 'referrer',
+          content: 'strict-origin-when-cross-origin',
+        },
+      ],
+    }),
     validateSearch: (search: Record<string, unknown>) => ({
       client_id: typeof search.client_id === 'string' ? search.client_id : '',
       scope: typeof search.scope === 'string' ? search.scope : undefined,

From 2824cbdb7bb22e74941a41b94ce72cbf0cbcdf42 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Fri, 8 May 2026 15:52:35 -0700
Subject: [PATCH 20/21] chore: update partial content

---
 docs/_partials/oauth-consent/callout.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_partials/oauth-consent/callout.mdx b/docs/_partials/oauth-consent/callout.mdx
index 2b9837fe96..5093f4a531 100644
--- a/docs/_partials/oauth-consent/callout.mdx
+++ b/docs/_partials/oauth-consent/callout.mdx
@@ -1,2 +1,2 @@
-> [!WARNING]
-> Custom OAuth consent routes are not generally available yet and must be enabled for your Clerk instance. Pages that host OAuth consent must also set the referrer policy to `strict-origin-when-cross-origin` so the cross-origin POST to FAPI includes the `Origin` header and Clerk can validate the CSRF token.
+> [!IMPORTANT]
+> Pages that host OAuth consent must set the referrer policy to `strict-origin-when-cross-origin` so the cross-origin POST to FAPI includes the `Origin` header and Clerk can validate the CSRF token.

From b195ab93807ff47ab3fd1a0695000dfa21f5124f Mon Sep 17 00:00:00 2001
From: Sarah Soutoul <sarah@clerk.dev>
Date: Mon, 11 May 2026 15:10:10 -0600
Subject: [PATCH 21/21] Improve wording callout

---
 docs/_partials/oauth-consent/callout.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_partials/oauth-consent/callout.mdx b/docs/_partials/oauth-consent/callout.mdx
index 5093f4a531..6efaedd119 100644
--- a/docs/_partials/oauth-consent/callout.mdx
+++ b/docs/_partials/oauth-consent/callout.mdx
@@ -1,2 +1,2 @@
 > [!IMPORTANT]
-> Pages that host OAuth consent must set the referrer policy to `strict-origin-when-cross-origin` so the cross-origin POST to FAPI includes the `Origin` header and Clerk can validate the CSRF token.
+> 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.