I'll throw the http request because I'm calling the refresh token when it returns 401. After the refresh token response, I need to throw the previous request
SAMPLE
Logın -> — 1 hours later— —> call product —> 401 —> call refresh token —> call product
I try this link a link and look this link a link but doesn't work.
Catch the 401 error
setInterceptors = () => {
axios.interceptors.response.use(
response => {
return response;
},
err => {
return new Promise((resolve, reject) => {
if (err.response.status === 401 && err.config && !err.config.__isRetryRequest) {
const originalRequest = err.config;
this.emit('onAutoLogin', originalRequest);
}
// throw err;
});
}
);
};
Call my action
jwtService.on('onAutoLogin', originalRequest => {
jwtService
.signInWithToken()
.then(res => {
if (res.access_token) {
originalRequest.headers['Authorization'] = 'Bearer ' + res.access_token;
Axios.request(originalRequest).then(response => {
store.dispatch({
type: ** MY PROBLEM İS HERE **
payload: response.data
});
});
}
})
.catch(err => {
jwtService.setSession(null);
});
using this link I was able to solve the problem without triggering the redux store.
let isRefreshing = false;
let failedQueue = [];
const processQueue = (error, token = null) => {
failedQueue.forEach(prom => {
if (error) {
prom.reject(error);
} else {
prom.resolve(token);
}
});
failedQueue = [];
};
axios.interceptors.response.use(
response => {
return response;
},
err => {
const originalRequest = err.config;
if (err.response.status === 401 && !originalRequest._retry) {
if (isRefreshing) {
return new Promise(function(resolve, reject) {
failedQueue.push({ resolve, reject });
})
.then(token => {
originalRequest.headers['Authorization'] = 'Bearer ' + token;
return axios(originalRequest);
})
.catch(err => {
return Promise.reject(err);
});
}
originalRequest._retry = true;
isRefreshing = true;
return new Promise(function(resolve, reject) {
axios
.post('/fooUrl/refreshToken', {
refreshToken: "fooToken"})
.then(({ data }) => {
axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.fooToken;
originalRequest.headers['Authorization'] = 'Bearer ' + data.fooToken;
processQueue(null, data.fooToken);
resolve(axios(originalRequest));
})
.catch(err => {
processQueue(err, null);
store.dispatch(showMessage({ message: 'Expired Token' }));
reject(err);
})
.then(() => {
isRefreshing = false;
});
});
}
return Promise.reject(err);
}
);
Related
The logic: On every request there's a JWT Authorization header that authenticates the user. If that expires, there's a cookie endpoint in place ready to refresh the JWT.
I am using axios and interceptor response to check if the client gets a 401 to try and refresh the JWT. The cookie may be valid or not.
The problem is that the interceptor to refresh the JWT never stops firing, and I think I have something wrong with the synchronization of the requests. Below is my code:
function refreshToken(dispatch) {
return new Promise((resolve, reject) => {
instance.put('/auth').then((response) => {
dispatch({ type: "UPDATE_AUTH", payload: response.data });
resolve(response);
})
.catch((error) => {
reject(error);
});
});
}
instance.interceptors.response.use(
response => {
return response;
},
err => {
const error = err.response;
if (error.status === 401 && error.config && !error.config._retry) {
error.config._retry = true;
return refreshToken(dispatch).then((resp) => {
return instance(error.config);
})
.catch((e) => {
return Promise.reject(e);
});
}
return Promise.reject(error);
}
);
If you have more then one parallel requests, refresh the JWT will be equal to the number of requests. Try to send /auth only first time and prevent next requests. You can use localStorage for this task.
let requests = [];
instance.interceptors.response.use(
response => {
return response;
},
err => {
const error = err.response;
if (error.status === 401 && error.config && !error.config._retry) {
requests.push(error.config);
if (!localStorage.getItem('refresh')) {
localStorage.setItem('refresh', 'done');
error.config._retry = true;
return refreshToken(dispatch).then((resp) => {
localStorage.removeItem('refresh');
const token = getAccessToken();
requests.map(req => {
req.headers.Authorization = `Bearer ${token}`;
return instance(req)
})
})
.catch((e) => {
localStorage.removeItem('refresh');
return Promise.reject(e);
});
}
} else {
requests = [];
}
return Promise.reject(error);
}
);
I am using axios-auth-refresh axios interceptor 3rd party library to handle my refresh token, the issue is that i have multiple request on my dashboard around 10 request and every time when the token expires, it will execute the my refresh token function multiple times and based on how many requests that are made. I previously refer to this stackoverflow question but it didn't somehow work on me and some requests are not being made then I opt at using axios-auth-refresh library to handle my refresh token function, because I thought that the option pauseInstanceWhileRefreshing: true will help me prevent it but it didn't somehow work.
What I want to achieve is to execute a single refresh token request to the server while other requests are on queue (I am using cookie to store my token), once it successfully replace the token then it will retry or resend those request back to the server. Below is my code:
import axios from 'axios';
import axiosRetry from 'axios-retry';
import config from 'config';
import {isNull, isUndefined} from 'underscore';
import Cookies from 'universal-cookie';
import createAuthRefreshInterceptor from 'axios-auth-refresh';
const api_client = () => {
const client = axios.create({baseURL: config.server});
const cookies = new Cookies();
client.interceptors.request.use(request => {
const cookies = new Cookies();
const cookieToken = cookies.get('token');
const cookieUser = cookies.get('user');
if(!isNull(cookieToken) && !isNull(cookieUser)) {
if(!isUndefined(cookieToken.token)) {
request.headers['Authorization'] = `Bearer ${cookieToken.token}`;
}
request.withCredentials = true;
request.headers['Content-Type'] = 'application/json'
request.headers['X-Fname'] = cookieUser.username;
}
return request;
}, error => {
console.log(error);
});
const handleRefreshAuth = failedRequest => {
return getRefreshAuthToken().then(response => {
if(response.data) {
cookies.remove("token", { domain: window.location.hostname, path: "/grt" });
cookies.remove("token", { domain: window.location.hostname, path: "/" });
cookies.set("token", { token: response.data.token, refreshToken: response.data.refreshToken, }, { domain: window.location.hostname, path: "/grt", expires: new Date(Date.now() + 259200) });
failedRequest.response.config.headers['Authorization'] = `Bearer ${response.data.token}`;
return Promise.resolve();
}
})
}
const options = {
pauseInstanceWhileRefreshing: true
}
createAuthRefreshInterceptor(client, handleRefreshAuth, options);
const getRefreshAuthToken = () => {
return new Promise((resolve, reject) => {
const cookieToken = cookies.get('token');
const cookieUser = cookies.get('user');
if((!isNull(cookieToken) && !isNull(cookieUser)) || (!isUndefined(cookieToken) && !isUndefined(cookieUser))) {
client.post(`/user/refresh?refreshToken=${cookieToken.refreshToken}`).then(response => {
if(response) {
resolve(response)
}
})
}
})
}
return client;
}
export const retrieve = async (url, data = undefined) => {
return new Promise(async (resolve, reject) => {
await api_client().get(url, data).then(response => {
if(response) {
resolve(response.data);
}
})
})
}
export const send = async (url, data = undefined) => {
return new Promise(async (resolve, reject) => {
await api_client().post(url, data, { skipAuthRefresh: true }).then(response => {
if(response) {
resolve(response.data);
}
})
})
}
export default {retrieve, send};
Network
Old code
I added this one as well, it might be that I missed something else on this one, using raw axios interceptor method, same issue as the new one.
import axios from 'axios';
import axiosRetry from 'axios-retry';
import config from 'config';
import {isNull, isUndefined} from 'underscore';
import Cookies from 'universal-cookie';
const api_client = () => {
const client = axios.create({baseURL: config.server});
let isRefreshing = false;
let failedQueue = [];
const retryCodes = [
401
]
axiosRetry(client, {
retries: 3,
retryDelay: (retryCount) => {
return retryCount * 1000;
},
retryCondition: (error) => {
return retryCodes.includes(error.response.status);
}
});
client.interceptors.request.use(request => {
const cookies = new Cookies();
const cookieToken = cookies.get('token');
const cookieUser = cookies.get('user');
if(!isNull(cookieToken) && !isNull(cookieUser)) {
if(!isUndefined(cookieToken.token)) {
request.headers['Authorization'] = `Bearer ${cookieToken.token}`;
}
request.withCredentials = true;
request.headers['Content-Type'] = 'application/json'
request.headers['X-Fname'] = cookieUser.username;
}
return request;
}, error => {
console.log(error);
});
const processQueue = (error, token = null) => {
const cookies = new Cookies();
console.log('processQueue', token)
failedQueue.forEach(prom => {
if (error) {
prom.reject(error);
} else {
const cookieToken = cookies.get('token');
prom.resolve(cookieToken.token);
}
})
failedQueue = [];
}
const getRefreshAuthToken = async () => {
return new Promise(async (resolve, reject) => {
const cookies = new Cookies();
const cookieToken = cookies.get('token');
const cookieUser = cookies.get('user');
if((!isNull(cookieToken) && !isNull(cookieUser)) || (!isUndefined(cookieToken) && !isUndefined(cookieUser))) {
await client.post(`/user/refresh?refreshToken=${cookieToken.refreshToken}`).then(response => {
if(response) {
resolve(response)
}
})
}
})
}
client.interceptors.response.use(response => {
return response;
}, error => {
const originalRequest = error.config;
const cookies = new Cookies();
if (error.response.status === 401 && !originalRequest._retry) {
if (isRefreshing) {
return new Promise(function(resolve, reject) {
failedQueue.push({ resolve, reject });
}).then(response => {
if(response) {
console.log('from test response', response)
cookies.remove("token", { domain: window.location.hostname, path: "/grt" });
cookies.remove("token", { domain: window.location.hostname, path: "/" });
cookies.set("token", { token: response.data.token, refreshToken: response.data.refreshToken, }, { domain: window.location.hostname, path: "/grt", expires: new Date(Date.now() + 259200) });
originalRequest.headers['Authorization'] = `Bearer ${cookies.get('token').token}`;
return client(originalRequest);
}
}).catch(error => {
return Promise.reject(error);
});
}
originalRequest._retry = true;
isRefreshing = true;
return new Promise((resolve, reject) => {
getRefreshAuthToken()
.then(response => {
if(!isUndefined(response)) {
cookies.remove("token", { domain: window.location.hostname, path: "/grt" });
cookies.remove("token", { domain: window.location.hostname, path: "/" });
cookies.set("token", { token: response.data.token, refreshToken: response.data.refreshToken, }, { domain: window.location.hostname, path: "/grt", expires: new Date(Date.now() + 259200) });
}
processQueue(null, cookies.get('token').token);
resolve(client(originalRequest));
}).catch(error => {
// add to queue for failed requests
processQueue(error, null);
reject(error);
}).then(() => {
isRefreshing = false
});
});
}
return Promise.reject(error);
})
return client;
}
export const retrieve = async (url, data = undefined) => {
return new Promise(async (resolve, reject) => {
await api_client().get(url, data).then(response => {
if(response) {
resolve(response.data);
}
})
})
}
export const send = async (url, data = undefined) => {
return new Promise(async (resolve, reject) => {
await api_client().post(url, data, { skipAuthRefresh: true }).then(response => {
if(response) {
resolve(response.data);
}
})
})
}
export default {retrieve, send};
Does anyone knows how to fix this? If so, please let me know, thanks!
The below angular code switchMap is not working, I'm not sure what error I made. Under the switchMap second API call not triggering '/upload/file'
zip(
this.service.submitForm(formValue),
this.service.upload(fData)
).subscribe(
([submitForm, upload]) => {
if (submitForm === 'success' && upload === 'Ok') {
//Redirect confirmation page
}
},
(err) => {
console.log(err, 'ERORORO');
}
)
//Service code
upload(formData): Observable <any> {
return this.sessionService.keepAlive().pipe(
switchMap(data => {
let token = data.jwtToken;
console.log(token, 'TOKEN SESSION');
// getting output as Bearer xyz
// with formData as req
const request_config = {
headers: {
"Authorization": token
}
};
console.log("REQUEST CONFIG", request_config); // getting output
return this.http.post < any > (
'/upload/file',
formData,
request_config
).pipe( // this is not working
map((res) => {
console.log(res, 'RESPONSE');
return res.status;
}),
catchError((error: HttpErrorResponse) => {
throw error;
})
)
})
)
}
I am working on login feature and have problem when refresh token.
When token expire making request to refresh token, remove the old token, and save the new token to AsyncStorage.
After login successfully have to function A and B. The function A is using the new token to make its request. the function B say that it need to refresh the token so make request to refresh token ( the request make successfully, token being refresh) but The token that request A is using now invalid - I think it happens due to asynchronous
This is my code that use to refresh token:
axiosInstance.interceptors.response.use(
function (response) {
return response;
},
async function (error) {
if (error.response.status === CODE_TOKEN_EXPIRED) {
try {
const token = await authenticationService.getRefreshToken();
const response = await authenticationService.refreshToken(token);
await authenticationService.removeToken();
await authenticationService.storeToken(response.data.params.access_token);
await authenticationService.storeRefreshToken(response.data.params.refresh_token);
error.config.headers.Authorization = 'Bearer ' + response.data.params.access_token;
error.response.config.headers['Authorization'] = 'Bearer ' + response.data.params.access_token;
return axiosInstance(error.config);
} catch (err) {
console.log(2, err);
await authenticationService.removeToken();
navigationService.navigate('LoginForm');
}
}
return Promise.reject(error);
}
);
Anyone know how to handle which asynchronous call for refresh token?
First would be for you to check if you are changing token to the correct axios instance. It is necessary to change Authorization header on error.response config as you did, but also for main axios instance (if you have one) like so: axios.defaults.headers.common["Authorization"] = "Bearer " + access_token;
If it is multiple parallel requests going on that could possibly need to be postponed after token is refreshed issue and answer gets complex, but check this gist with full refresh logic with axios.
I have implemented the same scenario in fetch API. you can also do this same in axios API. Try this to avoid interceptor concept.
Api.ts
export const api = ({ method, url, body, isProtected = true }) => {
return new Promise((resolve, reject) => {
const payload = {
method,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
};
if (body !== null) {
(payload as any).body = JSON.stringify(body);
}
/**
* "isProtected" is used for API call without authToken
*/
if (isProtected) {
AsyncStorage.getItem(ACCESS_TOKEN).then(accessKey => {
(payload.headers as any).Authorization = `Bearer ${accessKey}`;
fetch(url, payload)
.then((response: any) => {
/*
* 419 status denotes the timeout of authToken
*/
if (response.status == 419) {
// refresh token
AsyncStorage.getItem(REFRESH_TOKEN).then(refreshKey => {
const payloadRef = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + refreshKey
}
};
/*
* This call refresh the authToken using refreshing call to renew the authToken
*/
fetch(URL.baseUrl + "/refresh", payloadRef)
.then((response: any) => response.json())
.then(response => {
/*
* if refresh token expired. redirect to login page
*/
if (response.status !== codes.SUCCESS) {
if (!User.sessionOver) {
User.sessionOver = true;
Alert.alert(
'Alert',
'Session Timeout',
[
{
text: 'Get back to Login',
onPress: () => {
// get to Login page
}
}
],
{ cancelable: false }
);
}
} else if (response.status == codes.SUCCESS) {
/*
* If refresh token got refreshed and set it as authToken and retry the api call.
*/
AsyncStorage.setItem(ACCESS_TOKEN, response.payload.access_key).then(() => {
(payload.headers as any).Authorization = 'Bearer ' + response.payload.access_key;
fetch(url, payload)
.then(response => response.json())
.then(response => {
if (response.status == codes.SUCCESS) {
resolve(response);
}
})
.catch(error => {
reject(error);
});
});
}
});
});
} else {
resolve(response.json());
}
})
.catch(error => {
reject(error);
});
});
} else {
fetch(url, payload)
.then((response: any) => {
response = response.json();
resolve(response);
})
.catch(error => {
reject(error);
});
}
});
};
MovieService.ts
import { api } from '../services/api';
import { URL } from '../config/UrlConfig';
const getMovies = () => {
const method = 'GET';
const url = URL.baseUrl + '/v1/top/movies';
const body = null;
const isProtected = true;
return api({ method, url, body, isProtected });
};
export { getMovies };
Maybe it will helps - https://gist.github.com/ModPhoenix/f1070f1696faeae52edf6ee616d0c1eb
import axios from "axios";
import { settings } from "../settings";
import { authAPI } from ".";
const request = axios.create({
baseURL: settings.apiV1,
});
request.interceptors.request.use(
(config) => {
// Get token and add it to header "Authorization"
const token = authAPI.getAccessToken();
if (token) {
config.headers.Authorization = token;
}
return config;
},
(error) => Promise.reject(error)
);
let loop = 0;
let isRefreshing = false;
let subscribers = [];
function subscribeTokenRefresh(cb) {
subscribers.push(cb);
}
function onRrefreshed(token) {
subscribers.map((cb) => cb(token));
}
request.interceptors.response.use(undefined, (err) => {
const {
config,
response: { status },
} = err;
const originalRequest = config;
if (status === 401 && loop < 1) {
loop++;
if (!isRefreshing) {
isRefreshing = true;
authAPI.refreshToken().then((respaonse) => {
const { data } = respaonse;
isRefreshing = false;
onRrefreshed(data.access_token);
authAPI.setAccessToken(data.access_token);
authAPI.setRefreshToken(data.refresh_token);
subscribers = [];
});
}
return new Promise((resolve) => {
subscribeTokenRefresh((token) => {
originalRequest.headers.Authorization = `Bearer ${token}`;
resolve(axios(originalRequest));
});
});
}
return Promise.reject(err);
});
export default request;
I use email and password for login at first login and I have a token with getToken() function, after I add localStoreage with AsyncStoreage.setItem("ACCESS_TOKEN",token). I want to refresh to app signup with token and I use signInWithCustomToken(token) but I have an error. its 'auth/invalid-custom-token' (The token you provided is not valid.). I can't login.
DataStore.js
onLogin: function (Data) {
ApiRequest.login(Data)
.then((authData) => {
authData.getToken().then((token)=>{
AccessToken.set(token)
.then(() => Actions.login.completed(authData));
})
.catch((err) => Actions.login.failed(err))
})
.catch((err) => Actions.login.failed(err))
}
ApiRequest.Js
login(data) {
// first.login data = (email.password) && after.login data=(token)
return new Promise((next, error) => {
if (data && data.email && data.password) {
this.firebase.auth().signInWithEmailAndPassword(data.email,data.password)
.then((uData) => {;
next(uData)
})
.catch((err)=> error(err));
} else {
console.log("TOKEN:");
console.log(data);
this.firebase.auth().signInWithCustomToken(data)
.then((authData)=>next(authData))
.catch((err)=>{console.log("Error #232",err)})
}
});
}
AccessToken.Js
get(){
return new Promise((next,error) => {
if(this._accessToken) {
console.log("LastToken");
return next(this._accessToken);
}
AsyncStorage.getItem("ACCESS_TOKEN")
.then((token)=>{
if(token){
next(JSON.parse(token));
}else{
error()
}
})
.catch((err)=>error(err));
});
}
set(token){
this._accessToken=token;
return AsyncStorage.setItem("ACCESS_TOKEN",JSON.stringify(token));
}
Authenticate Listener
actions.auth.listen(function () {
AccessToken.get()
.then((token) => actions.login(token))
.catch((err) => actions.logout());
})
Token
eyJhb...Ckz95w