Adding Captcha Protection

Recommended: JavaScript SDK for React Native

While this SDK is still supported, we recommend using newer JavaScript SDK, which is optimized for React Native, but also comes with a host of other benefits.

Summary

Dynamic supports two captcha providers to protect your app from bots:

• Cloudflare Turnstile — Dynamic manages the keys by default, or bring your own site key and secret key.
• hCaptcha — Requires your own credentials.

Configure your provider in the Dynamic Dashboard under Fraud Protections → Captcha, then follow the implementation steps below.

Setting up Cloudflare Turnstile

The managed widget is enabled by default with no Cloudflare account required.

1. In the Dynamic Dashboard, go to Fraud Protections → Captcha.
2. Select Cloudflare Turnstile as your provider.
3. Optionally supply your own site key and secret key for widget customization.
4. Toggle captcha on.

Setting up hCaptcha

hCaptcha requires your own account.

1. Sign up at hcaptcha.com (Pro plan recommended for passive/friction-free modes).
2. Add a new site with the hostname where your app operates.
3. Copy your site key (used client-side) and secret key (used server-side).
4. In the Dynamic Dashboard, go to Fraud Protections → Captcha, select hCaptcha, enter both keys, and enable the toggle.

Implementation

The React Native SDK handles captcha through a CaptchaProvider that renders the challenge in a full-screen WebView modal and automatically calls setCaptchaToken on completion.

Prerequisites

react-native-webview is required to render the captcha widget:

npx expo install react-native-webview

1. Wrap your app with CaptchaProvider

Add CaptchaProvider inside your DynamicProvider. It mounts the captcha modal and manages the token lifecycle.

import { CaptchaProvider } from '@dynamic-labs-sdk/react-native-demo-components';

export default function App() {
  return (
    <DynamicProvider environmentId="YOUR_ENVIRONMENT_ID">
      <CaptchaProvider>
        {/* rest of your app */}
      </CaptchaProvider>
    </DynamicProvider>
  );
}

2. Prompt for captcha before sign-in

Use the useCaptchaPrompt hook to show the captcha modal before sending an OTP. promptCaptchaIfRequired is a no-op when captcha is not enabled for the environment, so no extra conditional logic is needed.

import { useCaptchaPrompt } from '@dynamic-labs-sdk/react-native-demo-components';
import { useSendEmailOTP } from '@dynamic-labs-sdk/react-hooks';

function SignInScreen() {
  const { promptCaptchaIfRequired } = useCaptchaPrompt();
  const { mutateAsync: sendEmailOTP } = useSendEmailOTP();

  const handleSubmit = async () => {
    try {
      await promptCaptchaIfRequired();
    } catch {
      return; // user dismissed the captcha
    }
    await sendEmailOTP({ email });
  };

  // ...
}

When the user completes the captcha challenge, the token is set automatically and the OTP request proceeds. If the user dismisses the modal, the catch block returns early without sending the OTP.