Merge pull request #1788 from automatisch/AUT-867

fix: introduce fix for token management

packages/web/src/components/AccountDropdownMenu/index.jsx

@@ -15,7 +15,7 @@ function AccountDropdownMenu(props) {
   const navigate = useNavigate();
   const { open, onClose, anchorEl, id } = props;
   const logout = async () => {
-    authentication.updateToken('');
+    authentication.removeToken();
     await apolloClient.clearStore();
     onClose();
     navigate(URLS.LOGIN);

packages/web/src/components/DeleteAccountDialog/index.ee.jsx

@@ -22,7 +22,7 @@ function DeleteAccountDialog(props) {
 
   const handleConfirm = React.useCallback(async () => {
     await deleteCurrentUser();
-    authentication.updateToken('');
+    authentication.removeToken();
     await apolloClient.clearStore();
     navigate(URLS.LOGIN);
   }, [deleteCurrentUser, currentUser]);

packages/web/src/components/LoginForm/index.jsx

@@ -12,17 +12,20 @@ import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 function LoginForm() {
   const isCloud = useCloud();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const authentication = useAuthentication();
   const [login, { loading }] = useMutation(LOGIN);
+
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
       navigate(URLS.DASHBOARD);
     }
   }, [authentication.isAuthenticated]);
+
   const handleSubmit = async (values) => {
     const { data } = await login({
       variables: {
@@ -32,6 +35,7 @@ function LoginForm() {
     const { token } = data.login;
     authentication.updateToken(token);
   };
+
   return (
     <Paper sx={{ px: 2, py: 4 }}>
       <Typography
@@ -107,4 +111,5 @@ function LoginForm() {
     </Paper>
   );
 }
+
 export default LoginForm;

packages/web/src/components/QueryClientProvider/index.jsx

@@ -25,27 +25,9 @@ const queryClient = new QueryClient({
 });
 
 export default function AutomatischQueryClientProvider({ children }) {
-  const { token, initialize } = useAuthentication();
-
-  React.useEffect(
-    function updateTokenInHttpClient() {
-      if (!initialize) return;
-
-      if (token) {
-        api.defaults.headers.Authorization = token;
-      } else {
-        delete api.defaults.headers.Authorization;
-      }
-
-      initialize();
-    },
-    [initialize, token],
-  );
-
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

packages/web/src/contexts/Authentication.jsx

@@ -1,31 +1,34 @@
 import * as React from 'react';
-import { getItem, setItem } from 'helpers/storage';
+import { getItem, removeItem, setItem } from 'helpers/storage';
+import api from 'helpers/api.js';
 
 export const AuthenticationContext = React.createContext({
   token: null,
-  updateToken: () => void 0,
+  updateToken: () => {},
+  removeToken: () => {},
   isAuthenticated: false,
-  initialize: () => void 0,
 });
 
 export const AuthenticationProvider = (props) => {
   const { children } = props;
-  const [isInitialized, setInitialized] = React.useState(false);
   const [token, setToken] = React.useState(() => getItem('token'));
 
   const value = React.useMemo(() => {
     return {
       token,
       updateToken: (newToken) => {
+        api.defaults.headers.Authorization = newToken;
         setToken(newToken);
         setItem('token', newToken);
       },
-      isAuthenticated: Boolean(token) && isInitialized,
-      initialize: () => {
-        setInitialized(true);
+      removeToken: () => {
+        delete api.defaults.headers.Authorization;
+        setToken(null);
+        removeItem('token');
       },
+      isAuthenticated: Boolean(token),
     };
-  }, [token, isInitialized]);
+  }, [token]);
 
   return (
     <AuthenticationContext.Provider value={value}>

packages/web/src/index.jsx

@@ -24,7 +24,6 @@ root.render(
               <ThemeProvider>
                 <MetadataProvider>
                   {routes}
-
                   <LiveChat />
                 </MetadataProvider>
               </ThemeProvider>