HTTP GET Jwt Request work with postman but same with axios return 401 Unauthorized - vue.js

I have a request against an enpoint that need a token
With postman request work fine and answere 200 and looks like that:
Axios has previously done a succesfull login request that gave it to have a valid token
In the login callback methode I allowed axios to produce request with a valid jwt token:
axios.defaults.headers.common['Authorization'] = token
Then axios do a call is done by this line:
axios.get("https://localhost:44336/api/CurrentBet")
But it produces 2 requests: one with answer 204 No Content and another one with answer 401 Unauthorized
the first request is:
the second request is :
Do you have any idea about what happens and how to resolve it?

For jwt , axios should be set with code bellow;
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Related

how to get a 2 legged authentication on autodesk forge

i have generated a token using a get request and when i am making an api call the call is getting failed so pls add up your suggestion's
here is the error where i am getting an error ,here is the access token which is generated from the 2-legged authentication how do i verify the access token and make a api call to the Autodesk forge
http status code 401 means that server doesn't know who you are. it may occur when you didn't put 'Authorization' in your request headers (or maybe in an incorrect form).
so make sure you have put 'Authorization' in your http request headers and try again!
(note that you have to add 'Bearer ' in front of your access token, and there's a blank after 'Bearer')
{
Authorization : 'Bearer ' + <your token>
}

Axios impossible to read 403 answer body

I am trying to use Vue + axios to query the N26 bank API. To do so you need to ask for a MFA token and go through MFA authorization. The first step is to get the MFA token, by querying https://api.tech26.global/oauth2/token/ and they reply with a 403 with the token in the data. It works when I curl :
% curl -i -H "Authorization: Basic bmF0aXZld2ViOg==" -H "Content-type: application/x-www-form-urlencoded" -H "device-token: aDeviceToken" https://api.tech26.global/oauth2/token --data "username=myUsername&password=MyPassword&grant_type=password"
HTTP/1.1 403 Forbidden
{"userMessage":{"title":"A second authentication factor is required.","detail":"Please provide your second form of authentication."},"mfaToken":"mfaToken","error_description":"MFA token is required","detail":"MFA token is required","hostUrl":"https://api.tech26.global","type":"mfa_required","error":"mfa_required","title":"A second authentication factor is required.","message":"Please provide your second form of authentication.","userId":"MyUserID","status":403}
As you can see, the MFA token is in the answer and can be used to continue the workflow.
However when doing so with Axios on Vue.js, It is impossible for me the get the message with the 403 reply:
let data = new URLSearchParams();
data.append('grant_type', 'password');
data.append('username', 'myUserName');
data.append('password', 'MyPassword');
let headers = { "Authorization": "Basic bmF0aXZld2ViOg==", "Content-type": "application/x-www-form-urlencoded", "device-token": "MyDeviceToken" };
let response = await axios.post(`https://api.tech26.global/oauth2/token`, data, { headers });
console.log(response)
But the only thing in the logs is "XHR OPTIONS https://api.tech26.global/oauth2/token", and when I click on it it just shows 403, without the response body. I tried looking for a way to retrieve the 403 body message, but nobody seems to be interested in this (and it is quite weird that they reply with 403 when this is the normal workflow). Does anyone know how to fetch the response body with axios please ?
This is actually a CORS problem.
The OPTIONS message is the preflight request the browser automatically sends (because you have a custom header: device-token) before it can proceed with the POST. Since the preflight failed with 403, the POST request is not actually sent to the server.
You'll need another way to get the mfaToken, and that's beyond the scope of the question.

Axios post request not returning response error

I have a login function which returns the user id and jwt token on successful login and different errors like username not found or incorrect password etc. if the data provided is incorrect. I tested the api using postman and it works fine but when i make a request from the front end to the login end point. It returns the credentials if the login attempt is valid but does not respond with and error if the login details are incorrect.
Login code
Currently im only logging the axios response to the console
Axios request
As per my comment above, you need to catch errors from your request.
axios.post("[your url here]")
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
});

Understanding bearer tokens when using Postman and not using Postman?

I am trying to integrate a third party API. I was provided with a username and password.
When I use Postman to send a post request to the login webpage; the request header contains a postman token:
Postman-Token: vvvvvvvvv-wwwww-xxxx-yyyy-zzzzzzzzzz //this is not the real value
If I supply the postman token to every request after the login request (as shown below) then everything still works as expected:
If I access the api through my webpage, then everything also works as expected. My questions are:
What is the Postman token? I have looked already here: https://stackoverflow.com/questions/36883046/what-is-the-postman-token-header-attribute-in-generated-code-from-postman#:~:text=1%20Answer&text=This%20is%20primarily%20used%20to,random%20token%20avoids%20this%20issue.
What is the alternative to the Postman token when accessing the API though a webpage. I can see no token in the request when looking at it using Fiddler. Were is the bearer token in Fiddler?
Postman Token :
So it is just a custom header to track and debug postman requests in the receiving server
It doesn't do any authorization
Why no token in fiddler:
Because you haven't added it . You can add any custom header to the request you are sending
Why it works when used as bearer token
Because in your login call your session is cached . So for subsequent requests it is using cached session
To close the session , update the Connection header from keep-alive to close
Try setting second request to no auth:
and see if the request is still successful to confirm you are using cached session

axios api authentication headers jwt and security

Two questions here:
I was not able to pass in a post request using axios and authorization headers as such:
axios.post('http://localhost/dashboard', {headers: { 'Authorization': 'JWT xxxxxx' }})
But I was able to get it to work with a preset: axios.defaults.headers.common['Authorization'] = 'JWT xxx'
Am I missing something as to why the headers parameter was sending the "headers" as a data payload instead of as an actual header?
Once I generate a JWT from my login page, on each page request after that I am only showing the page if the response.status is 200. Is this the correct way to redirect someone back to a login page if their jwt is fake or invalid for accessing the page?
The flow is:
/login for user to get JWT
immediately directed to /dashboard but before they are an api call is made to /dashboard using the JWT and if status code is 200, then the /dashboard page is shown. Is this correct or should I be implementing something more than just a 200 code?
Am I missing something as to why the headers parameter was sending the "headers" as a data payload instead of as an actual header?
Because you're passing the headers as the data payload. I suggest reading the axios docs for axios.post()
It's common to automatically refresh the JWT instead of logging the user out. Depends on your security requirements. For ex., if you were a bank, it's better to log the user out than to auto refresh the JWT.
Instead of checking for 200, check if the status is 403 (or whatever status your backend returns for an invalid JWT). If your backend errors (500), or receives a bad request (400), it's not relevant to an invalid JWT and you'd be logging the user out for nothing.