How to fix 419 page expire error when logging in in laravel PWA

Question

I am developing laravel PWA with workbox and whenever I login for the first time it works well, but when I'm logging in for the second time, I got this 419 Page Expired error.

Here is my code in my service worker:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);


const precaching = workbox.precaching;
const routing = workbox.routing;
const strategies = workbox.strategies;
const expiration = workbox.expiration;
const cacheableResponse = workbox.cacheableResponse;

precaching.precacheAndRoute([
  {url: '/login', revision: '383676'},
  {url: '/fallback.blade.php', revision: null},
  {url: '/css/auth/users.css', revision: null},
  {url: 'css/resident/resident-layout.css', revision: null},
  {url: 'images/welcome-bg.png', revision: null},
  {url: 'js/resident/resident-sidebar.js', revision: null},
  {url: 'js/app.js', revision: null},
]);

routing.registerRoute(
  ({url}) => 
    url.origin === 'https://fonts.googleapis.com' || 
    url.origin === 'https://cdn.jsdelivr.net' ||
    url.origin === 'https://code.jquery.com' ||
    url.origin === 'https://kit.fontawesome.com' ||
    url.origin === 'https://fonts.gstatic.com',
  new strategies.StaleWhileRevalidate({
    cacheName: 'links',
  })
);

routing.registerRoute(
  ({request}) => request.destination === 'image',
  new strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
      }),
    ]
  })
);

routing.registerRoute(
   ({request}) => request.method === 'GET',
   new strategies.StaleWhileRevalidate({
     cacheName: 'responses',
     plugins: [
       new cacheableResponse.CacheableResponsePlugin({
         statuses: [0, 200],
       }),
     new expiration.ExpirationPlugin({
         maxEntries: 50,
         maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
       }),
     ]
   }),
 );

I am stuck in here and I don't know how to fix it.

Answer 1

I get it now why I am getting that error, it is because I am precaching the login form page when the service worker is installing {url: '/login', revision: '383676'} so when I login for the first time It works fine, but when I logged out it will regenerated a new token while redirecting to the login page that I have precache, so when I tried to login again it will try to fetch the request from the cache which have the expired token and it will throw an 419 status error. I fixed this problem by removing the login form page {url: '/login', revision: '383676'} in the precache.