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.
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
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>
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).
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>
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
Hi,
There was a change on how the logout function works.
To let your users log out using a button (in my example it’s a CTA block button, with a redirection to the homepage) you should add this script in the header custom code of the page settings where the CTA block is:
Hi @matthieu_chateau, thank you for sharing the updated post. However, I believe many of us are experiencing issues with “document.cookie.” When we use this code, the page do not render and remain completely blank. I have a custom sign-out button that should sign out the user when clicked, but the code mentioned above is causing problems. I’ve checked my browser and cookie settings, and I’ve also tried it on multiple browsers, so there shouldn’t be any issues there. Any idea what to do?
All works fine on my end and it might come from a lot of factors, regardless document.cookie which is pretty straightforward and common way to perform it
Hi @artur@matthieu_chateau Thank you for your insights, but I believe the issue wasn’t with the code, as I successfully used the same code in another application. I think the issue people are facing is related to analytics scripts used in their app. I found that analytics scripts (e.g., Google Analytics, Hotjar, etc.) can sometimes interfere with global variables like document.cookie or localStorage. These scripts might asynchronously overwrite or conflict with these variables, or impose restrictions that block the execution of custom code attempting to access or modify them. I believe this could pose a challenge during app development, as it may prevent users from using custom code feature+analytics. I would appreciate any information on potential workarounds for this issue.
Can you add me into your app as collaborator in studio and DM me the link to studio app URL and I will check it… It should be simple and should not cause issues… unless you have cookie blocker…
Hi all, just fyi, I did not manage to fix this either (I was looking to sign out users as part of the registration journey and then send them a magic link as a means to validate their email - essentially trying to workaround the limitations with sign up/email verification journey mentioned in other threads). I read that new sign up blocks will be released (soon hopefully?) so waiting for that. But if you find a solution @artur@RohitC , please share Thanks again for looking into it.
@LeFred and @RohitC if I can help pls DM me with details add me into app as collaborator and I will fix and test the codes you have and share back here for others too
