-1

I want to remove the user Authentication when the tab that had my Application closed in any browser. And when the user loads the Application again in the new tab they should not see any of their details until logging in again. Is there any way to implement this concept in React?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Dante1021
  • 304
  • 7
  • 20

2 Answers2

2

If you are storing in LocalStorage, replace it to SessionStorage.

Oleg
  • 3,580
  • 1
  • 7
  • 12
  • Could you please explain a bit detail like, 1. how to detect the tab getting closed? 2. how to store in session storage? – Dante1021 Apr 30 '22 at 08:12
  • https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage – Oleg Apr 30 '22 at 08:14
  • Thanks for the source, I just have a query, for example, if I open my application and logged in and in another tab if I open the application again without closing the existing tab, now how this clearance will work? – Dante1021 Apr 30 '22 at 10:09
  • 1
    A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage – Oleg Apr 30 '22 at 10:19
  • Thanks for sharing the vital information, now i got some clearance over these storages :) – Dante1021 Apr 30 '22 at 10:28
0

Add this to App.js

For functional component :

useEffect(() => {  
    return () => {
      localStorage.clear()
    }
  })

for Class Component :

componentWillUnmount() {
   localStorage.clear()
  }
Khalfoun Mohamed El Mehdi
  • 314
  • 1
  • 12