Assign sdks in frontmatter for docs that should only be visible to a subset of sdks

docs/_partials/expo/web-only-callout.mdx

@@ -0,0 +1,2 @@
+> [!NOTE]
+> This component can be used in Expo Web projects, but won't work in native environments (iOS or Android). For native apps, use the supported native components instead.

docs/_partials/hooks/hook-list.mdx

@@ -7,3 +7,4 @@
 - [`useSessionList()`](/docs/hooks/use-session-list)
 - [`useOrganization()`](/docs/hooks/use-organization)
 - [`useOrganizationList()`](/docs/hooks/use-organization-list)
+- [`useReverification()`](/docs/hooks/use-reverification)

docs/components/authentication/google-one-tap.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<GoogleOneTap />` component'
 description: Clerk's <GoogleOneTap /> component renders a UI for authenticating users with Google's One Tap API.
+sdk: astro, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!IMPORTANT]
@@ -54,7 +55,7 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
 > [!NOTE]
 > `<GoogleOneTap>` does not render if the user is already signed into your Clerk application, so there's no need to manually check if a user is signed in yourself before rendering it.
 
-<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
     import { GoogleOneTap } from '@clerk/nextjs'
@@ -85,6 +86,18 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/sign-in-google.web.tsx' }}
+    import { GoogleOneTap } from '@clerk/clerk-expo/web'
+
+    export default function Page() {
+      return <GoogleOneTap />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: 'app/routes/sign-in/$.tsx' }}
     import { GoogleOneTap } from '@clerk/remix'

docs/components/authentication/sign-in.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignIn />` component'
 description: Clerk's <SignIn /> component renders a UI for signing in users.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<SignIn /> component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }}
@@ -156,7 +157,9 @@ The following example includes basic implementation of the `<SignIn />` componen
   </Tab>
 
   <Tab>
-    If you would like to create a dedicated `/sign-in` page in your Expo Web application, there are a few requirements you must follow. See the [dedicated guide](/docs/references/expo/web-support/custom-sign-in-or-up-page) for more information.
+    <Include src="_partials/expo/web-only-callout" />
+
+    If you would like to create a dedicated `/sign-in` page in your Expo application, there are a few requirements you must follow. See the [dedicated guide](/docs/references/expo/web-support/custom-sign-in-or-up-page) for more information.
 
     ```tsx {{ filename: '/app/sign-in.web.tsx' }}
     import { SignIn } from '@clerk/clerk-expo/web'

docs/components/authentication/sign-up.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignUp />` component'
 description: Clerk's <SignUp /> component renders a UI for signing up users.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<SignUp /> component renders a UI for signing up users.](/docs/images/ui-components/sign-up.png){{ style: { maxWidth: '460px' } }}
@@ -108,7 +109,7 @@ All props are optional.
 
 The following example includes basic implementation of the `<SignUp />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "Astro", "React", "React Router","Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "Astro", "Expo", "React", "React Router","Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     The following example demonstrates how you can use the `<SignUp />` component on a public page.
 
@@ -141,6 +142,18 @@ The following example includes basic implementation of the `<SignUp />` componen
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/sign-up.web.tsx' }}
+    import { SignUp } from '@clerk/clerk-expo/web'
+
+    export default function SignUpPage() {
+      return <SignUp />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: 'src/sign-up.tsx' }}
     import { SignUp } from '@clerk/clerk-react'

docs/components/clerk-provider.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkProvider>`'
 description: The <ClerkProvider> component provides session and user context to Clerk's hooks and components.
+sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
 ---
 
 The `<ClerkProvider>` component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components.

docs/components/control/authenticate-with-callback.mdx

@@ -1,6 +1,7 @@
 ---
 title: <code>\<AuthenticateWith<wbr />RedirectCallback /></code>
 description: Clerk's `<AuthenticateWithRedirectCallback />` component is used to implement custom OAuth flows. It handles the OAuth callback and completes the authentication process.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<AuthenticateWithRedirectCallback />` component is a crucial part of implementing custom OAuth flows in your application. It serves as the callback handler for the authentication process initiated by the `authenticateWithRedirect()` method. Render it on the route specified as the `redirectUrl` in your `authenticateWithRedirect()` call.

docs/components/control/clerk-loaded.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkLoaded>`'
 description: The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and will be available under `window.Clerk`. This allows you to wrap child components to access the Clerk object without the need to check it exists.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and will be available under `window.Clerk`. This allows you to wrap child components to access the `Clerk` object without the need to check it exists.

docs/components/control/clerk-loading.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkLoading>`'
 description: The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful for showing a custom loading state.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
 ---
 
 The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful for showing a custom loading state.

docs/components/control/redirect-to-createorganization.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToCreateOrganization />` (deprecated)'
 description: The <RedirectToCreateOrganization /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/redirect-to-organizationprofile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToOrganizationProfile />` (deprecated)'
 description: The <RedirectToOrganizationProfile /> component will navigate to the organization profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/redirect-to-signin.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToSignIn />`'
 description: The <RedirectToSignIn /> component will navigate to the sign in URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<RedirectToSignIn />` component will navigate to the sign in URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

docs/components/control/redirect-to-signup.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToSignUp />`'
 description: The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<RedirectToSignUp />` component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

docs/components/control/redirect-to-userprofile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToUserProfile />` (deprecated)'
 description: The <RedirectToUserProfile /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/signed-in.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignedIn>`'
 description: Conditionally render content only when a user is signed in.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
 ---
 
 ## Overview

docs/components/control/signed-out.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignedOut>`'
 description: Conditionally render content only when a user is signed out.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
 ---
 
 The `<SignedOut>` component offers authentication checks as a cross-cutting concern. Any child nodes wrapped by a `<SignedOut>` component will be rendered only if there's no User signed in to your application.

docs/components/organization/create-organization.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<CreateOrganization />` component'
 description: Clerk's <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<CreateOrganization /> component renders an organization creation UI that allows users to create brand new organizations within your application.](/docs/images/ui-components/create-organization.png){{ style: { maxWidth: '492px' } }}
@@ -64,7 +65,7 @@ All props are optional.
 
 The following example includes a basic implementation of the `<CreateOrganization />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }}
     import { CreateOrganization } from '@clerk/nextjs'
@@ -95,6 +96,18 @@ The following example includes a basic implementation of the `<CreateOrganizatio
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/create-organization.web.tsx' }}
+    import { CreateOrganization } from '@clerk/clerk-expo/web'
+
+    export default function CreateOrganizationPage() {
+      return <CreateOrganization />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: '/route/create-organization/$.tsx' }}
     import { CreateOrganization } from '@clerk/remix'

docs/components/organization/organization-list.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationList />` component'
 description: Clerk's <OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationList /> component displays organization-related memberships and automatic invitations and suggestions for the user.](/docs/images/ui-components/organization-list.png){{ style: { maxWidth: '460px' } }}
@@ -69,7 +70,7 @@ The `<OrganizationList />` component accepts the following properties, all of wh
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/organizations/page.tsx' }}
     import { OrganizationList } from '@clerk/nextjs'
@@ -116,6 +117,24 @@ The `<OrganizationList />` component accepts the following properties, all of wh
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/organizations.web.tsx' }}
+    import { OrganizationList } from '@clerk/clerk-expo/web'
+
+    export default function OrganizationListPage() {
+      return (
+        <OrganizationList
+          afterCreateOrganizationUrl={(org) => `/organization/${org.slug}`}
+          afterSelectPersonalUrl={(user) => `/user/${user.id}`}
+          afterSelectOrganizationUrl={(org) => `/organization/${org.slug}`}
+        />
+      )
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: '/route/organizations.tsx' }}
     import { OrganizationList } from '@clerk/remix'

docs/components/organization/organization-profile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationProfile />` component'
 description: Clerk's <OrganizationProfile /> component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationProfile /> component allows users to manage their organization membership and security settings.](/docs/images/ui-components/organization-profile.png)
@@ -61,7 +62,7 @@ The `<OrganizationProfile />` component accepts the following properties, all of
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     The `<OrganizationProfile />` component must embedded using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes) in order for the routing to work.
 
@@ -94,6 +95,18 @@ The `<OrganizationProfile />` component accepts the following properties, all of
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/organization-profile.web.tsx' }}
+    import { OrganizationProfile } from '@clerk/clerk-expo/web'
+
+    export default function OrganizationProfilePage() {
+      return <OrganizationProfile />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: '/pages/organization-profile/$.tsx' }}
     import { OrganizationProfile } from '@clerk/remix'

docs/components/organization/organization-switcher.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationSwitcher />` component'
 description: Clerk's <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationSwitcher /> component allows a user to switch between their account types - their personal account and their joined organizations.](/docs/images/ui-components/organization-switcher.png){{ style: { maxWidth: '436px' } }}
@@ -106,7 +107,7 @@ The `<OrganizationSwitcher />` component accepts the following properties, all o
 
 ## Usage with frameworks
 
-<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
   <Tab>
     ```jsx {{ filename: 'app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
     import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -137,6 +138,18 @@ The `<OrganizationSwitcher />` component accepts the following properties, all o
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/organization-switcher.web.tsx' }}
+    import { OrganizationSwitcher } from '@clerk/clerk-expo/web'
+
+    export default function OrganizationSwitcherPage() {
+      return <OrganizationSwitcher />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```jsx {{ filename: '/pages/organization-switcher/$.tsx' }}
     import { OrganizationSwitcher } from '@clerk/remix'

docs/components/pricing-table.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<PricingTable />`'
 description: Clerk's <PricingTable /> component displays a table of Plans and Features that users can subscribe to.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<PricingTable />` component displays a table of Plans and Features that users can subscribe to.
@@ -64,7 +65,7 @@ All props are optional.
 
 The following example includes a basic implementation of the `<PricingTable />` component. You can use this as a starting point for your own implementation.
 
-<Tabs items={["Next.js", "React", "Astro", "React Router", "Tanstack React Start", "Vue"]}>
+<Tabs items={["Next.js", "React", "Astro", "Expo", "React Router", "Tanstack React Start", "Vue"]}>
   <Tab>
     ```tsx {{ filename: 'app/pricing/page.tsx' }}
     import { PricingTable } from '@clerk/nextjs'
@@ -95,6 +96,18 @@ The following example includes a basic implementation of the `<PricingTable />`
     ```
   </Tab>
 
+  <Tab>
+    <Include src="_partials/expo/web-only-callout" />
+
+    ```jsx {{ filename: '/app/pricing.web.tsx' }}
+    import { PricingTable } from '@clerk/clerk-expo/web'
+
+    export default function PricingPage() {
+      return <PricingTable />
+    }
+    ```
+  </Tab>
+
   <Tab>
     ```tsx {{ filename: 'src/routes/pricing.tsx' }}
     import { PricingTable } from '@clerk/react-router'

docs/components/protect.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<Protect>`'
 description: The Protect component protects content or even entire routes based on authentication, and optionally, authorization. It only renders its children when the current user is signed-in, and if performing authorization checks, if the user has been granted a specific type of access control (role, permission, feature, or plan).
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
 ---
 
 The [`<Protect />`](/docs/components/protect) component protects content or even entire routes based on: