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 =>
and 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.

