Implementing Auth Challenge CAPTCHA using Advanced Customizations For Universal Login

Knowledge Articles
1

Overview

This article provides guidance on how to implement Auth Challenge CAPTCHA in the Universal Login page using Advanced Customizations for Universal Login (ACUL). This implementation is necessary to render the CAPTCHA widget after it has been enabled in the Auth0 Dashboard.

Applies To

  • CAPTCHA - Auth Challenge
  • Universal Login
  • Advanced Customization for Universal Login (ACUL)

Solution

Implement the Auth Challenge CAPTCHA widget in the application’s UI by using a dedicated third-party library. The following code provides an example of how to integrate CAPTCHA with an Auth Challenge using react-turnstile.

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

NOTE: The provided code snippet is for testing and guidance purposes only. It is a simplified example and is not intended for production use without modification. The code must be thoroughly tested, adapted, and secured to meet the specific requirements of a production environment.

The sitekey can be retrieved from the properties of the page’s screen. The Auth0 documentation provides a list of the properties for each page available.