Set csrf name for django

src/components/AuthUser/AuthUser.tsx

@@ -3,12 +3,18 @@ import axios from 'axios';
 import Container from '@material-ui/core/Container';
 import { SignInForm } from './SignInForm/SignInForm';
 
+const configDjangoCookieName = (): void => {
+  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
+  axios.defaults.xsrfCookieName = 'csrftoken';
+  axios.defaults.withCredentials = true;
+};
+
 export const AuthUser: FC = () => {
+  configDjangoCookieName();
   useEffect(() => {
     axios
       .get('api/web/csrf')
       .then((response) => {
-        // Check this https://stackoverflow.com/questions/39254562/csrf-with-django-reactredux-using-axios
         axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
       })
       .catch((error) => error);

src/components/AuthUser/SignInForm/SignInForm.tsx

@@ -41,16 +41,18 @@ export const SignInForm: FC = () => {
   });
 
   const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
-    axios
-      .post('/api/web/login', {
-        values,
-      })
-      .then((response) => {
-        // Handle server reponse
-      })
-      .catch((error) => {
-        // Handle error
-      });
+    axios.post(
+      '/api/web/login',
+      {
+        username: values.email,
+        password: values.password,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
   };
   const intl = useIntl();
   const classes = useStyles();