allauth react django - Forbidden (CSRF cookie not set.): /accounts/azure/login/

Using Django Mystery Errors
1

I am trying to use Social login Azure using “django-allauth”, Django and react.

I followed the instructions here:
https://django-allauth.readthedocs.io/en/latest/installation.html

I keep on getting the error:

Forbidden (CSRF cookie not set.): /accounts/azure/login/
WARNING 2023-08-17 22:18:43,367 django.security.csrf.log_response:241- Forbidden (CSRF cookie not set.): /accounts/azure/login/

Here is my URLS:

urlpatterns = [
    path("admin/", admin.site.urls),
    path("accounts/", include("allauth.urls")),
]

Here is local.py

ASGI_APPLICATION = "server.asgi.application"

ALLOWED_HOSTS = ["localhost", "127.0.0.1"]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8000",
    "http://localhost:5173",
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
]

CORS_ALLOW_CREDENTIALS = True
SITE_ID = 1
AUTH_USER_MODEL = "accounts.CustomUser"
ACCOUNT_AUTHENTICATION_METHOD = "email"
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_USER_MODEL_USERNAME_FIELD = None

ACCOUNT_EMAIL_VERIFICATION = "none"
ACCOUNT_LOGOUT_ON_GET = True

AUTHENTICATION_BACKENDS = (
    "allauth.account.auth_backends.AuthenticationBackend",
    "django.contrib.auth.backends.ModelBackend",
)


SOCIALACCOUNT_ADAPTER = "accounts.SocialAccountAdapter.SocialAccountAdapter"

In the Installed Apps:

    "corsheaders",
    "django.contrib.sites",
    "allauth",
    "allauth.account",
    "allauth.socialaccount",
    "allauth.socialaccount.providers.azure",

In the middleware:

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
....

And here is the frontend code:

  const fetchDataFromBackend = useCallback(
    async (code: string) => {
      try {
        const codeParams = { code };
        const { data: csrfData } = await axios.get(
          `${API_BASE_URL}get-csrf-token/`
        );
        const csrfToken = csrfData.csrfToken;
        console.log("CSRF Token", csrfToken);
        if (!csrfToken) {
          throw new Error("Error: CSRF token not received from the backend.");
        }
        const { data } = await axios.post(
          `${API_BASE_URL}accounts/azure/login/`,
          codeParams,
          {
            headers: {
              "X-CSRFToken": csrfToken, // Include CSRF token in the request headers
            },
          }
        );

Happy to provide more context, and appreciate any help

2
3

Hi! Have you find the solution of the problem?
I have the same problem and headache already ))