Add CSRF token refresh on Login view to prevent CSRF token mismatch

resources/js/views/auth/Login.vue

@@ -51,6 +51,7 @@
                 }),
                 isBusy: false,
                 showWebauthn: this.$root.appSettings.useWebauthnAsDefault || this.$root.appSettings.useWebauthnOnly,
+                csrfRefresher: null,
             }
         },
 
@@ -60,6 +61,10 @@
             }
         },
 
+        mounted: function() {
+            this.csrfRefresher = setInterval(this.refreshToken, 300000); // 5 min
+        },
+
         methods : {
             /**
              * Sign in using the login/password form
@@ -128,6 +133,10 @@
 
                 this.isBusy = false
             },
+
+            refreshToken(){
+                this.axios.get('/refresh-csrf')
+            }
         },
 
         beforeRouteEnter (to, from, next) {
@@ -159,7 +168,7 @@
             this.$notify({
                 clean: true
             })
-            
+            clearInterval(this.csrfRefresher);
             next()
         }
     }

routes/web.php

@@ -55,6 +55,10 @@ Route::group(['middleware' => ['behind-auth', 'rejectIfReverseProxy']], function
     Route::delete('webauthn/credentials/{credential}', [WebAuthnManageController::class, 'delete'])->name('webauthn.credentials.delete');
 });
 
+Route::get('refresh-csrf', function(){
+    return csrf_token();
+});
+
 /**
  * Route for the main landing view
  */