Laravel Login with Inertia, CSRF Token not updated

Hi Community,

It seems something weird happened in my recent Laravel, Vuejs, Inertiajs app,

I change some part of laravel default authentication it works ok for register, login and ... beside of default login.vue page, I need a modal for login, so users logged in via modal in some pages, I create that modal in vue and handle the request send and response receive from backend via axios, when ever the user logged in or logged out on session regeneration, I update the meta tag of header for csrf via javascript and any other form submit or request while user logged in from modal is ok,

but when I try to login via the default Login.vue page that sends request via inertiajs form it didn't updates the csrf token meta tag, and on any form submit or even logout I face 419 error,

these are two methods in LoginController

this method used by inertia form post

public function store(LoginRequest $request): RedirectResponse
{
    $request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended(route('home', absolute: false));
}

this method used by authentication modal and axios

public function storeJson(LoginRequest $request): JsonResponse
{
    $request->authenticate();

    $request->session()->regenerate();

    return response()->json([
        'user' => Auth::user(),
        'token' => csrf_token()
    ], 200);
}

and this is how I update the csrf meta tag and axios csrf when json response came from storeJson method

function submitJSON async () {
if (form.processing)
    return

form.processing = true

await axios
    .post(route('api.login'), form.data())
    .then(function (response) {
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = response.data.token
        document.querySelector('meta[name="csrf-token"]').setAttribute('content', response.data.token);
    })
    .catch(function (error) {
        console.log(error)
    })
    .finally(function () {
        form.processing = false
    })

hope anyone with good experience helps about this problem

Regards

LaryAI

1 year ago

Level 58

The issue you're experiencing is related to the CSRF token not being updated when using the Inertia.js form submission, which leads to a 419 error on subsequent requests. This happens because the CSRF token is regenerated on session regeneration, but the Inertia.js form does not automatically update the CSRF token in the meta tag.

Here's a solution to ensure the CSRF token is updated correctly:

Update the CSRF Token in the Inertia Response:

When you regenerate the session in your store method, you need to ensure that the new CSRF token is sent back to the client. You can do this by including the CSRF token in the Inertia response.

Modify your store method to include the CSRF token in the response:
```
public function store(LoginRequest $request): RedirectResponse
{
    $request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended(route('home', absolute: false))
        ->with(['csrf_token' => csrf_token()]);
}
```

Update the CSRF Token on the Client Side:

On the client side, you need to listen for the Inertia response and update the CSRF token in the meta tag. You can do this by using an Inertia event listener.

In your main JavaScript file where you initialize Inertia, add an event listener for the success event:

import { Inertia } from '@inertiajs/inertia';

Inertia.on('success', (event) => {
    if (event.detail.page.props.csrf_token) {
        const newToken = event.detail.page.props.csrf_token;
        document.querySelector('meta[name="csrf-token"]').setAttribute('content', newToken);
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = newToken;
    }
});

Ensure Axios Uses the Updated CSRF Token:

Make sure that Axios is configured to use the CSRF token from the meta tag. This is typically done in your main JavaScript file:
```
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
```

By following these steps, you ensure that the CSRF token is updated both in the meta tag and in Axios headers whenever the session is regenerated, preventing the 419 error on subsequent requests.

Please or to participate in this conversation.