logout

src/components/layout/Main.js

@@ -26,7 +26,8 @@ const useStyles = makeStyles(() => ({
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center"
+    justifyContent: "center",
+    alignItems: "center"
   }
 }));
 

src/features/login/components/LoginContainer.js

@@ -14,7 +14,7 @@ const LoginContainer = () => {
   const dispatchActions = useContext(ApplicationDispatchContext);
   const { error } = useToast();
   const { t } = useTranslation();
-  const { tokenIsValid } = useAuthorizationToken();
+  const { tokenIsValid, invalidateToken } = useAuthorizationToken();
 
   const handleChange = prop => event => {
     dispatchActions.onCredentialsChange(prop, event.target.value);
@@ -37,6 +37,7 @@ const LoginContainer = () => {
 
   const handleLogout = () => {
     invalidate();
+    invalidateToken();
   };
 
   return (

src/hooks/useAuthorizationToken.js

@@ -1,8 +1,12 @@
 import { useContext } from "react";
-import { ApplicationStateContext } from "../state/ApplicationContexts";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../state/ApplicationContexts";
 
 export const useAuthorizationToken = () => {
   const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
 
   const getToken = () => state.security.authorization.token;
   const validateToken = () => {
@@ -16,5 +20,10 @@ export const useAuthorizationToken = () => {
   };
 
   const tokenIsValid = validateToken();
-  return { getToken, validateToken, tokenIsValid };
+
+  const invalidateToken = () => {
+    dispatchActions.onAuthorizationTokenChange(null);
+  };
+
+  return { getToken, validateToken, tokenIsValid, invalidateToken };
 };