Google reCaptcha V2 Dark Theme

Knowledge Solutions
, , , , ,
1

Problem statement

We use the Classic Universal Login with Auth0.js and want to render a Google reCaptcha V2 with a dark theme.

Troubleshooting

This is not possible yet as the only options we accept are lang and template:

Solution

Workaround 1: Clone Auth0.js code, update and host it yourself:

Workaround 2 (hacky): Update the Login template.

...
<div class="captcha-container form-group" style="display:none"></div>
<div class="captcha-container2 form-group"></div>
...
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>;
<script src="https://www.google.com/recaptcha/api.js"></script>;
...
var captcha = webAuth.renderCaptcha(
    document.querySelector('.captcha-container')
);
var captchaResponse;
    var verifyCallback = function(response) {
    captchaResponse = response;
};
var captcha = grecaptcha.render(document.querySelector('.captcha-container2'), {
    'sitekey' : '<site key that matches key in the Bot Protection Config>',
    'callback': verifyCallback,
    'theme' : 'dark'
});
...
webAuth.login({
     realm: databaseConnection,
     username: username,
     password: password,
     captcha: captchaResponse
}
...