Skip to main content
Docs

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, which is available wherever you initialize the Clerk integration. For most SDKs, this is done via the <ClerkProvider> component. For other SDKs, it's configured through the SDK's Clerk integration or plugin.

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

For React-based SDKs, pass the captcha property to the appearance prop of the <ClerkProvider> component.

<ClerkProvider
  appearance={{
    captcha: {
      theme: 'dark',
      size: 'flexible',
      language: 'es-ES',
    },
  }}
>
  {/* ... */}
</ClerkProvider>

In Astro, pass the captcha property to the appearance prop of the clerk()Astro Icon integration.

astro.config.mjs
import clerk from '@clerk/astro'

export default defineConfig({
  integrations: [
    clerk({
      appearance: {
        captcha: {
          theme: 'dark',
          size: 'flexible',
          language: 'es-ES',
        },
      },
    }),
  ],
})

In JavaScript, pass the captcha property to the appearance prop of the clerk.load()JavaScript Icon method.

Use the following tabs to view the code necessary for each file.

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

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(clerkPubKey)
await clerk.load({
  appearance: {
    captcha: {
      theme: 'dark',
      size: 'flexible',
      language: 'es-ES',
    },
  },
})

if (clerk.isSignedIn) {
  document.getElementById('app').innerHTML = `
      <div id="user-button"></div>
    `

  const userButtonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userButtonDiv)
} else {
  document.getElementById('app').innerHTML = `
      <div id="sign-in"></div>
    `

  const signInDiv = document.getElementById('sign-in')

  clerk.mountSignIn(signInDiv)
}
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js" async crossorigin="anonymous"></script>
  </body>
</html>

In Vue, pass the captcha property to the appearance prop of the clerkPlugin()Vue.js Icon integration.

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')

In Nuxt, pass the captcha property to the appearance prop of the defineNuxtConfig()Nuxt.js Icon integration.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@clerk/nuxt'],
  clerk: {
    appearance: {
      captcha: {
        theme: 'dark',
        size: 'flexible',
        language: 'es-ES',
      },
    },
  },
})

In Fastify, pass the captcha property to the appearance prop of the clerkPlugin()Fastify Icon integration.

src/main.ts
import Fastify from 'fastify'
import { clerkPlugin } from '@clerk/fastify'

const fastify = Fastify({ logger: true })

fastify.register(clerkPlugin, {
  appearance: {
    captcha: {
      theme: 'dark',
      size: 'flexible',
      language: 'es-ES',
    },
  },
})

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on