Skip to main content

​
Summary

Setting up a captcha can help protect your Dynamic-enabled site from bots. We currently support hCaptcha as our captcha provider. There’s two steps to the setup:

​
Setting up hCaptcha

To get started, you must first create an hCaptcha account.
  1. Sign up for a new account on hCaptcha - We recommend considering upgrading to the “Pro” plan, which allows for “passive” and “friction-free” modes.
  2. Add a new site - Make sure the hostname corresponds to the domain you are using the Dynamic SDK on. For example, if you plan to set up the Dynamic SDK in app.myawesomesite.com, then you should add this value to the Hostname sections in hCaptcha.
  3. Get your site key - This is used by the Dynamic SDK to communicate with hCaptcha and display a captcha challenge before the verification step in the wallet sign-in flow. Copy this value, which we will need to set up in Dynamic.
  4. Get your secret key - This is used by the Dynamic server-side backend to verify the captcha result from the SDK, and is never leaked to the SDK. To get your secret key, click on your account profile on the upper right corner and select “Settings”. You should see your plaintext secret key, which you should also copy to set up in Dynamic.

​
Setting up Dynamic captcha

Now that we have hCaptcha set up, we can move on to final configuration within Dynamic.
  1. Log in to Dynamic Dashboard. On the left navigation bar, click on “Fraud Protections” then select “Prevent Bot Activity” under “Security Integrations”
  2. Add your site key and secret key from hCaptcha - See previous steps on how to set up your hCaptcha credentials.
  3. Enable - When you are ready to enable the captcha, please make sure to switch the “enable” toggle.
You can use the isCaptchaRequired and setCaptchaToken functions to check if captcha is required and set the captcha token respectively. You can implement captcha in your own way, just make sure you call setCaptchaToken when the captcha challenge is completed, and that you have it set before calling one of the sign-in functions from the SDK.

​
Checking if captcha is required

You can check if captcha is required to decide whether to prompt the user to complete a captcha challenge or not. 
import { isCaptchaRequired } from '@dynamic-labs-sdk/client';

const isCaptchaRequired = isCaptchaRequired();

if (isCaptchaRequired) {
// prompt the user to complete an captcha challenge
}

​
Setting the captcha token

Once the captcha challenge is completed, you can set the captcha token using the setCaptchaToken function. The SDK will read the captcha token when making the request to the server. 
import { setCaptchaToken } from '@dynamic-labs-sdk/client';

const onCaptchaComplete = (captchaToken: string) => {
setCaptchaToken(captchaToken);
};