Authentication Refresh Token - reactjs

Question

Building a login form using Reactjs, redux, axios and redux-thunk. I have two tokens - one named access token and refresh token.
When the user is authenticated, store the access token which should last for 12 hours. The refresh token is also provided and will last 30 days.
Once the access token has expired need to check the timestamp (date) if access token is expired.
How can I update the access token once expired? Token data looks like this so I have a timestamp to check against:
{
"access_token": "toolongtoinclude",
"token_type": "bearer",
"refresh_token": "toolongtoinclude",
"expires_in": 43199,
"scope": "read write",
"roles": [
"USER"
],
"profile_id": "b4d1e37d-7d05-4eb3-98de-0580d3074a0d",
"jti": "e975db65-e3b7-4034-a6e4-9a3023c3d175"
}
Here are my actions to save, get and update tokens from storage. I'm just unsure on how to refresh the token.
export function submitLoginUser(values, dispatch) {
dispatch({type: constants.LOADING_PAGE, payload: { common: true }})
return axios.post(Config.API_URL + '/oauth/token', {
username: values.email,
password: values.password,
scope: Config.WEBSERVICES_SCOPE,
grant_type: Config.WEBSERVICES_GRANT_TYPE_PASSWORD
},
{
transformRequest: function (data) {
var str = [];
for (var p in data) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p]));
}
return str.join('&');
},
headers: {
'Authorization': 'Basic ' + window.btoa(Config.WEBSERVICES_AUTH),
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => {
const {access_token, refresh_token} = response.data;
dispatch({type: constants.LOADING_PAGE, payload: { common: false }})
dispatch({
type: constants.LOGIN_SUCCESS,
payload: {
access_token: access_token,
refresh_token: refresh_token
}
});
saveTokens(response)
browserHistory.push('/questions');
refreshToken(response);
})
.catch(error => {
dispatch({type: constants.LOADING_PAGE, payload: { common: false }})
//401 Error catch
if(error.response.status === 401) {
throw new SubmissionError({username: 'User is not authenticated', _error: message.LOGIN.loginUnAuth})
}
//Submission Error
throw new SubmissionError({username: 'User does not exist', _error: message.LOGIN.loginFailed})
})
}
/**
* Save tokens in local storage and automatically add token within request
* #param params
*/
export function saveTokens(params) {
const {access_token, refresh_token} = params.data;
localStorage.setItem('access_token', access_token);
if (refresh_token) {
localStorage.setItem('refresh_token', refresh_token);
}
//todo fix this later
getinstanceAxios().defaults.headers.common['Authorization'] = `bearer ${access_token}`
}
/**
*
*/
export function getTokens() {
let accessToken = localStorage.getItem('access_token');
return accessToken
}
/**
* update the get requests
*/
export function updateTokenFromStorage() {
const tokenLocalStorage = getTokens();
getinstanceAxios().defaults.headers.common['Authorization'] = `bearer ${tokenLocalStorage}`;
}
/**
* Refresh user access token
*/
export function refreshToken(dispatch) {
//check timestamp
//check access expired - 401
//request new token, pass refresh token
//store both new access and refresh tokens
}

Answer 1

check this out:
https://github.com/mzabriskie/axios#interceptors
I think this can help you. You intercept your request and make your validations.
EDIT
Here is the code I've tried to use in my store to test, not getting any log back
import { createStore, applyMiddleware, compose } from 'redux'
import { devTools, persistState } from 'redux-devtools'
import axios from 'axios'
import Middleware from '../middleware'
import Reducer from '../reducers/reducer'
import DevTools from '../containers/DevTools'
let finalCreateStore
if (__DEVELOPMENT__ && __DEVTOOLS__) {
finalCreateStore = compose(
applyMiddleware.apply(this, Middleware),
// Provides support for DevTools:
DevTools.instrument(),
// Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions
persistState(getDebugSessionKey())
)(createStore)
} else {
finalCreateStore = compose(
applyMiddleware.apply(this, Middleware)
)(createStore)
}
function getDebugSessionKey() {
// You can write custom logic here!
// By default we try to read the key from ?debug_session=<key> in the address bar
const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/)
return (matches && matches.length > 0)? matches[1] : null
}
axios.interceptors.response.use((err) => {
if (err.status === 401) {
console.log('ACCESS TOKEN EXPIRED!');
}
});
export const store = finalCreateStore(Reducer)