Issue with Google Sign-In using Django-allauth and React

Question

I am using bellow development environment:

• OS = Ubuntu 22.04.2
• Python = 3.10.6
• Django = 4.2.2
• djangorestframework = 3.14.0
• django-allauth = 0.54.0

I am running the Django server on localhost 8000 with SSL and the React server on 3000

The authentication is being handled by django-allauth and I am only using google and the local a local model for authentication.

I have registered both the front-end and back-end URLs with google credentials. The Google credential configuration looks like google credential configuration

I am running the server with gunicorn with the below command: gunicorn --certfile=certs/server.crt --keyfile=certs/server.key mt_backend.wsgi:application

When I try to log in with Google using the URL: /accounts/google/login/. I am able to log in successfully. However, when I try to POST the request to the same endpoint from my react app it throws a 304(Forbidden) error with backend logging: Forbidden (CSRF cookie not set.): /accounts/google/login/

Here's the code snippet for the login function used in React app:

  const handleGoogleLogin = () => {
    axios
      .post("https://127.0.0.1:8000/accounts/google/login/")
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
  };

I have tried comparing both the session and found out, there is one additional csrfmiddlewaretoken getting passed on payload when I tried to use the Django url, but that token is missing when the request comes from the react app.

Network tab when the requests come from *https://127.0.0.1:8000/accounts/google/login/

from backend

Network tab when the requests come from *https://127.0.0.1:8000/accounts/google/login/

from react app

I also made sure the {% csrf_token %} is introduced inside the social login form that is used by the allauth library.

I need to invoke the Google sign-in prompt from my React app. I would appreciate any help. Thanks in advance