How to implement logout functionality when clicked on browser window or tab close in JavaScript?
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
javascript reactjs tabs window onbeforeunload
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
add a comment |
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
javascript reactjs tabs window onbeforeunload
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
1
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
1
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41
add a comment |
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
javascript reactjs tabs window onbeforeunload
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
javascript reactjs tabs window onbeforeunload
javascript reactjs tabs window onbeforeunload
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
asked May 18 '18 at 13:05
UIguy89UIguy89
5810
5810
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
1
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
1
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41
add a comment |
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
1
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
1
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
1
1
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
1
1
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41
add a comment |
1 Answer
1
active
oldest
votes
Try beforeunload event listner
window.addEventListener("beforeunload", function (e)
//Log Out Call
But it will not work in all browsers.
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50412010%2fhow-to-implement-logout-functionality-when-clicked-on-browser-window-or-tab-clos%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try beforeunload event listner
window.addEventListener("beforeunload", function (e)
//Log Out Call
But it will not work in all browsers.
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
add a comment |
Try beforeunload event listner
window.addEventListener("beforeunload", function (e)
//Log Out Call
But it will not work in all browsers.
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
add a comment |
Try beforeunload event listner
window.addEventListener("beforeunload", function (e)
//Log Out Call
But it will not work in all browsers.
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
Try beforeunload event listner
window.addEventListener("beforeunload", function (e)
//Log Out Call
But it will not work in all browsers.
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
answered May 18 '18 at 14:02
Mithun G SMithun G S
234210
234210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50412010%2fhow-to-implement-logout-functionality-when-clicked-on-browser-window-or-tab-clos%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
SessionStorage is an alternative to localStorage developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
– Björn
May 18 '18 at 13:08
1
Check out this article, it discusses calling a function on window close. stackoverflow.com/questions/13443503/…
– Bob van 't Padje
May 18 '18 at 13:11
Thanks for the comment, but all of them talk about using 'beforeunload', but this event fires when you hit the Refresh button on the browser. I don't want to logout a user when they refresh the page. That's not good user experience.
– UIguy89
May 18 '18 at 17:39
1
@Björn Thanks for the comment, but I am using local storage because as per our app requirement, we need to allow a user to sign in on multiple tabs and once the user logs out in one tab, he should be automatically logged out of the other tabs. So, we used local storage instead of session storage to have access to JWT tokens across browser tabs.
– UIguy89
May 18 '18 at 17:41