AuthUser.tsx

import React, { FC, useEffect } from 'react';
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) => {
        axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
      })
      .catch((error) => error);
  }, []);
  return (
    <Container maxWidth="sm">
      <SignInForm />
    </Container>
  );
};