Add a CAPTCHA

Before you start

You need:

This guide will help you add a CAPTCHA to your Identifier-First Login screen. To learn more, read the Getting Started guide and visit the SDK reference guide.

For more information about Auth0 CAPTCHAs, read Customize Signup and Login Prompts.

Setup

Complete the Build Identifier First Login with Password guide and navigate to your local directory.

In your Auth0 tenant, navigate to Dashboard > Security > Attack Protection and enable at least one Bot Detection 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.

/

interface ISimpleCaptcha {
  image: string;
}

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

export default SimpleCaptcha;

Was this helpful?

/

Add the component

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

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

Was this helpful?

/

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

/

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>
  );
}

Was this helpful?

/

Learn more