useSessionCheck.ts Vue composable

.env

# .env

SESSION_LIFETIME=2

AuthenticatedLayout.vue

<script lang="ts" setup>

const props = defineProps<BasePageProps>()
useSessionCheck(props)

</script>

HandleInertiaRequests.php

public function share(Request $request): array
    {
        return [
            ...parent::share($request),
            'auth' => [
                'session' => [
                    'expires' => now()->addMinutes(config('session.lifetime'))->setTimezone('Europe/London')->toDateTimeString(),
                ],
            ],
        ];
    }

useSessionCheck.ts

// useSessionCheck composable:

import type { BasePageProps } from '@/types'
import { toast } from '@/components/ui/toast'
import { router } from '@inertiajs/vue3'
import { useDocumentVisibility } from '@vueuse/core'
import { watch } from 'vue'


/*
 * If the user returns to the tab after a period of inactivity,
 * check if the session has expired. If so, reload page
 * (which will redirect to login page with intended
 * url stored in session).
 */
export function useSessionCheck(props: BasePageProps) {
  const expires = props.auth.session.expires
  const expiresDate = new Date(expires)
  const visibility = useDocumentVisibility()

  watch(visibility, (visible) => {
    if (visible === 'visible') {
      const now = new Date()
      if (expiresDate < now) {
        toast({ title: 'Session expired', description: 'Please login again' })
        router.reload()
      }
    }
  })
}