add proper error handling for expired CSRF Token

app/Exceptions/Handler.php

@@ -5,6 +5,8 @@ declare(strict_types=1);
 namespace App\Exceptions;
 
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Illuminate\Http\RedirectResponse;
+use Symfony\Component\HttpFoundation\Response;
 use Throwable;
 
 class Handler extends ExceptionHandler
@@ -29,4 +31,17 @@ class Handler extends ExceptionHandler
             //
         });
     }
+
+    public function render($request, Throwable $e): Response|RedirectResponse
+    {
+        $response = parent::render($request, $e);
+
+        if ($response->getStatusCode() === 419) {
+            return back()->with([
+                'message' => 'The page expired, please try again.',
+            ]);
+        }
+
+        return $response;
+    }
 }

app/Http/Middleware/HandleInertiaRequests.php

@@ -40,6 +40,9 @@ class HandleInertiaRequests extends Middleware
     {
         return array_merge(parent::share($request), [
             'has_billing_extension' => Module::has('Billing'),
+            'flash' => [
+                'message' => fn () => $request->session()->get('message'),
+            ],
         ]);
     }
 }

resources/js/Pages/Auth/Login.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import AuthenticationCard from '@/Components/AuthenticationCard.vue';
 import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
 import InputError from '@/Components/InputError.vue';
@@ -26,6 +26,12 @@ const submit = () => {
         onFinish: () => form.reset('password'),
     });
 };
+
+const page = usePage<{
+    flash: {
+        message: string;
+    };
+}>();
 </script>
 
 <template>
@@ -47,6 +53,11 @@ const submit = () => {
         <div v-if="status" class="mb-4 font-medium text-sm text-green-400">
             {{ status }}
         </div>
+        <div
+            v-if="page.props.flash?.message"
+            class="bg-red-400 text-black text-center w-full px-3 py-1 mb-4 rounded-lg">
+            {{ page.props.flash?.message }}
+        </div>
 
         <form @submit.prevent="submit">
             <div>

resources/js/Pages/Auth/Register.vue

@@ -27,6 +27,9 @@ const page = usePage<{
     jetstream: {
         hasTermsAndPrivacyPolicyFeature: boolean;
     };
+    flash: {
+        message: string;
+    };
 }>();
 </script>
 
@@ -47,6 +50,12 @@ const page = usePage<{
             </Link>
         </template>
 
+        <div
+            v-if="page.props.flash?.message"
+            class="bg-red-400 text-black text-center w-full px-3 py-1 mb-4 rounded-lg">
+            {{ page.props.flash?.message }}
+        </div>
+
         <form @submit.prevent="submit">
             <div>
                 <InputLabel for="name" value="Name" />