Move back cookie fetch to SignInForm. Role fetched and saved into a Context. Small refactorings.

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { FC } 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';
 import { InputField } from 'components/AuthUser/InputField/InputField';
 import { useHistory } from 'react-router-dom';
 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]);
   const history = useHistory();
+  const { setRole } = useContext(AuthContext);
 
   interface FormData {
     username: string;
@@ -31,7 +50,7 @@ export const SignInForm: FC = () => {
         {
           username: values.username,
           password: values.password,
-          csrfmiddlewaretoken: sessionStorage.getItem('X-CSRFTOKEN'),
+          csrfmiddlewaretoken: isCookieFetched,
         },
         {
           headers: {
@@ -50,6 +69,7 @@ export const SignInForm: FC = () => {
             message: 'Something went wrong with password',
           });
         } else if (response.data.status === 'success') {
+          setRole(response.data.role);
           history.replace(AuthRoutes.dashboard);
         }
       });