Auto redirect to login page when auth session expires

If you want a dynamic behavior, you need to work with Livewire or VueJS and events.

The browser has no idea that it has been logged out, so you will need to have some Javascript that sends a request to the backend after a certain time to check. But be aware that every time you send a request, you will extend the session

Here is a solution for users using Inertia Vue with laravel:

# HandleInertiaRequests.php middleware:

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

// 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()
      }
    }
  })
}

// AuthenticatedLayout.vue

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

# .env

SESSION_LIFETIME=2

To test it out, I simply reduced my session lifetime to 2 mins, left the tab and returned 3 mins later, to be redirected to the login page with a friendly toast.