fix: change from sessionStorage to localStorage as cookie may persist…

… beyond single session
isomerpages · Feb 18, 2021 · b2d3679 · b2d3679
1 parent 9108ce7
commit b2d3679
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -46,6 +46,7 @@ axios.defaults.withCredentials = true
 // Constants
 const { REACT_APP_BACKEND_URL: BACKEND_URL } = process.env
 const LOCAL_STORAGE_AUTH_STATE = 'isomercms_auth'
+const userIdKey = "userId"
 
 const ToastCloseButton = ({ closeToast }) => (
   <span style={{
@@ -105,7 +106,7 @@ function App() {
       alert('Warning: your token has expired. Isomer will log you out now.')
       const logout = async () =>  {
         console.log('Logging out...')
-        sessionStorage.clear()
+        localStorage.removeItem(userIdKey)
         await axios.get(`${BACKEND_URL}/auth/logout`)
         setLogoutState()
       }

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -28,7 +28,7 @@ const Header = ({
   const clearCookie = async () => {
     try {
       // Call the logout endpoint in the API server to clear the browser cookie
-      sessionStorage.clear()
+      localStorage.removeItem(userIdKey)
       await axios.get(`${BACKEND_URL}/auth/logout`)
       setShouldRedirect(true)
       setLogoutState()
@@ -72,8 +72,8 @@ const Header = ({
       </div>
       {/* Right section */}
       <div className={elementStyles.headerRight}>
-        <div className={elementStyles.info}>
-          Logged in as {sessionStorage.getItem(userIdKey)}
+        <div className={`${elementStyles.info} mr-3`}>
+          Logged in as @{localStorage.getItem(userIdKey)}
         </div>
         <button type="button" className={`${elementStyles.blue} float-right`} onClick={clearCookie}>
           Log Out

diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
@@ -46,7 +46,7 @@ const ProtectedRoute = ({ component: WrappedComponent, ...rest }) => {
                 if (rest.location.pathname === '/auth') {
                     const [ hash, userId ] = rest.location.hash.split('-')
                     if (hash === authContextString) {
-                        sessionStorage.setItem(userIdKey, userId)
+                        localStorage.setItem(userIdKey, userId)
                         return <WrappedComponent {...rest} {...props} isLoggedIn={isLoggedIn} />
                     }
                     return <Redirect to="/" />