Django app sending jwt token and refresh token to browser cookie but why my frontend app couldn't verify it?

I am using jwt authentication on my Django app. When user login to my website my server sends jwt token and refresh token to the browser cookie but I am getting "User is not authenticated." error and not getting any profile data for my user_profile/ api endpoint.

Even I can see jwt token and refresh token also avaiable on the browser cookie after user login and aslo {withCredentials:true} in my axois post.

here is my login code:

@api_view(['POST'])
def user_login(request):
    if request.method == 'POST':
        
      ...others code    
        refresh = RefreshToken.for_user(user)
        response = Response({'message': 'Login successful.'}, status=status.HTTP_200_OK)
        response.set_cookie('jwt_token', str(refresh.access_token))
        response.set_cookie('refresh_token', str(refresh))
         
        return response
    
    else:
         return Response({'error': 'Invalid credentials.'}, status=status.HTTP_401_UNAUTHORIZED)

here is my api for get user profile

@api_view(['GET'])
def get_user_profile(request):
    if request.user.is_anonymous:
        return Response({'error': 'User is not authenticated.'}, status=status.HTTP_401_UNAUTHORIZED)
    
    user = request.user
    profile = Profile.objects.get(user=user)
    data = {
        'username': user.username,
         
    }
    return Response(data, status=status.HTTP_200_OK)

my settings.py

REST_FRAMEWORK = {
    'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',  
    'DEFAULT_AUTHENTICATION_CLASSES': (
       
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
    
}

SIMPLE_JWT = {
    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=5),
    "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
    
}

my frontend code:

 axios.get(`${CustomDomain}/user_profile/`,{withCredentials:true})
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.error(error);
      });
  })

;

you can see my api is working

You need to set JWT token in headers of request. You can use axios.interceptors.request to set token in headers

axios.interceptors.request.use(
  (config) => {
    const token = getToken(); // getToken will return token from cookie
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

You can directly set token to header while sending request

axios.get(`${CustomDomain}/user_profile/`,{withCredentials:true, headers:{Authorization: `Bearer ${getToken()}`}})
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.error(error);
  });

})

getToken is a function which will return JWT access token from cookie

import cookie from "cookiejs";  // npm i cookiejs
const getToken = () => cookie.get("jwt_token")