CODEWITHSUNDEEP
reactjslocal-storagesession-storage
D M
D M

Reputation: 58

How to keep authentication token?

The React website has following requirements:

  1. Stay logged in when opening a page of the current website in new tab.
  2. Log out if browser is closed and reopened.
  3. Stay logged in on page refresh.
  4. IE11 support :(.

If I keep auth token in sessionStorage, it meets the 2 requirement but not the 1.
If I use localStorage - 1 but not 2.

If I use:

window.onunload = () => {
  localStorage.removeItem('authtoken');
};

it meets 1 and 2 conditions but it also clears storage when I refresh the page which shouldn't happen too!

This solution to check if the page is refreshing can't be used in IE11 https://stackoverflow.com/a/53307588/12994741

So how should I keep the auth token? Any way to make it? Maybe it's possible to prevent unload event on refreshing in React?

Upvotes: 2

Views: 338

Answers (1)

Adel Tahir
Adel Tahir

Reputation: 155

You can use session cookies.

  1. It keeps its value when you open a same website in different tabs.

  2. They are expired once the browser exits. https://stackoverflow.com/a/8894280/15881471

  3. It keeps its value on page refresh.

  4. It works for IE11, though there are some caveats. https://github.com/cmp-cc/vue-cookies/issues/29

Upvotes: 1

Related Questions