Merge branch 'main' into aa/DOCS-10028

docs/advanced-usage/using-proxies.mdx

@@ -122,6 +122,7 @@ When using a proxy, all requests to the Frontend API will be made through your d
 
           const proxyUrl = new URL(request.url)
           proxyUrl.host = 'frontend-api.clerk.dev'
+          proxyUrl.port = "443"
           proxyUrl.protocol = 'https'
           proxyUrl.pathname = proxyUrl.pathname.replace('/__clerk', '')
 

docs/custom-flows/bot-sign-up-protection.mdx

@@ -151,4 +151,18 @@ Clerk provides the ability to add a CAPTCHA widget to your sign-up flows to prot
       ```
     </Tab>
   </Tabs>
+
+  ## Customize the appearance of the CAPTCHA widget
+
+  You can customize the appearance of the CAPTCHA widget by passing data attributes to the `<div id="clerk-captcha" />` element. The following attributes are supported:
+
+  - `data-cl-theme`: The CAPTCHA widget theme. Can take the following values: `'light'`, `'dark'`, `'auto'`. Defaults to `'auto'`.
+  - `data-cl-size`: The CAPTCHA widget size. Can take the following values: `'normal'`, `'flexible'`, `'compact'`. Defaults to `'normal'`.
+  - `data-cl-language`: The CAPTCHA widget language. Must be either `'auto'` (default) to use the language that the visitor has chosen, or language and country code (e.g. `'en-US'`). Some languages are [supported by Clerk](/docs/customization/localization) but not by Cloudflare Turnstile, which is used for the CAPTCHA widget. See [Cloudflare Turnstile's supported languages](https://developers.cloudflare.com/turnstile/reference/supported-languages).
+
+  For example, to set the theme to `'dark'`, the size to `'flexible'`, and the language to `'es-ES'`, you would add the following attributes to the `<div id="clerk-captcha" />` element:
+
+  ```html
+  <div id="clerk-captcha" data-cl-theme="dark" data-cl-size="flexible" data-cl-language="es-ES" />
+  ```
 </Steps>

docs/customization/captcha.mdx

@@ -0,0 +1,193 @@
+---
+title: '`captcha` prop'
+description: Utilize Clerk's `captcha` prop in order to change the appearance of the CAPTCHA widget.
+---
+
+{/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */}
+
+The `captcha` property can be used to change the appearance of the CAPTCHA widget. It is passed as a parameter to the [`appearance` prop](/docs/customization/overview).
+
+## Properties
+
+<Properties>
+  - `theme`
+  - `'auto' | 'light' | 'dark'`
+
+  The CAPTCHA widget theme. Defaults to `auto`.
+
+  ---
+
+  - `size`
+  - `'normal' | 'flexible' | 'compact'`
+
+  The CAPTCHA widget size. Defaults to `normal`.
+
+  ---
+
+  - `language`
+  - `string`
+
+  The CAPTCHA widget language/locale. When setting the language for CAPTCHA, this is how localization is prioritized:
+
+  - `appearance.captcha.language`: Set by this `language` property.
+  - `localization.locale`: Set by the [`localization` prop on `<ClerkProvider>`](/docs/customization/localization). Some languages are [supported by Clerk](/docs/customization/localization) but not by Cloudflare Turnstile, which is used for the CAPTCHA widget. See [Cloudflare Turnstile's supported languages](https://developers.cloudflare.com/turnstile/reference/supported-languages).
+  - `en-US`: Clerk's default language.
+</Properties>
+
+## Usage
+
+<Tabs items={["Next.js", "Astro", "React", "Remix", "Nuxt", "Vue"]}>
+  <Tab>
+    ```tsx {{ prettier: false, filename: 'app.tsx' }}
+    import { ClerkProvider } from '@clerk/nextjs';
+
+    <ClerkProvider
+      appearance={{
+        captcha: {
+          theme: 'dark',
+          size: 'flexible',
+          language: 'es-ES',
+        }
+      }}
+    >
+      {/* ... */}
+    </ClerkProvider>;
+    ```
+  </Tab>
+
+  <Tab>
+    ```js {{ filename: 'astro.config.mjs' }}
+    import clerk from '@clerk/astro'
+
+    export default defineConfig({
+      integrations: [
+        clerk({
+          appearance: {
+            captcha: {
+              theme: 'dark',
+              size: 'flexible',
+              language: 'es-ES',
+            },
+          },
+        }),
+      ],
+    })
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app.tsx', mark: [[13, 18]] }}
+    import React from 'react'
+    import './App.css'
+    import { ClerkProvider } from '@clerk/clerk-react'
+
+    if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
+      throw new Error('Missing Publishable Key')
+    }
+    const clerkPubKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY
+
+    function App() {
+      return (
+        <ClerkProvider
+          appearance={{
+            captcha: {
+              theme: 'dark',
+              size: 'flexible',
+              language: 'es-ES',
+            },
+          }}
+          publishableKey={clerkPubKey}
+        >
+          {/* ... */}
+        </ClerkProvider>
+      )
+    }
+
+    export default App
+    ```
+  </Tab>
+
+  <Tab>
+    ```tsx {{ filename: 'app/root.tsx', mark: [[35, 40]] }}
+    // Import ClerkApp
+    import { ClerkApp } from '@clerk/remix'
+    import type { MetaFunction, LoaderFunction } from '@remix-run/node'
+
+    import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
+
+    import { rootAuthLoader } from '@clerk/remix/ssr.server'
+
+    export const meta: MetaFunction = () => ({
+      charset: 'utf-8',
+      title: 'New Remix App',
+      viewport: 'width=device-width,initial-scale=1',
+    })
+
+    export const loader: LoaderFunction = (args) => rootAuthLoader(args)
+
+    function App() {
+      return (
+        <html lang="en">
+          <head>
+            <Meta />
+            <Links />
+          </head>
+          <body>
+            <Outlet />
+            <ScrollRestoration />
+            <Scripts />
+            <LiveReload />
+          </body>
+        </html>
+      )
+    }
+
+    export default ClerkApp(App, {
+      appearance: {
+        captcha: {
+          theme: 'dark',
+          size: 'flexible',
+          language: 'es-ES',
+        },
+      },
+    })
+    ```
+  </Tab>
+
+  <Tab>
+    ```ts {{ filename: 'nuxt.config.ts' }}
+    export default defineNuxtConfig({
+      modules: ['@clerk/nuxt'],
+      clerk: {
+        appearance: {
+          captcha: {
+            theme: 'dark',
+            size: 'flexible',
+            language: 'es-ES',
+          },
+        },
+      },
+    })
+    ```
+  </Tab>
+
+  <Tab>
+    ```ts {{ filename: 'src/main.ts' }}
+    import { createApp } from 'vue'
+    import App from './App.vue'
+    import { clerkPlugin } from '@clerk/vue'
+
+    const app = createApp(App)
+    app.use(clerkPlugin, {
+      appearance: {
+        captcha: {
+          theme: 'dark',
+          size: 'flexible',
+          language: 'es-ES',
+        },
+      },
+    })
+    app.mount('#app')
+    ```
+  </Tab>
+</Tabs>

docs/customization/localization.mdx

@@ -301,8 +301,6 @@ You can also provide your own localizations for the Clerk components. This is us
 ```tsx {{ filename: 'app/layout.tsx' }}
 import { ClerkProvider } from '@clerk/nextjs'
 import './globals.css'
-// fr-FR locale is imported as frFR
-import { frFR } from '@clerk/localizations'
 
 const localization = {
   socialButtonsBlockButton: 'Sign In with {{provider|titleize}}',

docs/customization/overview.mdx

@@ -41,6 +41,13 @@ The `appearance` prop accepts the following properties:
   - `Elements`
 
   Fine-grained theme overrides. Useful when you want to style specific elements or elements that are under a specific state. For more information, see the [Customize elements of a Clerk component](#customize-elements-of-a-clerk-component) section.
+
+  ---
+
+  - `captcha?`
+  - `Captcha`
+
+  Configuration options that affect the appearance of the CAPTCHA widget. For more information, see the [dedicated guide](/docs/customization/captcha).
 </Properties>
 
 ## Using a prebuilt theme

docs/manifest.json

@@ -2697,6 +2697,10 @@
                   {
                     "title": "Variables",
                     "href": "/docs/customization/variables"
+                  },
+                  {
+                    "title": "CAPTCHA",
+                    "href": "/docs/customization/captcha"
                   }
                 ]
               ]

docs/quickstarts/nextjs.mdx

@@ -21,9 +21,23 @@ description: Add authentication and user management to your Next.js app.
 
   Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation):
 
-  ```bash {{ filename: 'terminal' }}
-  npx create-next-app@latest
-  ```
+  <CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm create next-app@latest
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn create next-app
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm create next-app
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    bun create next-app
+    ```
+  </CodeBlockTabs>
 
   ## Install `@clerk/nextjs`