idle-vue plugin for idle state issue - vue.js

Question

I am using idle-vue plugin to see if any logged-in user is inactive for more than 10 minutes and if yes then logged them out after displaying a pop-up message.
I have followed this https://medium.com/js-dojo/how-to-set-timer-idle-in-vue-1f4b57beb886 site to implement the code. But here I want to let user to decide whether he wants to continue the session or to logout from active session. and I want that option on idle-dialog page. But as soon as the popup displays and I move cursor to click the option, the popup disappears as the idleVue value becomes false because I as a user has made any activity.
Can anyone please suggest how to achieve this functionality with idle-vue plugin or do I need to use any other plugin?

Answer 1

The idleness of this plugin will break when you do any activity as the mouse moves, keys down, mouse down, and touches start. So as the popup will close when you try to move the mouse.
Reversing the logic can help here.
For example, do not open the popup when the idle time reaches but open it when the user makes any activity after an inactive period.
In another word, do not open the popup instantly after idle time expires but open it when the user comes after long inactivity. In that way, the popup will be visible always and the user will come to know that he has been idle for so long, and now he can make a choice to log out or continue the session.
idle-vue library has two hooks, onIdle and onActive. You can use onActive hook to open the popup.
onActive() {
// Open the dialog when the user becomes active after an inactive period.
this.idle_dialog = true;
},
Now, you can allow users to choose options from that dialog whether to log out or to continue.

Answer 2

Using VueUse's useIdle (with Swal alerts - but can be done with other components). The alert shows up a few minutes before logging you out so you have time to react;
<script setup lang="ts">
import Swal from "sweetalert2";
import { useIdle, useTimestamp, watchThrottled } from "#vueuse/core";
...
const EXTEND_MESSAGE_TIME = 60 * 13; //13 minutes
const IDLE_TIMEOUT = 60 * 15; //15 minutes
const now = useTimestamp();
const { idle, lastActive } = useIdle(IDLE_TIMEOUT);
const authStore = useAuthStore();
const router = useRouter();
const idleAlertShowing = ref<boolean>(false);
let idleTimePassed, idleTimeLeft;
const idledFor = computed(() => {
return Math.floor((now.value - lastActive.value) / 1000);
});
const formatTime = (time: number) => {
const minutes = Math.floor(time / 60);
const seconds = time - minutes * 60;
return `${minutes > 0 ? `${minutes} minutes and ` : ""}${seconds} second${
seconds > 1 ? "s" : ""
}`;
};
...
watchThrottled(
idledFor,
(newValue) => {
if (newValue === EXTEND_MESSAGE_TIME) {
Swal.fire({
html: `You have been inactive for <span id='swal-idle-time-passed'>${formatTime(
newValue
)}</span> and you will be timed out in <span id='swal-idle-time-left'>${formatTime(
IDLE_TIMEOUT - newValue
)}</span>.`,
showCancelButton: false,
showConfirmButton: false
});
idleAlertShowing.value = true;
idleTimePassed = document.querySelector("#swal-idle-time-passed");
idleTimeLeft = document.querySelector("#swal-idle-time-left");
} else if (newValue >= IDLE_TIMEOUT) {
authStore.logout();
router.push({ name: "sign-in" });
if (Swal.isVisible()) {
idleAlertShowing.value = false;
Swal.close();
}
} else if (newValue > EXTEND_MESSAGE_TIME && idle.value === true) {
if (idleTimePassed && idleTimeLeft) {
idleTimePassed.innerText = formatTime(newValue);
idleTimeLeft.innerText = formatTime(IDLE_TIMEOUT - newValue);
}
} else if (newValue <= 0) {
if (idleAlertShowing.value === true && Swal.isVisible()) {
Swal.close();
}
}
},
{ throttle: 500 }
);