React.js Authentication Problem Even I Get the Token - reactjs

Question

I'm building a site with basic auth with Spring. I use Redux. I'm sending a request to "/auth" in the backend. After successfully logging in, i get those:
enter image description here
As you can see I have successfully logged in.
But i still can not be authenticated. I did not refresh the page i did nothing but this is the console output. By the way, postman is working fine.
enter image description here
This is part of apiCalls:
import axios from "axios";
export const signup = (body) => {
return axios.post('/users', body);
};
export const login = creds => {
return axios.post('/auth', {}, {auth:creds});
};
export const getMarketItemsSortByDate = () => {
return axios.get("/market/last");
}
This is configureStore:
import {createStore, applyMiddleware,compose} from 'redux';
import authReducer from './authReducer';
import SecureLS from 'secure-ls';
import thunk from 'redux-thunk';
const secureLS = new SecureLS();
const getStateFromStorage = () => {
const hoaxAuth = secureLS.get('hoax-auth');
let stateInLocalStorage = {
isLoggedIn:false,
username:undefined,
mail:undefined,
balance:undefined,
password:undefined
};
if(hoaxAuth){
stateInLocalStorage = hoaxAuth;
}
return stateInLocalStorage;
}
const updateStateInStorage = newState => {
secureLS.set('hoax-auth', newState);
}
const configureStore = () => {
const initialState = getStateFromStorage();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(authReducer, initialState, composeEnhancers(applyMiddleware(thunk)));
store.subscribe(()=> {
updateStateInStorage(store.getState());
})
return store;
}
export default configureStore;
This is authActions :
import * as ACTIONS from "./Constants";
import {login} from '../api/apiCalls';
export const logoutSuccess = () => {
return {
type: ACTIONS.LOGOUT_SUCCESS
};
}
export const loginSuccess = authState => {
return {
type: ACTIONS.LOGIN_SUCCESS,
payload: authState
};
};
export const loginHandler = credentials => {
return async function(dispatch) {
const response = await login(credentials);
const authState = {
...response.data,
password: credentials.password,
};
console.log(authState);
dispatch(loginSuccess(authState));
return response;
};
};
And this is authReducer:
import * as ACTIONS from './Constants';
const defaultState = {
isLoggedIn:false,
username:undefined,
mail:undefined,
balance:undefined,
password:undefined
}
const authReducer = (state= { ...defaultState},action) => {
if(action.type === ACTIONS.LOGOUT_SUCCESS){
return defaultState;
} else if(action.type === ACTIONS.LOGIN_SUCCESS){
return {
...action.payload,
isLoggedIn:true
}
}
return state;
}
export default authReducer;
Everything is fine with postman so problem should be inside React.js

Answer 1

Make sure to set withCredentials for each requests you made with axios that requires the token as such:
export const login = creds => {
return axios.post('/auth', {}, {auth:creds, withCredentials:true});
};
export const getMarketItemsSortByDate = () => {
return axios.get("/market/last", {}, {withCredentials:true});
}
which allows the access token to be set and to be sent along with the request.