Skip to main content
Docs
Dashboard

captcha prop

The captcha property can be used to change the appearance of the CAPTCHA widget. It is passed as a parameter to the appearance prop.

Properties

  • Name
    theme
    Type
    'auto' | 'light' | 'dark'
    Description

    The CAPTCHA widget theme. Defaults to auto.

  • Name
    size
    Type
    'normal' | 'flexible' | 'compact'
    Description

    The CAPTCHA widget size. Defaults to normal.

  • Name
    language
    Type
    string
    Description

    The CAPTCHA widget language/locale. When setting the language for CAPTCHA, this is how localization is prioritized:

Usage

app.tsx
import { ClerkProvider } from '@clerk/nextjs';

<ClerkProvider
  appearance={{
    captcha: {
      theme: 'dark',
      size: 'flexible',
      language: 'es-ES',
    }
  }}
>
  {/* ... */}
</ClerkProvider>;
astro.config.mjs
import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        captcha: {
          theme: 'dark',
          size: 'flexible',
          language: 'es-ES',
        },
      },
    }),
  ],
})
app.tsx
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
app/root.tsx
// 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',
    },
  },
})
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    appearance: {
      captcha: {
        theme: 'dark',
        size: 'flexible',
        language: 'es-ES',
      },
    },
  },
})
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')

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on