Skip to main content
Docs

captcha prop

The captcha property can be used to change the appearance of the CAPTCHA widget.

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

To customize the CAPTCHA widget, pass the appearance prop to the clerk.load() method. The appearance prop accepts the property captcha, which can be used to apply different changes to the widget.

In the following example, the CAPTCHA is customized to use the dark theme, a flexible size, and Spanish as the display language.

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

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)
}
<!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>

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on