From 1c8d895c1ea034ef53099fe0fdaebbfe1d8845eb Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 2 May 2024 17:25:57 +0200
Subject: [PATCH] add proper error handling for expired CSRF Token

---
 app/Exceptions/Handler.php                    | 15 +++++++++++++++
 app/Http/Middleware/HandleInertiaRequests.php |  3 +++
 resources/js/Pages/Auth/Login.vue             | 13 ++++++++++++-
 resources/js/Pages/Auth/Register.vue          |  9 +++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/Exceptions/Handler.php b/app/Exceptions/Handler.php
index 27ecbaa3..2bdf8c0e 100644
--- a/app/Exceptions/Handler.php
+++ b/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;
+    }
 }
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 6c7087cf..84204c4b 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/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'),
+            ],
         ]);
     }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 72f5a02e..6279e453 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/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>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 40171a19..b18e6fed 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/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" />