diff --git a/packages/web/src/components/AccountDropdownMenu/index.jsx b/packages/web/src/components/AccountDropdownMenu/index.jsx index a9d47670..74ad3e74 100644 --- a/packages/web/src/components/AccountDropdownMenu/index.jsx +++ b/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); diff --git a/packages/web/src/components/DeleteAccountDialog/index.ee.jsx b/packages/web/src/components/DeleteAccountDialog/index.ee.jsx index df095907..8d7cead4 100644 --- a/packages/web/src/components/DeleteAccountDialog/index.ee.jsx +++ b/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]); diff --git a/packages/web/src/components/LoginForm/index.jsx b/packages/web/src/components/LoginForm/index.jsx index 78ed92ba..6cf95fbc 100644 --- a/packages/web/src/components/LoginForm/index.jsx +++ b/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 ( ); } + export default LoginForm; diff --git a/packages/web/src/components/QueryClientProvider/index.jsx b/packages/web/src/components/QueryClientProvider/index.jsx index 1c913236..9fa3fb1e 100644 --- a/packages/web/src/components/QueryClientProvider/index.jsx +++ b/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 ( {children} - ); diff --git a/packages/web/src/contexts/Authentication.jsx b/packages/web/src/contexts/Authentication.jsx index 92dbb1b2..f4bd4a23 100644 --- a/packages/web/src/contexts/Authentication.jsx +++ b/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 ( diff --git a/packages/web/src/index.jsx b/packages/web/src/index.jsx index 2d5e77e3..2adda97e 100644 --- a/packages/web/src/index.jsx +++ b/packages/web/src/index.jsx @@ -24,7 +24,6 @@ root.render( {routes} -