Invalid reCAPTCHA client id: 1 - Multiple Captcha render, something wrong with my code?

Question

I have 2 modal that each have a grecaptcha. I load the script once the first modal is opened and render the captcha for that specific modal afterwards. This is working as expected. But once i submit the form with the captcha, i get the following error:

Uncaught Error: Invalid reCAPTCHA client id: 1

This is the JS code of the captcha render

var grecaptcha_contact = 0;
    var grecaptcha_newsletter = 0;
    function renderCaptcha(grecaptchatype) {
        // Render Google Captcha
        function renderCall(grecaptchatype) {
            var captcha = grecaptcha.render(grecaptchatype, {
                'sitekey': 'SITEKEY_censored',
                'theme': 'light'
            });
        }

        // Check if Google Captcha already rendered
        if(grecaptchatype === 'g-recaptcha-newsletter'){
            if(grecaptcha_newsletter !== 0){
                return false;
            }
            else{
                // Render Google Captcha
                renderCall(grecaptchatype);
                grecaptcha_newsletter++;
            }
        }
        else if(grecaptchatype === 'g-recaptcha-contact'){
            if(grecaptcha_contact !== 0){
                return false;
            }
            else{
                // Render Google Captcha
                renderCall(grecaptchatype);
                grecaptcha_contact++;
            }
        }
    }

    // load google captcha script on show modal newsletter & contact us
    $('#newsletterModal').on('shown.bs.modal', function () {
        if(window.grecaptcha) {
            renderCaptcha('g-recaptcha-newsletter');
        }
        else{
            var attempts = 0;
            $.getScript('https://www.google.com/recaptcha/api.js')
                .done(function() {
                    var setIntervalID = setInterval(function() {
                        if (window.grecaptcha) {
                            clearInterval(setIntervalID);
                            renderCaptcha('g-recaptcha-newsletter');
                            return false;
                        }
                        else if (attempts >= 100) {
                            clearInterval(setIntervalID);
                            return false;
                        }
                        attempts++;
                    }, 100);
                });
        }
    });
    $('#contactModal').on('shown.bs.modal', function () {
        if(window.grecaptcha) {
            renderCaptcha('g-recaptcha-contact');
        }
        else{
            var attempts = 0;
            $.getScript('https://www.google.com/recaptcha/api.js')
                .done(function() {
                    var setIntervalID = setInterval(function() {
                        if (window.grecaptcha) {
                            clearInterval(setIntervalID);
                            renderCaptcha('g-recaptcha-contact');
                            return false;
                        }
                        else if (attempts >= 100) {
                            clearInterval(setIntervalID);
                            return false;
                        }
                        attempts++;
                    }, 100);
                });
        }
    });

This is the Newsletter Form:

<button aria-label="Newsletter" type="button" class="newsletterbutton" data-toggle="modal"
                        data-target="#newsletterModal">@lang('footer.blade.newsletter')</button>
                    <div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="newsletterModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div class="modal-title" id="newsletterModalLabel">@lang('footer.blade.receive_newsletter')</div>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                {{ Form::open(['id' => 'newsletterform']) }}
                                {{ csrf_field() }}
                                <div class="modal-body">
                                    <div class="alert"></div>
                                    <div class="form-group">
                                        {{ Form::label('newsletter_email', __('footer.blade.contact.email'), ['class' => 'col-form-label']) }}
                                        {{ Form::email('newsletter_email', '', ['required', 'class' => 'form-control']) }}
                                    </div>
                                    <div class="row form-group">
                                        <div class="col-sm-12 acceptrules">
                                            {{ Form::checkbox('acceptrules', 'value', null, ['id' => 'acceptrules', 'required']) }}
                                            <label for="acceptrules" class="control-label">
                                                @lang('add_app.blade.acceptrules')<a class="privacypolicy_link" target="_blank" href="{{ route('privacy-policy') }}">@lang('add_app.blade.acceptrules_link')</a>@lang('add_app.blade.acceptrules_link2')
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group g-recaptcha-div">
                                        <div class="g-recaptcha-newsletter g-recaptcha-count" id="g-recaptcha-newsletter"></div>
                                        @if($errors->has('g-recaptcha-response'))
                                            <span>{{$errors->first('g-recaptcha-response')}}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="modal-footer modal-footer-recaptcha">
                                    {{ Form::submit(__('footer.blade.apply_newsletter'), ['class' => 'btn btn-primary']) }}
                                    {{ Form::button(__('footer.blade.close_newsletter'), ['class' => 'btn btn-secondary', 'data-dismiss' => 'modal']) }}
                                </div>
                                {{ Form::close() }}
                            </div>
                        </div>
                    </div>
                

I'm not sure but i think the captcha was working before. I'm not sure if i changed something in the code which broke it or something else that broke it (server/laravel configs). Someone has an idea where to go from here?

Answer 1

I checked on my php code and the error appears here in the captcha.php:

    public function passes($attribute, $value)
{
    $client = new Client();
    $response = $client->post('https://www.google.com/recaptcha/api/siteverify',
        [
            'form_params' => [
                'secret' => env('CAPTCHA_SECRET', false),
                'remoteip' => request()->getClientIp(),
                'response' => $value
            ]
        ]
    );
    $body = json_decode((string)$response->getBody());
    return $body->success;
}

The getbody() response if success=false The $attribute is g-recaptcha-response and the $value is a long key probably the public key encrypted.

The secret form_params seems false all the time. I'm not sure why is that, my env file has the captcha_secret set. I tried it with my secret key inside this function instead which did it. So there seems to be something wrong with my env secret key call. Maybe a caching problem or so, will try to figure it out myself from here.