chinlung · May 31, 2022 06:37 · Aug 21, 2020 · Jul 16, 2020 · Jul 16, 2020 · Jul 16, 2020
diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -5,7 +5,7 @@
     }
     // if you are on livewire > 1.3.1 and want to avoid the default error alert
     // https://github.com/livewire/livewire/pull/1146
-    /*
+
     window.livewire.onError(statusCode => {
         if (statusCode === 419) {
             return

diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -13,7 +13,7 @@ function clearTimer() {
 
 function handleSessionWarning() {
     alert('{{ $message }}')
-    {{-- checkAuth() // runs automatically on window.focus after clicking the alert. Uncomment if you want to handleSessionWarning in a different way. --}}
+    checkAuth() // remove if you want to run this automatically on window.focus after clicking the alert, see end of script.
 }
 
 function startSessionTimer() {
@@ -42,7 +42,8 @@ function checkAuth() {
 setInterval(checkAuth, 1000 * 60 * {{ $session - 2 }})
 @else
 window.sessionTimerPermanent = false
-document.addEventListener('turbolinks:load', startSessionTimer)
+// document.addEventListener('turbolinks:load', startSessionTimer) //uncomment if you use turbolinks
+document.addEventListener('DOMContentLoaded', startSessionTimer) //remove if you use tubolinks
 @endif
-window.addEventListener('focus', checkAuth)
+// window.addEventListener('focus', checkAuth) //uncomment this if you remove checkAuth() above, observe that this makes an extra request on each window.focus
 </script>
diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -3,7 +3,8 @@
     if (!window.sessionTimerPermanent && window.Livewire) {
         window.livewire.hook('afterDomUpdate', startSessionTimer)
     }
-    //if you are on livewire > 1.3.1 and want to avoid the default error alert
+    // if you are on livewire > 1.3.1 and want to avoid the default error alert
+    // https://github.com/livewire/livewire/pull/1146
     /*
     window.livewire.onError(statusCode => {
         if (statusCode === 419) {

diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -4,9 +4,11 @@
         window.livewire.hook('afterDomUpdate', startSessionTimer)
     }
     //if you are on livewire > 1.3.1 and want to avoid the default error alert
+    /*
     window.livewire.onError(statusCode => {
         if (statusCode === 419) {
             return
         }
     })
+    */
 </script>
diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -3,7 +3,7 @@
     if (!window.sessionTimerPermanent && window.Livewire) {
         window.livewire.hook('afterDomUpdate', startSessionTimer)
     }
-    //if you are on livewire > 1.3.1 avoid the default error alert
+    //if you are on livewire > 1.3.1 and want to avoid the default error alert
     window.livewire.onError(statusCode => {
         if (statusCode === 419) {
             return

diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -3,4 +3,10 @@
     if (!window.sessionTimerPermanent && window.Livewire) {
         window.livewire.hook('afterDomUpdate', startSessionTimer)
     }
+    //if you are on livewire > 1.3.1 avoid the default error alert
+    window.livewire.onError(statusCode => {
+        if (statusCode === 419) {
+            return
+        }
+    })
 </script>
diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -1,6 +1,7 @@
 @props([ 'permanent' => false, 'expiresIn' => 10 ])
 @php
     $session = config('session.lifetime');
+    $message = trans('messages.session_expiration_warning', ['expires' => $expiresIn]); //example: 'Your session will expire in :expires minutes, due to inactivity! Click OK to avoid being logged out.'
 @endphp
 <script>
 let sessionTimer = null
@@ -11,7 +12,7 @@ function clearTimer() {
 }
 
 function handleSessionWarning() {
-    alert('Your session will expire in {{ $expiresIn }} minutes, due to inactivity! Click OK to avoid being logged out.')
+    alert('{{ $message }}')
     {{-- checkAuth() // runs automatically on window.focus after clicking the alert. Uncomment if you want to handleSessionWarning in a different way. --}}
 }
 

diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -1,13 +1,6 @@
 {{-- You do not need to add this component if you are using the permanent option in the head component --}}
 <script>
-if (!window.sessionTimerPermanent) {
-    if (window.Turbolinks && window.Livewire) {
-        document.addEventListener('turbolinks:load', () => {
-            window.livewire.hook('afterDomUpdate', startSessionTimer)
-        }, {once: true})
-    }
-    if (!window.Turbolinks && window.Livewire) {
+    if (!window.sessionTimerPermanent && window.Livewire) {
         window.livewire.hook('afterDomUpdate', startSessionTimer)
     }
-}
 </script>
diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -41,9 +41,7 @@ function checkAuth() {
 setInterval(checkAuth, 1000 * 60 * {{ $session - 2 }})
 @else
 window.sessionTimerPermanent = false
-if (window.Turbolinks) {
-    document.addEventListener('turbolinks:load', startSessionTimer)
-}
+document.addEventListener('turbolinks:load', startSessionTimer)
 @endif
 window.addEventListener('focus', checkAuth)
 </script>
diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -1,8 +1,13 @@
 {{-- You do not need to add this component if you are using the permanent option in the head component --}}
 <script>
-    if(!window.sessionTimerPermanent) {
+if (!window.sessionTimerPermanent) {
+    if (window.Turbolinks && window.Livewire) {
         document.addEventListener('turbolinks:load', () => {
-            window.livewire.hook('afterDomUpdate', startSessionTimer);
+            window.livewire.hook('afterDomUpdate', startSessionTimer)
         }, {once: true})
     }
+    if (!window.Turbolinks && window.Livewire) {
+        window.livewire.hook('afterDomUpdate', startSessionTimer)
+    }
+}
 </script>
diff --git a/app.blade.php b/app.blade.php
@@ -1,8 +0,0 @@
-//in the head
-<x-session-timeout-alert-head :permanent="false" />
-</head>
-
-//after livewire scripts
-@livewireScripts
-<x-session-timeout-alert-after-livewire-scripts />
-</body>

diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -1,44 +1,49 @@
-@props([ 'permanent' => false ])
-@php $session = config('session.lifetime'); @endphp
+@props([ 'permanent' => false, 'expiresIn' => 10 ])
+@php
+    $session = config('session.lifetime');
+@endphp
 <script>
-    let sessionTimer = null
+let sessionTimer = null
 
-    function clearTimer() {
-        clearTimeout(sessionTimer)
-        sessionTimer = null
-    }
+function clearTimer() {
+    clearTimeout(sessionTimer)
+    sessionTimer = null
+}
 
-    function handleSessionWarning() {
-        alert('Your session will expire in 10 minutes due to inactivity! Click "OK" to avoid being logged out')
-        {{-- checkAuth() // runs automatically on window.focus after clicking the alert. Uncomment if you want to handleSessionWarning in a different way. --}}
-    }
+function handleSessionWarning() {
+    alert('Your session will expire in {{ $expiresIn }} minutes, due to inactivity! Click OK to avoid being logged out.')
+    {{-- checkAuth() // runs automatically on window.focus after clicking the alert. Uncomment if you want to handleSessionWarning in a different way. --}}
+}
 
-    function startSessionTimer() {
-        clearTimer()
-        sessionTimer = setTimeout(handleSessionWarning, 1000 * 60 * {{ $session - 10 }}) //Change this if your session is to short.
-    }
+function startSessionTimer() {
+    clearTimer()
+    sessionTimer = setTimeout(handleSessionWarning, 1000 * 60 * {{ $session - $expiresIn }})
+}
 
-    function checkAuth() {
-        if (document.hasFocus()) { //remove this if you want to keep the session alive even if the window is out of focus
-            // console.info('fetching')
-            fetch('/check-auth')
-            .then(response => response.text())
-            .then(auth => {
-                if (auth !== 'true') {
-                    window.location.href = "{{ route('login') }}"
-                }
-                @if(!$permanent)
-                startSessionTimer()
-                @endif
-            })
-        }
+function checkAuth() {
+    if (document.hasFocus()) { //remove this if you want to keep the session alive even if the window is out of focus
+        // console.info('fetching')
+        fetch('/check-auth')
+        .then(response => response.text())
+        .then(auth => {
+            if (auth !== 'true') {
+                window.location.href = "{{ route('login') }}"
+            }
+            @if(!$permanent)
+            startSessionTimer()
+            @endif
+        })
     }
-    @if($permanent)
-        window.sessionTimerPermanent  = true;
-        setInterval(checkAuth, 1000 * 60 * {{ $session - 2 }})
-    @else
-        window.sessionTimerPermanent  = false;
-    document.addEventListener('turbolinks:load', startSessionTimer);
-    @endif
-    window.addEventListener('focus', checkAuth);
+}
+
+@if($permanent)
+window.sessionTimerPermanent = true
+setInterval(checkAuth, 1000 * 60 * {{ $session - 2 }})
+@else
+window.sessionTimerPermanent = false
+if (window.Turbolinks) {
+    document.addEventListener('turbolinks:load', startSessionTimer)
+}
+@endif
+window.addEventListener('focus', checkAuth)
 </script>
diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -15,7 +15,7 @@ function handleSessionWarning() {
 
     function startSessionTimer() {
         clearTimer()
-        sessionTimer = setTimeout(handleSessionWarning, 1000 * 60 * {{ $session - 10 }}) //20 minutes idle, change to match your session settings.
+        sessionTimer = setTimeout(handleSessionWarning, 1000 * 60 * {{ $session - 10 }}) //Change this if your session is to short.
     }
 
     function checkAuth() {

diff --git a/app.blade.php b/app.blade.php
@@ -1,5 +1,5 @@
 //in the head
-<x-session-timeout-alert-head />
+<x-session-timeout-alert-head :permanent="false" />
 </head>
 
 //after livewire scripts

diff --git a/app.blade.php b/app.blade.php
@@ -0,0 +1,8 @@
+//in the head
+<x-session-timeout-alert-head />
+</head>
+
+//after livewire scripts
+@livewireScripts
+<x-session-timeout-alert-after-livewire-scripts />
+</body>
diff --git a/session-timeout-alert-after-livewire-scripts.blade.php b/session-timeout-alert-after-livewire-scripts.blade.php
@@ -0,0 +1,8 @@
+{{-- You do not need to add this component if you are using the permanent option in the head component --}}
+<script>
+    if(!window.sessionTimerPermanent) {
+        document.addEventListener('turbolinks:load', () => {
+            window.livewire.hook('afterDomUpdate', startSessionTimer);
+        }, {once: true})
+    }
+</script>
diff --git a/session-timeout-alert-head.blade.php b/session-timeout-alert-head.blade.php
@@ -0,0 +1,44 @@
+@props([ 'permanent' => false ])
+@php $session = config('session.lifetime'); @endphp
+<script>
+    let sessionTimer = null
+
+    function clearTimer() {
+        clearTimeout(sessionTimer)
+        sessionTimer = null
+    }
+
+    function handleSessionWarning() {
+        alert('Your session will expire in 10 minutes due to inactivity! Click "OK" to avoid being logged out')
+        {{-- checkAuth() // runs automatically on window.focus after clicking the alert. Uncomment if you want to handleSessionWarning in a different way. --}}
+    }
+
+    function startSessionTimer() {
+        clearTimer()
+        sessionTimer = setTimeout(handleSessionWarning, 1000 * 60 * {{ $session - 10 }}) //20 minutes idle, change to match your session settings.
+    }
+
+    function checkAuth() {
+        if (document.hasFocus()) { //remove this if you want to keep the session alive even if the window is out of focus
+            // console.info('fetching')
+            fetch('/check-auth')
+            .then(response => response.text())
+            .then(auth => {
+                if (auth !== 'true') {
+                    window.location.href = "{{ route('login') }}"
+                }
+                @if(!$permanent)
+                startSessionTimer()
+                @endif
+            })
+        }
+    }
+    @if($permanent)
+        window.sessionTimerPermanent  = true;
+        setInterval(checkAuth, 1000 * 60 * {{ $session - 2 }})
+    @else
+        window.sessionTimerPermanent  = false;
+    document.addEventListener('turbolinks:load', startSessionTimer);
+    @endif
+    window.addEventListener('focus', checkAuth);
+</script>
diff --git a/web.php b/web.php
@@ -0,0 +1 @@
+Route::get('check-auth', fn () => response(auth()->check() ? 'true' : 'false'))->middleware('auth');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Route::get('check-auth', fn () => response(auth()->check() ? 'true' : 'false'))->middleware('auth');