Why is there no captcha option for the login method in auth0.js?

I am currently using auth0.js in react to create a universal login page.
I needed to use captcha for that, but I couldn’t find the captcha option in the login method. I am wondering how I should implement this.
I have looked at the following information, but could not understand it well.

Hello @wat_01 ,

Welcome to the Community!

To enable Captcha, you can configure it from the dashboard. You can enable from your dashboard: Security > Attack Protection > Bot Detection

With regards to the post, you can use the captcha parameter in the login method after you instantiate a variable with renderCaptcha.

Thanks!

1 Like

@wayne.lim
Thanks for the reply!
I am using @types/auth0.js and when I look at the types I get a type error with no captcha option.

So how do I pass the captcha option to the login method?

This is part of the code.

const loginWithUsernamePassword = useCallback(
  (username: string, password: string) => {
    const urlParams = new URLSearchParams(window.location.search);
    const stateParam = urlParams.get("state") || "";
    const databaseConnection = "Username-Password-Authentication";

    try {
      webAuth.login(
        {
          username,
          password,
          realm: databaseConnection,
          state: stateParam,
        },
        (auth0Error, result) => {
          if (auth0Error) {
            throw Error(auth0Error.error);
          }
        }
      );
    } catch (error) {
      captureException(error);
    }
  },
  [webAuth]
);

@wayne.lim
Should I add the above captcha option to DefinitelyTyped?

Hello @wat_01 ,

Thank you for sending the repo over.
It seems like DefinitelyTyped has type definitions up to Auth0js 9.14 and no captcha options in CrossOriginLoginOptions which explains the type error you received.

To add Bot Detection Captcha, you need to use version 9.16 or higher of the auth0.js library. You can also refer to the flow limitations for Bot Protection.

Would it possible for you to customise Login Page from the Dashboard? Navigate to Branding > Universal Login > scroll down to Advanced Options > Select Classic > Login Tab > Tick Customise Login > from dropdown, select Custom Login Form. You will be able to configure your captcha from there.

Thanks!

1 Like

@wayne.lim
Thanks for the reply!
So I am going to send myself a PR to add the captcha option, is that ok?

Just add the captcha option to the following.

Currently, I am using the following version.

@types/auth0-js: ^9.14.7
auth0-js: ^9.20.1

I am curious about one more point. Why is there no notation about the captcha option here?
https://auth0.com/docs/libraries/auth0js#webauth-login-

Hi,
you can extend CrossOriginLoginOptions by adding missing ‘captcha’ parameter:

and pass the object of new type to login() function:

Thanks