Custom Code Guide: IT requests a log out of your users each time they leave their browser session or the app tab

Custom Coding
, ,
1

Hi all,

For some app types, still being logged in after you leave your browser session or quit the app tab will be considered as a security hazard by the IT team.

Here is the script to be inserted in the custom code header, at app level:

<script>
    function logout() {
        deleteCookie('jwtToken');
        console.log('Logout function called. Cookie deleted.');
        window.location.href = '/signin';
    }

    function deleteCookie(name) {
        document.cookie = name + "=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;SameSite=None; Secure";
        console.log(`Cookie ${name} deleted.`);
    }

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    window.addEventListener('load', function() {
        if (!sessionStorage.getItem('loggedOut')) {
            if (getCookie('jwtToken')) {
                logout();
            } else {
                console.log('User is already logged out.');
            }
            sessionStorage.setItem('loggedOut', 'true');
        } else {
            console.log('Session already marked as logged out.');
        }
    });
</script>

Update this line window.location.href = '/signin'; by changing /signin by the url path where the sign in page is.

This script will log out your users each time they leave their browser sessions or leave the app tab. When they will come back they will be logged out and redirected automatically to the sign in page.

Note that this feature will become a native Softr feature in some times.

Thanks

3 Likes
2

Thank you for this!!

1 Like
3

Hi @matthieu_chateau, many thanks for this above. I’m trying to logout my users when they click a specific button, have been trying various scripts including what you shared above but this line (or in fact any document.cookie instruction) seems to stop the page from working properly (in edge and chrome).

document.cookie = name + “=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;SameSite=None; Secure”;

Should this solution still work? Is there any other way to logout users (e.g. some end point)? The simpler the better :slight_smile:

Thanks again!

4

Hi,

Yes it still works.

There might be a conflict with your browser settings in relation with cookies, I can only see it.

Or, try it live (that might not work with the preview mode)

Here is a code to automatically log out a user when they click a cta button for example (a button in a cta block with Id cta2)
It is followed by a redirection to the homepage.

To be inserted in the header custom code at page level , where the cta button is.

<script>
window.addEventListener('block-loaded-cta2', () => {
    var logoutButton = document.querySelector('#cta2 .MuiButtonBase-root'); 

    if (logoutButton) {
        logoutButton.addEventListener('click', function(event) {
            event.preventDefault();

            logout();
            setTimeout(function() {
                window.location.href = '/';
            }, 200);
        });
    }

    function logout() {
        deleteCookie('jwtToken');
    }

    function deleteCookie(name) { 
        document.cookie = name + "=;path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC" + ";" + 'SameSite=None; Secure'; 
    }
});
</script>
5

Thanks Matthieu for the quick response.

I still have the same issue unfortunately, on the live site (different browsers, incl. mobile and incognito, header or footer custom code). The issue is just with document.cookie, the rest works fine. For instance just this stops my page from rendering and console stays blanks (but the page source is there).

<script>
    console.log('script loaded');
    document.cookie = “testCookie=testValue”;
</script>

If anyone has any idea, please let me know :slight_smile: Otherwise, I’ll find a way to workaround it…

6

You can do it without cookies like the code below.
Just to be clear for the cookie version: you don’t need to change anything related to the cookie part. It has to be exactly how I wrote it.
You also need to check the settings you have related to cookies, your antivirus policy concerning cookies.

Also, I don’t know if you exactly wrote this:

<script>
    console.log('script loaded');
    document.cookie = “testCookie=testValue”; // it should be "testCookie=testValue"
</script>

But it should not be curly quotation marks but straight quotation marks, curly quotation marks not being valid syntax.

So without cookie and with a cta button:

<script>
window.addEventListener('block-loaded-cta2', () => { // To be tested live, not in preview mode
    var logoutButton = document.querySelector('#cta2 .MuiButtonBase-root'); 

    if (logoutButton) {
        logoutButton.addEventListener('click', function(event) {
            event.preventDefault();

            logout();
            setTimeout(function() {
                window.location.href = '/';
            }, 200);
        });
    }

    function logout() {
        clearLocalStorage('jwtToken');
        console.log('Logout function called. Token deleted.');
    }

    function clearLocalStorage(name) {
        localStorage.removeItem(name);
        console.log(`LocalStorage item ${name} deleted.`);
    }
});
</script>
1 Like
7

Thanks again Matthieu! Sadly no success:

  • I still can’t get any script to run when I have the document.cookie statement (even with the correct quotation marks)
  • I can run your second script clearing local storage but it does not clear the storage and the user is not logged out. There must be something odd with cookie settings or antivirus as you say (I’m using iuubenda cookie solution btw).

Anyway, thanks again, I’ll do more research or will find another way :slight_smile: