How to authenticate users with HttpOnly Cookie Django-React

Viewed 1335

I'm trying to understand authentication system for my web app but I'm going nuts. At this point I literally have no idea what I am doing,

Anyway I'm developing a Django-React Web App and using JWT tokens for authentication. For security measures I decided not to store JWT tokens in client, this is where my confusion gets start. So I make an axios POST request to login from React =>

//LOGIN USER
export const login = (username, password) => dispatch => {
    //Headers
    const config = {
        headers: {
            "Content-type": "application/json"
        }
    }

    //Request body
    const body = JSON.stringify({ username, password })

    axios.post("http://localhost:8000/auth/login/", body, config, {withCredentials: true})
        .then(res => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data
            })
        }).catch(err => {
            console.log(err)
            dispatch({
                type: LOGIN_FAIL
            })
        })
}

and server responses with some cookies =>

response cookies

and JSON response =>

json response

then I want to use the access_token for authentication but since it is HttpOnly I can't access the token from client. Anyway, with some research I found out that I can send csrf-token to authenticate(I could be wrong about that), so I made a request to protected endpoint =>

import axios from 'axios'
axios.defaults.xsrfCookieName = "csrftoken"
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN" 
//ADD POST
export const addPost = (post) => dispatch => {
    
    const config = {
        headers: {
            "X-CSRFTOKEN": 'csrftoken'
        }
    }

    axios.post(`http://localhost:8000/api/v1/create/`, post, config, {withCredentials: true})
        .then(res => {
            dispatch({
                type: ADD_POST,
                payload: res.data
            })
        }).catch(err => console.log(err))
}

However after this request I got 401 Authentication Credentials not provided response from server. I really don't what to do other than that.

Extra info,

django settings.py

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES':[
       # 'rest_framework.authentication.TokenAuthentication',
         'rest_framework_simplejwt.authentication.JWTAuthentication',
       # 'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
],
    'DEFAULT_PERMISSION_CLASSES': [
    'rest_framework.permissions.AllowAny'
]
}

SIMPLE_JWT = {
        'ROTATE_REFRESH_TOKENS': True,
}


CORS_ORIGIN_ALLOW_ALL = False

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080/#'
)

REST_USE_JWT = True

JWT_AUTH_COOKIE = 'myHttpOnlyCookie'

JWT_AUTH_SECURE = True

JWT_AUTH_SAMESITE = 'Strict'

CSRF_COOKIE_NAME = "csrftoken"

CSRF_COOKIE_HTTPONLY = False

CSRF_COOKIE_SECURE = True

Well I need any advice that I can get from you guys.

1 Answers

Hope you have solved the problem but for future reference making a request to 127.0.0.1 not localhost solves the issue for me.

Related