Skip to content

Instantly share code, notes, and snippets.

@tanthammar

tanthammar/session-timeout-alert-after-livewire-scripts.blade.php

Last active November 23, 2023 11:50
Show Gist options
  • Save tanthammar/02c615e73022c44dda6533ed9416ac29 to your computer and use it in GitHub Desktop.
Save tanthammar/02c615e73022c44dda6533ed9416ac29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tanthammar revised this gist Aug 21, 2020. 2 changed files with 5 additions and 4 deletions.
    2 changes: 1 addition & 1 deletion session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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
    7 changes: 4 additions & 3 deletions session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  2. tanthammar revised this gist Jul 16, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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) {
  3. tanthammar revised this gist Jul 16, 2020. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  4. tanthammar revised this gist Jul 16, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  5. tanthammar revised this gist Jul 16, 2020. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  6. tanthammar revised this gist Jun 21, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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. --}}
    }
  7. tanthammar revised this gist Jun 21, 2020. 2 changed files with 2 additions and 11 deletions.
    9 changes: 1 addition & 8 deletions session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    4 changes: 1 addition & 3 deletions session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  8. tanthammar revised this gist Jun 21, 2020. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  9. tanthammar revised this gist Jun 21, 2020. 2 changed files with 42 additions and 45 deletions.
    8 changes: 0 additions & 8 deletions app.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    79 changes: 42 additions & 37 deletions session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  10. tanthammar revised this gist Jun 20, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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() {
  11. tanthammar revised this gist Jun 20, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion app.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    //in the head
    <x-session-timeout-alert-head />
    <x-session-timeout-alert-head :permanent="false" />
    </head>

    //after livewire scripts
  12. tanthammar created this gist Jun 20, 2020.
    8 changes: 8 additions & 0 deletions app.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    8 changes: 8 additions & 0 deletions session-timeout-alert-after-livewire-scripts.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    44 changes: 44 additions & 0 deletions session-timeout-alert-head.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    1 change: 1 addition & 0 deletions web.php
    View file
    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');