how to login after get key google recaptchaV3

Question

I´m traying to do logging in my web with ajax. But i need generated google key when i do click in login, and before to do login. I have this function:

$('#main-login-form').on('submit', function(e){
        renewKeyRecaptcha();
        //e.preventDefault();
        

        let key = $("#recaptchaResponse").val();
        console.log(key);

        if(key != null || key != ""){
        
            var $this = $(this);

            $(this).find('input').removeClass('is-invalid');
            $(this).find('.error').html('');
    
            var data = $this.serializeArray();
            data.push({name: 'currentName', value: config.url.currentName});


            $.ajax({
                type: $this.attr('method'),
                url: $this.attr('action'),
                data: data,
                dataType: $this.data('type'),
                success: function (response) {
                    if(response.success) {
                        $(location).attr('href', response.redirect);
                    }
                    console.log(response);
                },
                error: function (jqXHR) {
                    var response = JSON.parse(jqXHR.responseText);
                    
                    if (response.errors.password) {
                        $($this).find('input[name="password"]').addClass('is-invalid');
                        $($this).find('.password-error').html(response.errors.password);
                    } else if (response.errors.email) {
                        $($this).find('input[name="email"]').addClass('is-invalid');
                        $($this).find('.email-error').html(response.errors.email);
                    } else if (response.errors.gRecaptchaResponse) {
                        $($this).find('input[name="g-recaptcha-response"]').addClass('is-invalid');
                        $($this).find('.g-recaptcha-response-error').html(response.errors.gRecaptchaResponse);
                    }
                }
            });
        }
    });

this function call to renewKeyRecaptcha(); that generated key, but i need to do click login twice and before i´m login... i need to do once click in login and generate key and login... But i can´t. I don´t know if i´m doing well or i would do to another way.

My function that generate key:

function renewKeyRecaptcha(){
        // add key google to input
        var key = config.url.recaptchaGoogle;
        grecaptcha.ready(function() {
            grecaptcha.execute(key, {action: 'login'}).then(function(token) {
                $("#recaptchaResponse").val(token);
                $("#recaptchaResponseRegister").val(token);
            });
        }); 
    }

this function run ok.

Thanks for help.

Answer 1

I resolve my question with:

$("#submitLogin").on("click", function(e){
        renewKeyRecaptcha();
        e.preventDefault();
        setTimeout(function(){
            $(this).find('input').removeClass('is-invalid');
            $(this).find('.error').html('');

            $this = $('#main-login-form');

            var data = $this.serializeArray();
            data.push({name: 'currentName', value: config.url.currentName});

        
            $.ajax({
                type: $this.attr('method'),
                url: $this.attr('action'),
                data: data,
                dataType: $this.data('type'),
                success: function (response) {
                    if(response.success) {
                        $(location).attr('href', response.redirect);
                    }
                    console.log(response);
                },
                error: function (jqXHR) {
                    var response = JSON.parse(jqXHR.responseText);
                    
                    if (response.errors.password) {
                        $($this).find('input[name="password"]').addClass('is-invalid');
                        $($this).find('.password-error').html(response.errors.password);
                    } else if (response.errors.email) {
                        $($this).find('input[name="email"]').addClass('is-invalid');
                        $($this).find('.email-error').html(response.errors.email);
                    } else if (response.errors.gRecaptchaResponse) {
                        $($this).find('input[name="g-recaptcha-response"]').addClass('is-invalid');
                        $($this).find('.g-recaptcha-response-error').html(response.errors.gRecaptchaResponse);
                    }
                }
            });
        }, 3000);