CSRF Token mismatch

The issue you're facing might be due to the way you're setting the X-XSRF-TOKEN in your axios instance.

In your axios setup, you have withXSRFToken: true, but axios does not have a withXSRFToken option. Instead, axios has an xsrfCookieName option that defines the name of the cookie to use as a value for X-XSRF-TOKEN.

You should set xsrfCookieName to 'XSRF-TOKEN' and xsrfHeaderName to 'X-XSRF-TOKEN' in your axios instance. Here's how you can do it:

const axios = Axios.create({
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
  withCredentials: true,
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
});

This tells axios to read the CSRF token from the XSRF-TOKEN cookie and set it as the X-XSRF-TOKEN header in the request.

Also, make sure that the XSRF-TOKEN cookie is being set correctly in the /csrf-cookie endpoint response, and that it's being sent with the request. You can check this in your browser's developer tools.

If you're still facing issues, you might want to check your Laravel CSRF middleware and make sure it's configured correctly.

@fakeman2332 The POST request fails with a CSRF token error, indicating a mismatch between the token in the request header and the one in the session. Axios Configuration: The withXSRFToken property may not be standard for Axios. Instead, focus on xsrfCookieName and xsrfHeaderName. Middleware Debugging: The tokensMatch method in the Laravel middleware reveals a mismatch, with the log showing match = and has header = true.

1. Axios Setup

        const axios = Axios.create({
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
          },
          withCredentials: true,
          xsrfCookieName: 'XSRF-TOKEN',
          xsrfHeaderName: 'X-XSRF-TOKEN',
        });

Consider Alternative Approach: If withXSRFToken is necessary for your Axios version, manually set the header from the cookie:

const csrfToken = Cookies.get('XSRF-TOKEN');
await axios.get(RETRIEVE_XSRF_TOKEN_URI); // Ensure this call actually sets the cookie
await axios.post(API_BASE_URI + '/discord/unlink', {}, {
  headers: {
    'X-XSRF-TOKEN': csrfToken,
  },
});

1. Laravel Middleware:

    -Debugging:
   
    -- Log the actual values of $request->session()->token() and $token in the tokensMatch method to inspect their contents.
    -- Check for potential modifications to the token in other middleware or filters.
   
    - Token Generation: Ensure Laravel generates the CSRF token correctly and stores it in the session.
    - Middleware Configuration: Verify that the CSRF middleware is applied to the appropriate routes in app/Http/Kernel.php.
   

2. Cookie Handling: - Cookie Domain: Ensure the SESSION_DOMAIN setting in Laravel encompasses both the frontend and backend domains. - Cookie Availability: Confirm that the XSRF-TOKEN cookie is accessible to both the frontend and backend applications. - Cookie Lifetime: Consider adjusting the cookie's lifetime if it expires too quickly.

3. CORS Configuration: - Double-Check: Review your CORS configuration to ensure it allows the necessary headers and origins.

Troubleshooting Steps:

1) Implement the suggested Axios configuration.
2) Inspect the token values in the Laravel middleware.
3) Verify cookie handling and CORS settings.
4) If the issue persists, provide more details about your environment (Axios and Laravel versions, specific code snippets, etc.) for further assistance.

The csrf token will change frequently. Make sure you are using the most recent token at each request