diff --git a/src/App.tsx b/src/App.tsx index 9c2a453fd1e9c58ddff27b485f7116ce0fe0bf86..9b5684311a82f9b5b3ee307ed30993802bc9a5f5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,6 @@ import { getRole } from 'api/getRole'; * Entry point of the app. */ export const App: FC = () => { - let isMounted = true; configDjangoCookieName(); const [role, setRole] = useState(''); const [isAuth, setIsAuth] = useState<boolean>(false); @@ -31,16 +30,10 @@ export const App: FC = () => { const value = { role, setRole, isAuth, setIsAuth }; useEffect(() => { - if (!isCookieFetched && isMounted) fetchCookie(setIsCookieFetched); - // Initialize asking the server if this session is already logged in. - isAuthenticated(setIsAuth); + isAuthenticated().then((state) => setIsAuth(state)); getRole(setRole); - - return () => { - isMounted = false; - }; - }, [isCookieFetched]); + }, [isAuth, role]); return ( <ThemeProvider theme={muiTheme}> diff --git a/src/api/isAuthenticated.ts b/src/api/isAuthenticated.ts index 656a7ccd371031f8bd79a8b8bb7458abfa4ecb12..1195e01ccfab49f4cc2581c749a61733a6d5e27a 100644 --- a/src/api/isAuthenticated.ts +++ b/src/api/isAuthenticated.ts @@ -1,10 +1,6 @@ import axios from 'axios'; -export const isAuthenticated = async ( - setIsAuth: React.Dispatch<React.SetStateAction<boolean>>, -): Promise<void> => { - const response = await axios('/api/web/login/is_authenticated').then( +export const isAuthenticated = async (): Promise<boolean> => + axios('/api/web/login/is_authenticated').then( (res) => res.data.is_authenticated, ); - setIsAuth(response); -}; diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx index de15be65417186219acd40a3c04547f2192774ba..2ac92e9eee0da95266504a5407a1b3a57978b565 100644 --- a/src/components/AuthUser/SignInForm/SignInForm.tsx +++ b/src/components/AuthUser/SignInForm/SignInForm.tsx @@ -6,6 +6,7 @@ import { InputField } from 'components/AuthUser/InputField/InputField'; import { useHistory } from 'react-router-dom'; import { AuthRoutes, NonAuthRoutes } from 'api/routes'; import { AuthContext } from 'components/AuthUser/AuthContext'; +import { fetchCookie } from 'api/fetchCookie'; import { useStyles } from './useStyles'; import { CredentialsType } from './CredentialsType'; @@ -17,6 +18,16 @@ const defaultValues = { export const SignInForm: FC = () => { const history = useHistory(); const { setRole, setIsAuth } = useContext(AuthContext); + const [cookie, setCookie] = useState<string>(''); + + useEffect(() => { + let isMounted = true; + if (isMounted) fetchCookie(setCookie); + + return () => { + isMounted = false; + }; + }, [fetchCookie]); const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({ defaultValues, @@ -31,7 +42,7 @@ export const SignInForm: FC = () => { { username: values.username, password: values.password, - csrfmiddlewaretoken: localStorage.getItem('COOKIE'), + csrfmiddlewaretoken: cookie, }, { headers: { diff --git a/src/components/RestrictedRoute/RestrictedRoute.tsx b/src/components/RestrictedRoute/RestrictedRoute.tsx index 3e3b5ee1c752966c303c2b87a5a33f3ab41c5ca8..24fbaa42e2c208fc7152ec9a739f98768d1a996c 100644 --- a/src/components/RestrictedRoute/RestrictedRoute.tsx +++ b/src/components/RestrictedRoute/RestrictedRoute.tsx @@ -23,9 +23,21 @@ type Props = { export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => { const [authUser, setAuthUser] = useState<boolean>(false); const [isLoading, setLoading] = useState<boolean>(false); + useEffect(() => { - isAuthenticated(setAuthUser).then(() => setLoading(true)); - }); + let isMounted = true; + + isAuthenticated().then((state) => { + if (isMounted) { + setAuthUser(state); + setLoading(true); + } + }); + + return () => { + isMounted = false; + }; + }, [isLoading]); return !isLoading ? ( <CircularProgress />