> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Guide to adding a CAPTCHA to your ACUL flow

# Add a CAPTCHA

<Card title="Before you start">
  You need:

  * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and [custom domain](/docs/customize/custom-domains).
  * Enable [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first) on your tenant to render the ACUL Login ID screen.
  * A development application or an [Auth0 SDK sample application](/docs/quickstart/spa/react/interactive) on `localhost` for Auth0 authentication.
  * A [database connection](/docs/authenticate/database-connections) to authenticate users.
  * An [Auth0 ACUL sample application](https://github.com/auth0-samples/auth0-acul-samples) to render the ACUL screens.
</Card>

This guide will help you add a CAPTCHA to your [Identifier-First Login screen](/docs/customize/login-pages/advanced-customizations/build-user-flows/id-first-login). To learn more, read the [Getting Started guide](/docs/customize/login-pages/advanced-customizations/getting-started) and visit the [SDK reference guide](/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart).

For more information about Auth0 CAPTCHAs, read [Customize Signup and Login Prompts](/docs/secure/attack-protection/bot-detection).

### Setup

Complete the [Build Identifier First Login with Password](/docs/customize/login-pages/advanced-customizations/build-user-flows/id-first-login) guide and navigate to your local directory.

In your Auth0 tenant, navigate to [Dashboard > Security > Attack Protection](https://manage.auth0.com/#/security/attack-protection/bot-detection) and enable at least one <Tooltip tip="Bot Detection: Form of attack protection in which Auth0 blocks suspected bot traffic by enabling a CAPTCHA during the login process." cta="View Glossary" href="/docs/glossary?term=Bot+Detection">Bot Detection</Tooltip> challenge, then choose `Auth Challenge` as your CAPTCHA provider when prompted.

### Create the CAPTCHA file

In your components folder, create a file called SimpleCaptcha.tsx and include the following code.

<Accordion title="Add SimpleCaptcha.tsx">
  ```tsx lines
  interface ISimpleCaptcha {
    image: string;
  }

  const SimpleCaptcha = ({ image }: ISimpleCaptcha) => (
    <>
      <div>
        <Frame><img src={image} alt="captcha" /></Frame>
      </div>
      <input
        label="Enter the code shown above"
        type="text"
        name="captcha"
        id="captcha"
      />
    </>
  );

  export default SimpleCaptcha;
  ```
</Accordion>

### Add the component

Add the following code to the Login ID screen inside the form and after the identifier input.

```tsx lines
{screenProvider.screen.isCaptchaAvailable ?
    <SimpleCaptcha image={screenProvider.screen.captchaImage} />
}
```

An example of a full code block for this screen is below.

<Accordion title="Add a Simple CAPTCHA">
  ```tsx lines expandable
  import { ChangeEvent } from "react";
  import { LoginId as ScreenProvider } from "@auth0/auth0-acul-js";
  // UI Components
  import { Label } from "@/components/ui/label";
  import { Input } from "@/components/ui/input";
  import { Button } from "@/components/ui/button";
  import { Text } from "@/components/ui/text";
  import { Link } from "@/components/ui/link";
  import SimpleCaptcha from "@/components/ui/simple-captcha";
  import {
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
  } from "@/components/ui/card";
  export default function LoginId() {
    // Initialize the SDK for this screen
    const screenProvider = new ScreenProvider();
    // Handle the submit action
    const formSubmitHandler = (event: ChangeEvent<HTMLFormElement>) => {
      event.preventDefault();
      // grab the values from the form
      const identifierInput = event.target.querySelector(
        "input#identifier"
      ) as HTMLInputElement;
      const captchaInput = event.target.querySelector(
        "input[name='captcha']"
      ) as HTMLInputElement;
      // Call the SDK
      screenProvider.login({ 
          username: identifierInput?.value,
          captcha: captchaInput?.value
      });
    };
    // Render the form
    return (
      <form noValidate onSubmit={formSubmitHandler}>
        <CardHeader>
          <CardTitle className="mb-2 text-3xl font-medium text-center">
            {screenProvider.screen.texts?.title ?? "Welcome"}
          </CardTitle>
          <CardDescription className="mb-8 text-center">
            {screenProvider.screen.texts?.description ?? "Login to continue"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-2 space-y-2">
            <Label htmlFor="identifier">
              {screenProvider.screen.texts?.emailPlaceholder ??
                "Enter your email"}
            </Label>
            <Input
              type="text"
              id="identifier"
              name="identifier"
              defaultValue={
                screenProvider.screen.data?.username ??
                screenProvider.untrustedData.submittedFormData?.username
              }
            />
          </div>
          {screenProvider.screen.isCaptchaAvailable ?
              <SimpleCaptcha image={screenProvider.screen.captchaImage} />
          }
          <Button type="submit" className="w-full">
            {screenProvider.screen.texts?.buttonText ?? "Continue"}
          </Button>
          <Text className="mb-2">
            {screenProvider.screen.texts?.footerText ??
              "Don't have an account yet?"}
            <Link className="ml-1" href={screenProvider.screen.signupLink ?? "#"}>
              {screenProvider.screen.texts?.footerLinkText ??
                "Create your account"}
            </Link>
          </Text>
          <Text>
            Need Help?
            <Link
              className="ml-1"
              href={screenProvider.screen.resetPasswordLink ?? "#"}
            >
              {screenProvider.screen.texts?.forgottenPasswordText ??
                "Forgot your Password?"}
            </Link>
          </Text>
        </CardContent>
      </form>
    );
  }
  ```
</Accordion>

## Learn more

* [Advanced Customizations for Universal Login](/docs/customize/login-pages/advanced-customizations)
* [Getting Started with ACUL](/docs/customize/login-pages/advanced-customizations/getting-started)
* [Configure ACUL Screens](/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens)