This guide is for users who want to build a custom user interface using the Clerk API. To use a prebuilt UI, use Clerk's Account Portal pages or prebuilt components.
Clerk provides the ability to add a CAPTCHA widget to your sign-up flows to protect against bot sign-ups. Clerk's <SignUp /> component handles this flow out-of-the-box. However, if you're building a custom user interface, this guide will show you how to add the CAPTCHA widget to your custom sign-up flow.
To render the CAPTCHA widget in your custom sign-up form, you need to include a specific element in your DOM. Specifically, there should be a <div id="clerk-captcha" /> element by the time you call signUp.create(). This element acts as a placeholder onto which the widget will be rendered.
If this element is not found, the SDK will transparently fall back to the Invisible widget in order to avoid breaking your sign-up flow. If this happens, you should see a relevant error in your browser's console.
Tip
The Invisible widget automatically blocks suspected bot traffic without offering users falsely detected as bots with an opportunity to prove otherwise. Therefore, it's strongly recommended that you ensure the <div id="clerk-captcha" /> element exists in your DOM.
Next.js
The following example demonstrates how to add the CAPTCHA widget to a custom sign-up form. This example uses the Email & password custom flow but you can add the CAPTCHA widget to any custom sign-up form.