Smart bot sign-up protection
If you have enabled the Smart Bot Protection widget under User & Authentication > Attack Protection > Bot sign-up protection in Dashboard, it's required to include a specific element in your DOM, to enable rendering of the widget.
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.
The Invisible widget is more prone to false positives, therefore we strongly recommend that you fix this error by ensuring the <div id="clerk-captcha" /> element exists in your DOM.
Example
import { useState } from "react";
import { useSignUp } from "@clerk/nextjs";
export default function SignUpForm() {
const { isLoaded, signUp, setActive } = useSignUp();
const [emailAddress, setEmailAddress] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
try {
await signUp.create({
emailAddress,
password,
});
} catch (err: any) {
console.error('sign-up error');
}
};
return (
<div>
<form>
<div>
<label htmlFor="email">Email</label>
<input onChange={(e) => setEmailAddress(e.target.value)} id="email" name="email" type="email" />
</div>
<div>
<label htmlFor="password">Password</label>
<input onChange={(e) => setPassword(e.target.value)} id="password" name="password" type="password" />
</div>
{/* CAPTCHA Widget */}
<div id="clerk-captcha"></div>
<button onClick={handleSubmit}>Sign up</button>
</form>
</div>
);
}