CODEWITHSUNDEEP
reactjsrecaptchareact-google-recaptcha
nickornotto
nickornotto

Reputation: 2156

React recaptcha google not showing at all

I have installed react-recaptcha-google and added to my app as per the example here: https://medium.com/codeep-io/how-to-use-google-recaptcha-with-react-38a5cd535e0d

Nothing is showing up though, no error, no nothing.

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import { ReCaptcha } from 'react-recaptcha-google';

class MyComponent extends Component {
    constructor(props, context) {
        super(props, context);

    componentDidMount() {
        this.getProducts();

        if (this.captchaDemo) { // <- this is getting skipped
            console.log("started, just a second...")
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    onLoadRecaptcha() {
        if (this.captchaDemo) {
            this.captchaDemo.reset();
            //this.captchaDemo.execute();
        }
    }

    verifyCallback(recaptchaToken) {
        // Here you will get the final recaptchaToken!!!  
        console.log(recaptchaToken, "<= your recaptcha token")

    render() {
        return (
            <div className="row">
                                    <ReCaptcha
                                        ref={(el) => { this.captchaDemo = el; }}
                                        size="normal"
                                        render="explicit"
                                        sitekey="our correct key"
                                        onloadCallback={this.onLoadRecaptcha}
                                        verifyCallback={this.verifyCallback}
                                    />

            </div>
        );
    }
}

ReactDOM.render(<MyComponent />, document.getElementById('myComponent'));

The condition in the componentDidMount() also is getting skipped.

I have run out of ideas what to do in order for it to work. Any suggestions?

I also tried:

Our key is correct 100% as we use it for other captchas (written in Razor) on the same site.

Upvotes: 6

Views: 13386

Answers (3)

Bdela
Bdela

Reputation: 131

I had a similar issue in nextjs13. In my case, I was using named import of recaptcha.

import { ReCAPTCHA } from 'react-google-recaptcha';

Switching to default export fixed it for me, such as

import ReCAPTCHA from 'react-google-recaptcha';

Upvotes: 12

Gaurish
Gaurish

Reputation: 11

Replace **<script src="https://www.google.com/recaptcha/api.js" async defer></script>**

with

**<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>**

  • After that, apply the same to everywhere else that uses "www.google.com/recaptcha/" on your site & don't change anything else.

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

Upvotes: 1

nickornotto
nickornotto

Reputation: 2156

Ive just figured it out - I was missing

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

on the page, added and the captcha shows up.

Upvotes: 4

Related Questions