React - Login success redirect and auth headers - reactjs

Question

I have a login function that should set the user's credentials in sessionStorage upon successful login and then redirect to a new route, calling another api with the sessionStorage auth token added to the headers. For some reason the initial api call after successful login is failing because the auth token isn't added to the request headers. However, if I reload the page after the redirect the request header is added, resulting in a successful response. What is the correct way to save credentials to sessionStorage and configure all headers for subsequent requests.
components/Login.jsx
login(event) {
event.preventDefault();
this.props.dispatch(loginUser(this.state.creds));
}
actions/loginActions.js
export function loginUser(user) {
return function(dispatch) {
return LoginApi.login(user).then(creds => {
dispatch(loginUserSuccess(creds));
}).catch(error => {
throw(error);
});
};
}
export function loginUserSuccess(creds) {
sessionStorage.setItem('credentials', JSON.stringify(creds.data));
hashHistory.push('/packages');
return {
type: types.LOGIN_USER_SUCCESS,
state: creds.data
}
}
api/config.js
import axios from 'axios';
sessionStorage.credentials ? axios.defaults.headers.common['Authorization'] = 'Bearer ' + JSON.parse(sessionStorage.credentials).authToken : undefined;
api/packageApi.js
import './config';
import axios from 'axios';
class PackageApi {
static getAllPackages() {
return axios.get('/get/my/packages')
.then(function (response) {
console.log(response);
return response;
})
.catch(function (error) {
console.log(error);
});
}
}
Edit
// same behavior
sessionStorage.getItem('credentials') ? axios.defaults.headers.common['Authorization'] = 'Bearer ' + JSON.parse(sessionStorage.credentials).authToken : undefined;
// Fixed - api/config.js
import axios from 'axios';
const axiosInstance = axios.create();
axiosInstance.interceptors.request.use(
config => {
sessionStorage.getItem('credentials') ? config.headers['Authorization'] = 'Bearer ' + JSON.parse(sessionStorage.credentials).authToken : undefined;
return config;
},
error => Promise.reject(error)
);
export default axiosInstance;
// Fixed - api/packageApi.js
import axiosInstance from './config';
class PackageApi {
static getAllPackages() {
return axiosInstance.get('/get/my/packages')
.then(function (response) {
console.log(response);
return response;
})
.catch(function (error) {
console.log(error);
});
}
}
export default PackageApi;

Answer 1

Your config file is parsed and evaluated as soon as the browser loads it. At that time there is no token in your sessionStorage. What you need to do is to write a function which is only defined at parse time but then you call it at runtime to get the token:
class PackageApi {
static getAllPackages() {
const token = window.sessionStorage.getItem('credentials')
return axios.get('/get/my/packages', {
headers: {'Authorization': `Bearer ${ token }`}
})
.then(function (response) {
console.log(response);
return response;
})
.catch(function (error) {
console.log(error);
});
}
}
Here I did not define a function because sessionStorage.getItem is already a function but it doesn't stop you to write stuff like this:
const getFromStorage = key => {
const value = window.sessionStorage.getItem(key);
return JSON.parse(value);
}
axios.get('/get/my/packages', {
headers: {'Authorization': `Bearer ${ getFromStorage('credentials') }`}
})