react-google-recaptcha doesn't work when not accessing webpack-dev-server from localhost

[daviddelusenet]

react-google-recaptcha version: 2.0.1

I'm using webpack-dev-server where I'm setting the host key to 0.0.0.0 so that I can access my dev-server from other devices on the same wifi.

This means when I run my application it's exposed on http://0.0.0.0:8000. Here the reCAPTCHA doesn't work. No errors get thrown but I can't log in because the reCaptchaToken will forever be null. It also doesn't show the reCAPTCHA itself.

The same issue occurs when I try to login on any other machine which is on the same wifi as the machine where my dev server is running on. The only way when the reCAPTCHA does work is when I access my application from http://localhost:8000.

Is this a wrongly configured Webpack configuration or a bug? If you need any more information please let me know.

Webpack dev server configuration:

devServer: {
    compress: true,
    contentBase: distPath,
    disableHostCheck: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    hot: true,
    open: true,
    port: 8000,
    publicPath: '/',
},

[daviddelusenet]

Now it does throw an error:

So this only happens when trying to access the webpack-dev-server from a 0.0.0.0:8000 or from any other machine on the same wifi as the machine where my webpack-dev-server is running.

It doesn't happen on localhost or when I deploy an actual build to my test server.

[UseMuse]

@daviddelusenet This worked for me:

"With the following test keys, you will always get No CAPTCHA and all verification requests will pass.

Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

The reCAPTCHA widget will show a warning message to claim that it's only for testing purpose. Please do not use these keys for your production traffic."

Extracted from here: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do

const isLocalhost = Boolean(
    window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.0/8 are considered localhost for IPv4.
    window.location.hostname.match(
        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);
const siteKey= isLocalhost  ? `6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI` : {your_site_is_the_key_to_production}

on the server as well, for development 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe , or production any key

BR!