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, install the react-turnstile package.

npm i react-turnstile

Was this helpful?

/

After installing the NPM, create a file called AuthChallenge.tsx and add the following code.

/

import Turnstile from "react-turnstile";
import { useState } from 'react';

interface IAuthChallenge {
  siteKey: string
}

export default function AuthChallenge({ siteKey }: IAuthChallenge) {

  const [token, setToken ] = useState("")

  const captchaWidget = {
     transform: 'scale(1.06)',
     transformOrigin: '0 0'
   };

  return (
    <>
      <div style={captchaWidget}>
        <Turnstile
          sitekey={siteKey}
          onVerify={setToken}
        />
        <input
          type="hidden"
          name="captcha"
          value={token}
        />
      </div>
    </>
  );
}

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 ?
    <AuthChallenge siteKey={screenProvider.screen.captchaSiteKey} />
}

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 AuthChallenge from "@/components/ui/auth-challenge";
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 ?
            <AuthChallenge siteKey={screenProvider.screen.captchaSiteKey} />
        }
        <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