Redux state is not uniform across all tabs - reactjs

Question

Im facing an issue now with my authentication system that is based on django-simplejwt and redux-saga.
Whenever i click on the log out button , the following saga is run:
export function* workerLogout(action) {
const r_token = localStorage.getItem('refresh_token');
yield call(() => axios.post('http://127.0.0.1:8000/api/blacklist/', {
"refresh_token": r_token
})) //<--- API end-point to blacklist the tokens
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token'); // <--- removing the tokens
yield call(() => axiosInstance.defaults.headers['Authorization'] = null ); //<--- setting the headers to null
yield put({ type: "LOGOUT_SUCCESS" }) //<---- This will go to the reducer to set the states to null
}
Which will then acccess the reducer here:
const authLogout = (state, action) => {
return updateObject(state, {
access_token: null,
refresh_token: null,
isAuthenticated: false,
group: {},
username: null,
});
}
This works and my redux tool bar shows that the state of the tab is indeed cleared:
isAuthenticated(pin):false
access_token(pin):null
refresh_token(pin):null
group(pin):
username(pin):null
My interceptor:
axiosInstance.interceptors.response.use(
response => {
return response
},async error => {
const originalRequest = error.config;
// Prevent infinite loops
if (error.response.status === 401 && originalRequest.url === '/token/refresh/') {
store.dispatch({type: "LOGOUT"});
return Promise.reject(error);
}
if (error.response.data.code === "token_not_valid" &&
error.response.status === 401 &&
error.response.statusText === "Unauthorized")
{
const refreshToken = localStorage.getItem('refresh_token');
if (refreshToken){
const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
// exp date in token is expressed in seconds, while now() returns milliseconds:
const now = Math.ceil(Date.now() / 1000);
if (tokenParts.exp > now) {
console.log('access token is expired , attempting refresh')
try {
const response = await axiosInstance
.post('/token/refresh/', { refresh: refreshToken });
localStorage.setItem('access_token', response.data.access);
localStorage.setItem('refresh_token', response.data.refresh);
axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
originalRequest.headers['Authorization'] = "JWT " + response.data.access;
axiosInstance.get('group/get/').then(groups => {
store.dispatch({type: "LOGIN_SUCCESS" , payload:[response.data.access, refreshToken, groups.data, jwt_decode(response.data.access).username]});
})
return axiosInstance(originalRequest);
}
catch (err) {
store.dispatch({type: "GET_ERRORS" , error : err.response.data})
}
}else{
store.dispatch({type: "LOGOUT"});
}
}
}
store.dispatch({type: "GET_ERRORS" , error : error.response.data})
return Promise.reject(error);
}
);
However , if let's say a second tab was open at the point of the logout , i can still access my server's resources from the second tab. Upon closer inspection of the redux tool bar , it seems the state of the second tab is not affected by the first tab.
Is this an expected behavior? If so how do i make it in synced across all tabs as this seems like a bad way to secure the application.

Answer 1

I would suggest to store your Accesstoken and refreshtoken in Browser's local storage. Clearing accesstoken from redux store will not impact the other tabs.
On your Login success you can store accesstoken as
static saveToken(token, refreshToken){
window.localStorage.setItem('token', token);
window.localStorage.setItem('refresh_token', refreshToken);
}
On your logout success you can just remove the token by
static clearAccessToken(){
window.localStorage.removeItem('token');
window.localStorage.removeItem('refresh_token');
}
In your request Interceptor you can access the accesstoken/refreshtoken by
static isAuthenticated(){
return window.localStorage.token != null;
}
static getAccessToken(){
return window.localStorage.token;
}
static getRefreshToken(){
return window.localStorage.refresh_token;
}
By doing this way when you logout from one tab it will logged out from your browser.
You can contorl the logout error in authInterceptor
axios.interceptors.response.use((response) => {
return response
}, (error) => {
const { config, response: { status } } = error;
const originalRequest = config;
if (status === 401) {
if(config.url.endsWith('oauth/token') || config.url.endsWith('users/logout')){
return Promise.reject(error);
}
if (!this.isAlreadyFetchingAccessToken) {
this.isAlreadyFetchingAccessToken = true;
var refreshTokenValue = AuthService.getRefreshToken();
refreshToken(refreshTokenValue).then((token) => {
this.isAlreadyFetchingAccessToken = false
if(token && token.data && token.data.access_token){
AuthService.saveToken(token.data.access_token, token.data.refresh_token);
this.onAccessTokenFetched(token.data.access_token);
}
}).catch(err => {
this.isAlreadyFetchingAccessToken = false;
this.subscribers = [];
this.history.push('/login');
return Promise.reject("Auth error");
})
}
const retryOriginalRequest = new Promise((resolve) => {
this.addSubscriber(access_token => {
originalRequest.headers.Authorization = 'Bearer ' + access_token
resolve(axios(originalRequest))
})
})
return retryOriginalRequest
}
console.log("Unknown error :" + error);
let errorMessage = '';
if(error.response && error.response.data) {
return Promise.reject(error.response.data);
} else {
return Promise.reject({
code: UNKNOWN_ERROR,
message: "Oops, Unable to complete the request"
});
}
})
This is my request interceptor
axios.interceptors.request.use(function (config) {
if(AuthService.isAuthenticated()){
if(config.url.startsWith(apiUrl) && !config.url.startsWith(OAUTH_URL)){
config.headers.Authorization = 'Bearer ' + window.localStorage.token;
}
}
return config;
});
In the above code I am reading my access token directly from localstorage. Upon logout the Authorization header by default becomes invalid and throws 401 now In your reponse interceptor you can redirect to logout page when refresh token fails. Hope this will help.