I have a problem with cookies when I make a request.
When I make the first request it’s all ok, the cookies are ok.
first auth request
The same happens for the second request
second auth request
now i successfully authenticated and i can call a web service and here’s the problem:
ws call
the cookies are not sent and I am asked to re-authenticate.
I’m doing this inside an application made with Vue.
The problem happens in this case:
I have a class that does mock of a library
import axios from "axios";
import Cookies from "js-cookie";
export class WAFData {
constructor() {
this.defaultRequest = {
method: "GET",
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
},
data: null,
async: true,
type: "",
timeout: 25000,
responseType: "text",
cache: -1,
proxy: "ajax",
withCredentials: false,
onComplete: () => {},
onFailure: (error, result, headers) => {
throw error;
},
onPassportError: () => {
throw new Error("Passport error...");
},
onTimeout: (error) => {
throw error;
},
onProgress: () => {},
onUploadProgress: () => {},
};
}
getHeaders(xhr) {
const headers = {};
const arr = xhr
.getAllResponseHeaders()
.trim()
.split(/[rn]+/);
arr.forEach((line) => {
const parts = line.split(": ");
const header = parts.shift();
const value = parts.join(": ");
if (header) headers[header] = value;
});
return headers;
}
handleRedirect(xhr, allOptions) {
const { onFailure, onPassportError, onTimeout } = allOptions;
const redirRes = this.request(xhr.response.x3ds_auth_url, {
onFailure: () => {
const response = JSON.parse(redirRes.xhr.response);
console.error(response.error_description);
onFailure(
new Error(response.error_description),
redirRes.xhr.response,
this.getHeaders(redirRes.xhr)
);
},
onPassportError,
onTimeout,
headers: {
Accept: "application/json",
},
withCredentials: false,
onComplete: (resp) => {
/* const redirUrlWithServiceTicket =
JSON.parse(resp)?.x3ds_service_redirect_url;
if (redirUrlWithServiceTicket)
this.request(redirUrlWithServiceTicket, allOptions); */
},
});
}
async request(url, options) {
const allOptions = {
...this.defaultRequest,
...options,
};
const {
method,
headers,
data,
timeout,
responseType,
withCredentials,
onComplete,
onFailure,
onProgress,
onUploadProgress,
params,
} = allOptions;
const urlObj = new URL(url);
if (!urlObj.searchParams.get("xrequestedwith")) {
urlObj.searchParams.set("xrequestedwith", "xmlhttprequest");
headers["X-Requested-With"] = "XMLHttpRequest";
}
try {
const response = await axios({
method: method,
url: urlObj.toString(),
headers: headers,
data: data,
timeout: timeout,
responseType: responseType,
withCredentials: false,
onUploadProgress: onUploadProgress,
params: params,
});
const sessionCookie = response.headers["set-cookie"];
if (sessionCookie) {
Cookies.set("session", sessionCookie);
}
onComplete?.(response.data, response.headers);
} catch (error) {
if (error.response) {
onFailure?.(
new Error(
`URL "${url}" return ResponseCode with value "${error.response.status}"`
),
error.response.data,
error.response.headers
);
} else if (error.request) {
onFailure?.(
new Error(
`The request was made but no response was received. ${error.message}`
),
null,
null
);
} else {
onFailure?.(
new Error(
`Something happened in setting up the request and triggered an Error: ${error.message}`
),
null,
null
);
}
}
}
authenticatedRequest(url, options) {
return this.request(url, options);
}
}
i’m using **authenticatedRequest ** to make requests ang i got the above error.
But when I do the whole process of authentication and calling the webservice without the authenticatedRequest method of WAFData class but using functions it’s working, for example:
export async function getAuthParams() {
try {
const response = await axios.get(
process.env.VUE_APP_SERVICE_ + "/login",
{
//withCredentials: true,
params: {
action: "get_auth_params",
},
headers: {
"X-Requested-With": "XMLHttpRequest",
},
}
);
} catch (error) {
throw error;
}
}