Django Rest Auth's JWT Cookies are not saved on Mac

29 Views Asked by At

I am new to Django, and I am creating an API using Django Rest Framework (3.14.0), dj-rest-auth (5.0.2) and simplejwt (5.3.1). CORS is being handled by django-cors-headers (4.3.1), and the middleware is right at the top:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',

    # Django REST Framework
    'rest_framework',
    'rest_framework.authtoken',  # Django REST Framework Token Authentication
    'dj_rest_auth',
    # Registration
    'django.contrib.sites', 
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'dj_rest_auth.registration',
    # CORS
    'corsheaders',

    # Apps
    'profiles',
    'places',
    'posts',
    'likes',

]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'allauth.account.middleware.AccountMiddleware',
    # ... custom middleware ...
    'middleware.dj_rest_auth_logging.LogResponseMiddleware',
]

The Cookies are set like this:

REST_AUTH = {
    'USE_JWT': True,
    'JWT_AUTH_SECURE': True,
    'JWT_AUTH_COOKIE': 'positive-auth',
    'JWT_AUTH_REFRESH_COOKIE': 'positive-refresh-token',
    # When this flag is set to false, the refresh token will be sent in the body
    # Unless, it will be only in a cookie
    'JWT_AUTH_HTTPONLY': False,
    'JWT_AUTH_SAMESITE': 'None',
    # 'JWT_AUTH_COOKIE_DOMAIN' : ".herokuapp.com",
}

CORS_ALLOW_CREDENTIALS = True

I have deployed the api in Heroku, and the Front-End is a React (18.2.0) app using Axios (0.27.2) for all HTTP (I test it in GitPod but have also deployed it in Heroku to see if that solved and CROSS ORIGIN problems.

My Axios default is:

import axios from "axios";

axios.defaults.baseURL = "https://my-app.herokuapp.com";

axios.defaults.headers.post["Content-Type"] = "multipart/form-data";
axios.defaults.withCredentials = true;

export const axiosReq = axios.create();
export const axiosRes = axios.create();

I am on a Mac M2 (Sonoma 14.2.1 (23C71)) and I can see all the cookies in postman (I suppose because it is considered as localhost, so no policies are applied), but I cannot see them in Chrome, nor Edge (I never use Safari due to the lack of dev tools). I see the tokens being sent in the body, but no set-cookie headers.

In Firefox I can see the set-cookie headers, but they are never saved. I thought I needed to declare the domain, so I uncommented the JWT_COOKIE_DOMAIN flag, and now it says that the cookies cannot be saved because the domain is not correct.

The thing that is puzzling me, is that, in a Windows VM created in Azure, everything works perfectly.

  1. Is there a way to make it work on Mac?
  2. Is there something wrong with my API settings.py or do I need to do something on my Mac?
  3. If Mac is the problem, why does that happen and how a normal user should use the web-app?

Thanks!

What I have done so far:

I changed the settings of my JWT configuration and CORS. I created a VM in Azure to test in a Windows machine.

NOTE: I know the set-cookie flag is being sent, as I logged it in my API and then Firefox (Mac) is showing them in the HTTP response received by the front-end.

I expected that the browsers in Mac also saved the cookies.

0

There are 0 best solutions below