How can I get new CSRF token in LARAVEL by using ajax

Question

I have created a form which is having a lot of fields and user can create an unlimited field in it. If a user spends more time on it CSRF token get expires and when he clicks on the submit LARAVEL return the error CSRF token mismatch. So how can I get new CSRF token by using ajax call so I can update the CSRF on a regular time of interval? I can not refresh or reload the form.

Answer 1

Just add this to your script

<script type="text/javascript">
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
</script>

And make sure you have added token to your meta tag like below.

<meta name="_token" content="{!! csrf_token() !!}" />

I hope this will work for you.

Link https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token

If you still found the same issue then please review these pieces of stuff

1. Handling expired token in Laravel

2. https://laracasts.com/discuss/channels/laravel/csrf-token-mismatch-error-on-session-timeout-form?page=1

And Make sure you take a look at all answers, not only checked one

Answer 2

Update; Although below answers what was asked for, but:

• All pages of session share the exact same CSRF-token (at least in Laravel),
• Hence if one browser-tab creates a new token,
• All other tabs suddenly have an invalid-token !!

Old answer

By using this code you can get a new token after login by using the regenerate() method and returning a new csrf_token() in the response.

Your Controller inside the function:

public function refreshToken(Request $request)
{
     session()->regenerate();
     return response()->json([
        "token"=>csrf_token()],
      200);

}

JavaScript:

$.ajax({
    url: "{{url('refresh-token')}}",
    type: 'get',
    dataType: 'json',
    success: function (result) {
        $('meta[name="csrf-token"]').attr('content', result.token);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': result.token
            }
        });
    },
    error: function (xhr, status, error) {
        console.log(xhr);
    }
});