Laravel Sanctum suddenly token mismatch, only works after clearing browser cookies

I am experiencing a weird problem with Laravel Sanctum. I have configured it as instructed in the documentation and it works without problems.

But sometimes it starts to send 419 errors when trying to fetch sanctum-protected routes and only works after clearing browser cookies or resetting app key (php artisan key:generate).

It has only happened to me in a local environment with a local domain (webapp.test routed by hosts file and served by Apache webserver) but I’m worried that this happens on a production server.

My .env file includes the next config which I read are required to make it work in local environment:

SESSION_DOMAIN=webapp.test
SANCTUM_STATEFUL_DOMAINS=webapp.test

Also, the session driver and lifetime are the default:
SESSION_DRIVER=file
SESSION_LIFETIME=120

My config/cors.php file:
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => false,

    'max_age' => true,

    'supports_credentials' => true,

];

My bootstrap.js file:
window.axios = require("axios");

window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
window.axios.defaults.withCredentials = true;

I have an api.js file which instantiates axios:
import axios from "axios";

export const api = axios.create({
  baseURL: `${baseUrl}/api`,
  headers: {
    "Content-Type": "application/json",
  },
});

Then when I have to call my api endpoints I just import this api, like:
import { api } from "api";

...

api.post(`/cart/add`,data).then(()=>{}).catch(err=>{console.error(err});

As I said before, the webapp works perfectly but suddenly after a few days it blocks all requests and sends 419 token mismatch error (even when using private mode) until the browser cookies are cleared or app key is reset.

Is there anything wrong in my setup or do you think is just a local behavior?

Any advice would help.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The problem is that your token expires after a certain time, as specified in your configuration. This can also happen with the productive version.

I assume that you notice the problem locally rather because you are testing your application and the token is expiring at that very moment.

I would set the token expiration time to one hour and renew the access token in the background of your SPA every 50 minutes. This prevents a user who is currently using the website from being logged out.

If the user comes back to the site after a certain amount of time and has an expired token in their cookies and your route sends back the code 419, you can respond to the error via axios interceptor and remove the expired token from the browser cookies and show the user the login window.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x