JS + PHP + AJAX google re-captcha v3 not refreshing token after form is submited

jquery
php
#1

Hi
I am making login script with ajax and php using re-captcha v3.

I made hidden field “token” in form and i am setting value of javascript token to that field on page load.

After form is submited it send data from ajax to php and validate token, return response works fine, but only once since it doesn’t refresh token after every response.

How can i reset token every time i get any response from php and set new token back to hidden field ?

Here is code:

<div id="message"></div>

<form id="login-form">
    <input type="hidden" name="action" value="1">
    <input type="hidden" name="token" value="" id="token">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button class="btn btn-primary btn-block">Login</button>
</form>

<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>
<script>
	grecaptcha.ready(function() {
		grecaptcha.execute('SITE_KEY', {action: 'homepage'}).then(function(token) {
			$('#token').val(token); // here i set value to hidden field
		});
	});
</script>

<script>
// submit form with ajax
$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'login-check.php',
            data: $('#login-form').serialize(),
            success: function(response) {
                if (response) {
                	$('div#message').html(msg);
                    if (response == '1') {
                    	$('div#message').html('Logged in');
                    }
                } else {
                    $('div#message').html('An error occured.');
                }
            },
            error: function() {
            	$('div#message').html('fail');
            }
        });
        return false;
    });
});
</script>

EDIT - SOLVED:

I wrapped code that is getting re-captcha in function getRecaptcha() then i am calling it on page load, on success and on failure. I don’t know if this is best or smartest way but it works.

If someone have better solution please post it here, thanks.

<script>
function getRecaptcha() {
	grecaptcha.ready(function() {
		grecaptcha.execute('SITE_KEY', {action: 'homepage'}).then(function(token) {
			$('#token').val(token); // here i set value to hidden field
		});
	});
}
</script>

<script>
// submit form with ajax
$(document).ready(function() {
    getRecaptcha(); // called here
    $('#login-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'login-check.php',
            data: $('#login-form').serialize(),
            success: function(response) {
                getRecaptcha(); // called here
                if (response) {
                	$('div#message').html(msg);
                    if (response == '1') {
                    	$('div#message').html('Logged in');
                    }
                } else {
                    $('div#message').html('An error occured.');
                }
            },
            error: function() {
                getRecaptcha(); // called here
            	$('div#message').html('fail');
            }
        });
        return false;
    });
});
</script>
#2
$('div#message')..html(msg);

Two points instead of single.

#3

Thanks i edited code but this wasn’t the issue only typo :slight_smile:

#4

I don’t know if this is normally behaviour or re-captcha that after i click many times on form submit that re-captcha is giving “failed” response, but as i know from previous re-captcha’s it need to open window with images after i submit form after 3-5 times. Am i wrong or something isn’t right in here ?