How to enable Google reCaptcha using auth0-lock in React

[jaymdev]

Hello,

I’m using auth0-lock since 5+ years in my web-app for authtication.

Now, I want to add Google reCaptcha support in login/signup.

I tried looking in many docs but not found any document that can help me in this.

Really appreciate the support if you can guide me on this.

Thank you

[rueben.tiow]

Hi @jaymdev,

Welcome to the Auth0 Community!

To enable the Google reCaptcha for your applications, you will need to enable Bot Detection. However, to do so, you must use the Universal Login.

(Reference: Bot Detection - Restrictions and Limitation)

Thanks,
Rueben

[jaymdev]

Hi @rueben.tiow
Thank you so much for the reply.

Yes, I’ve enabled the Bot Detection and added required thing in Google Re-Captcha.

But How can I add google re-Capatcha in auth0-lock ?

I don’t found any document that tells, what to modify in code to enable captcha in auth0-lock.

Here is my code snippet:

const lock = new Auth0Lock(
    process.env.AUTH0_CLIENT_ID,
    process.env.AUTH0_DOMAIN,
    {
      configurationBaseUrl: "https://cdn.auth0.com",
      autoclose: true,
      allowSignUp: true,
      avatar: null,
      closable: true,
      initialScreen: "login",
      auth: {
        sso: false,
        oidcConformant: false,
        responseType: "token id_token",
        redirect: false,
        redirectUrl: window.location.origin,
        params: {
          scope: "openid profile email user_metadata app_metadata picture"
        }
      },
      languageDictionary: {
        title: "Test Title"
      },
      theme: {
        logo: "LOGO_URL",
        primaryColor: "#00a857"
      },
    }
);

  const showLock = async () => {
    return new Promise((resolve, reject) => {
      lock.on("authenticated", (authResult: any) => {
        const { accessToken, idToken } = authResult
        lock.getUserInfo(accessToken, function (error: any, profile: any) {
          lock.hide()
          resolve({
            accessToken,
            idToken
          })
        })
      })
      lock.show()
    })
  }
  try {
    const lockResponse: any = await showLock();
  }

[rueben.tiow]

Hi @jaymdev,

Thanks for your update.

If you’re using embedded login with Auth0 lock.js, then the Google reCaptcha is not supported.

See the screenshot in my initial post.

You must use the Universal Login for Bot Detection to work.

Thanks,
Rueben