Add a CAPTCHA

Before you start

You need:

• An Auth0 development tenant configured with Universal Login and custom domain.
• Enable Identifier First Authentication on your tenant to render the ACUL Login ID screen.
• A development application or an Auth0 SDK sample application on localhost for Auth0 authentication.
• A database connection to authenticate users.
• An Auth0 ACUL sample application to render the ACUL screens.

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.

Add SimpleCaptcha.tsx

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;

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} />
}

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

Add a Simple CAPTCHA

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

Learn more

• Advanced Customizations for Universal Login
• Getting Started with ACUL
• Configure ACUL Screens