Automatically logout the user

Dash Python
1

Hi,

How to log the user out when fulfill the scenario below:

  1. Inactive user

    • user inactive 1 hours > system show the inform logout’s message > user no response to the message within 1 minute > auto log user out

    • user inactive 1 hours > system show the inform logout’s message > user response to the message within 1 minute > no log user out


  1. Multiple tab in same/different browser for the same access

    • user inactive 1 hours > system show the inform logout’s message in all the tabs > user no response to the message within 1 minute > auto log user out for all the tabs

    • user inactive 1 hours > system show the inform logout’s message in all the tabs > user response to the message within 1 minute > no log user out


  1. Close tab

  • multiple tabs:

    • close one of the tab, will no auto log the user out
    • but if the user close all the tab, and no open or re-access the website within 2 minute, auto log the user out

  • one tab only:

    • close the tab and no open or re-access the website within 2 minute, auto log the user out




Below is the code that in my current version:

server.py

@server.route('/logout', methods=['GET'])
def logout():
    # Clear the user's session to log them out
    session.clear()
    # Redirect to the login page (or any other page you prefer)
    return redirect('/login')

function.js

document.addEventListener('DOMContentLoaded', function() {
    // Track user activity
    let lastActivityTimestamp = Date.now();

    function trackActivity() {
        lastActivityTimestamp = Date.now();
    }

    // Check activity periodically
    const checkActivityInterval = 30000; // (30 second for testing) 1 minute 
    const logoutThreshold = 30000; //  (30 second for testing)  1 hour
    let logoutTimeout;
    let modalVisible = false;

    function checkActivity() {
        const currentTime = Date.now();
        const timeSinceLastActivity = currentTime - lastActivityTimestamp;

        if (timeSinceLastActivity > logoutThreshold && !modalVisible) {
            const customMessage = "Your custom inactivity message goes here.";
            const confirmation = confirm(customMessage);


            // Display the custom modal
            const customModal = document.getElementById("customModal");
            customModal.style.display = "block";
            modalVisible = true;

            // Set a timeout for 1 minute to automatically log out if the user doesn't respond
            setTimeout(function() {
                // Automatically log the user out if they don't respond within 1 minute
                logoutUser();
            }, 30000); //  (30 second for testing)  1 minute in milliseconds
        }

        // Continue checking
        logoutTimeout = setTimeout(checkActivity, checkActivityInterval);
    }


    function continueLogin() {
        // Close the custom modal
        const customModal = document.getElementById("customModal");
        customModal.style.display = "none";
        modalVisible = false;

        // Reset the logout timeout
        clearTimeout(logoutTimeout);
    }

    function logoutUser() {
        // Perform the logout action (e.g., redirect to a logout page)
        window.location.href = "/logout"; 
        

    }



    // Initialize the checkActivity function on page load
    window.addEventListener('load', function() {
        // Start checking for inactivity
        logoutTimeout = setTimeout(checkActivity, checkActivityInterval);

        // Track user activity on various events
        window.addEventListener('mousemove', trackActivity);
        window.addEventListener('keydown', trackActivity);
        // Add more event listeners as needed for your application.
    })

})
2

That is a laundry list of requirements not to mention test cases. I might recommend starting with something simple like the first bullet for #1. There was a thread sometime ago on various ways people were doing this here.

I might also recommend taking a look at perhaps using Flask Login to get started and see where this takes you.

1 Like