Normal v2 Recaptcha works perfectly, INVISIBLE does not work

[slidenerd]

Hi, first of all thank you for the wonderful library. I have a get login url, a post login url and the pug file that does the login. I followed instructions as mentioned. If I change my type to a normal recaptcha it works perfectly but an invisible one does not

Pug file

Get and POST login endpoints

The router

const Recaptcha = require("express-recaptcha").RecaptchaV2;
const recaptcha = new Recaptcha(process.env.RECAPTCHA_SITE_KEY_V2, process.env.RECAPTCHA_SECRET_KEY_V2, { size: "invisible" });

router.get("/", homeController.index);
router.get("/login", recaptcha.middleware.render, userController.getLogin);
router.post("/login", recaptcha.middleware.verify, userController.postLogin);

A little debugging has led me to the point where
g-recaptcha-response is empty string
{ error: 'invalid-input-response', data: null }

Any suggestions are appreciated

[slidenerd]

Update
Here is the exact same setup WORKING PERFECTLY with normal v2 Recaptcha

The pug file

GET and POST endpoints

the router, (removed the size attribute)

const Recaptcha = require("express-recaptcha").RecaptchaV2;
const recaptcha = new Recaptcha(process.env.RECAPTCHA_SITE_KEY_V2, process.env.RECAPTCHA_SECRET_KEY_V2);

router.get("/", homeController.index);
router.get("/login", recaptcha.middleware.render, userController.getLogin);
router.post("/login", recaptcha.middleware.verify, userController.postLogin);

Both run the same domains on recaptcha admin console and I have cross checked the keys atleast a dozen times

• if the user does not select the g-recaptcha-response I get empty
• If the user does select the captcha, I get the g-recaptcha-response with some long key
  but the invisible one always returns empty

[pdupavillon]

Hey @slidenerd,
Thanks for your message!
To have an invisible Recaptcha you have 2 choices:

1. Using RecaptchaV2 + size = invisible
2. Using RecaptchaV3 (which is rendering an invisible recaptcha by default)

With RecaptchaV2

like you mentioned, you need to set the size to invisible but also you need to pass an onload callback.

const recaptcha = new Recaptcha(RECAPTCHA_SITE_KEY_V2, RECAPTCHA_SECRET_KEY_V2, {
  size: 'invisible',
  onload: 'onLoad',
});

then in your pug file, your onLoad callback will call grecaptcha.execute

function onLoad(){
 grecaptcha.execute();
}

you also have the possibily to use the the callback property to automatically bind the challenge
here are the explanations:
google recaptcha doc

[slidenerd]

Thank you very much, seems to work!