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
}
...