diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx index 0be901e4c465efe2ae5b9e93f049b463c5215b76..0482d78b3af84a448fc63b8206f4b36d7ea6bd20 100644 --- a/src/components/AuthUser/SignInForm/SignInForm.tsx +++ b/src/components/AuthUser/SignInForm/SignInForm.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext } from 'react'; +import React, { FC, useContext, useEffect, useState } from 'react'; import axios from 'axios'; import { SubmitHandler, useForm } from 'react-hook-form'; import { Button } from '@material-ui/core'; @@ -8,9 +8,29 @@ import { AuthRoutes } from 'api/routes'; import { AuthContext } from 'components/AuthUser/AuthContext'; import { useStyles } from './useStyles'; +const configDjangoCookieName = (): void => { + axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'; + axios.defaults.xsrfCookieName = 'csrftoken'; + axios.defaults.withCredentials = true; +}; + export const SignInForm: FC = () => { + const [isCookieFetched, setisCookieFetched] = useState<string>(''); + + configDjangoCookieName(); + useEffect(() => { + const fetchCookie = async (): Promise<unknown> => { + const response = await axios('/api/web/csrf'); + setisCookieFetched(response.data.token); + return null; + }; + if (!isCookieFetched) fetchCookie(); + }, [isCookieFetched]); + + console.log(isCookieFetched); + const history = useHistory(); - const { role, setRole } = useContext(AuthContext); + const { setRole } = useContext(AuthContext); interface FormData { username: string; @@ -33,7 +53,7 @@ export const SignInForm: FC = () => { { username: values.username, password: values.password, - csrfmiddlewaretoken: sessionStorage.getItem('X-CSRFTOKEN'), + csrfmiddlewaretoken: isCookieFetched, }, { headers: { @@ -42,7 +62,6 @@ export const SignInForm: FC = () => { }, ) .then((response) => { - console.log(response); if (response.data.status === 'fail') { setError('username', { type: 'server', @@ -53,7 +72,6 @@ export const SignInForm: FC = () => { message: 'Something went wrong with password', }); } else if (response.data.status === 'success') { - localStorage.setItem('ROLE', response.data.role); setRole(response.data.role); history.replace(AuthRoutes.dashboard); }