CSRF Missing Error in DRF + React + SimpleJWT

Question

I have my backend deployed at http://11.11.11.11/api/ for APIs devloped with DRF. Django Admin panel is running at http://11.11.11.11/admin/ and my react frontend is running at http://11.11.11.11/. I am using SimpleJWT for the Authentication. When I login to the react frontend without logging out from the django admin panel It gives me the error CSRF token is missing (Error 403). However if I logout from the admin panel (which deletes the sessionID saved in cookies) I am able to login from my react frontend and here I am not sending any CSRF token or anything. Why this is happening? Why can't I login simultaneously in frontend and the backend?

I tried creating an endpoint where frontend can get the CSRF token and pass it to the login API in X-CSRFToken header in order to get the access token and refresh token.. I didn't work.

import os
from pathlib import Path

from dotenv import dotenv_values

config = dotenv_values(".env")

BASE_DIR = Path(__file__).resolve().parent.parent


# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-o#zup200eb=2f@80#j$+6wu!2x9ts-6xczkgcd%aerj2*8kh!="

DEBUG = True

ALLOWED_HOSTS = ["*"]

INSTALLED_APPS = [
    "debug_toolbar",
    "jazzmin",
    "master",
    "Courses",
    "live_classes",
    "package",
    "students",
    "assessment",
    "coursedetail",
    "import_export",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "rest_framework",
    "ckeditor",
    "website",
    "CreateTest",
    "nested_admin",
    "QuestionBank",
    "Listening_Exam",
    "Reading_Exam",
    "Writing_Exam",
    "Speaking_Exam",
    "corsheaders",
    "exam",
    "froala_editor",
]

MIDDLEWARE = [
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "lmss.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [os.path.join(BASE_DIR, "templates")],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "lmss.wsgi.application"

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql",
        "NAME": config["DB_NAME"],  # "lmss",
        "USER": config["DB_USER"],
        "PASSWORD": config["DB_PASSWORD"],  # os.environ.get("DB_PASSWORD"),
        "HOST": config["DB_HOST"],
        "PORT": config["DB_PORT"],
    }
}



AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]



LANGUAGE_CODE = "en-us"

TIME_ZONE = "UTC"

USE_I18N = True

USE_TZ = True



STATIC_URL = "staticfiles/"


DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

STATIC_ROOT = "/var/www/static/"
MEDIA_ROOT = "/var/www/media/"

PASSWORD_RESET_TIMEOUT = 900

INTERNAL_IPS = [
    # ...
    "127.0.0.1",
    # ...
]



# CSRF_COOKIE_SECURE = True
# CSRF_COOKIE_HTTPONLY = True

# CSRF_TRUSETED_ORIGINS = ALLOWED_HOSTS
# CSRF_COOKIE_SAMESITE = "Strict"
# SESSION_COOKIE_SAMESITE = "Strict"
# CSRF_COOKIE_HTTPONLY = True
# SESSION_COOKIE_HTTPONLY = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ORIGIN_ALLOW_ALL = True
# X_FRAME_OPTIONS = "SAMEORIGIN"


REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": [
        "rest_framework_simplejwt.authentication.JWTAuthentication",
    ],
    "TEST_REQUEST_DEFAULT_FORMAT": "json",
}
CSRF_USE_SESSIONS = True
CSRF_COOKIE_SAMESITE = None
CORS_ALLOW_ALL_ORIGINS = True