How to retrieve a Bearer Token from an Authorization Header in JavaScript (Angular 2/4)?

Question

In JavaScript I have a method which authenticates to my server via an http post request successfully.

The response data from my server is sending a JWT in an Authorization header like so:

Authorization: Bearer mytoken12345abc

I can retrieve the authorization header successfully from my servers response data like so for example:

let authheader = response.headers.get('Authorization');

But how do I parse this? Is "Bearer" a key? so something like:

let token = authheader.Bearer 

which obviously is not correct. What can I try next?

In other words, is the following the best approach?

let token = response.headers.get('Authorization');
let parsedToken = token.slice(7);

Solution

According to the jwt.io docu,

Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema.

Therefore using the JWT in the Authorization header is supposed to be used by the client, not the server for the initial response.

The correct way is to get the token as part of the response body. We use a

 { jwt: TOKEN } 

type scheme for that. Then you can easily access it via your response.json().

You can access the header value directly using response.headers.get(...) but then you will have to split, substr or regex-match to get the actual token.

Comments

[DevMike]

Thanks for this, i understand this exactly, however ... before i can set the token into sessionStorage, how do i retrieve it from the "Authorization" header? My server is sending the token in a header in the same way you are showing me how to send it to the server ...

[sagar patel]

Do you mean? are you want to get token from api header in angular2 ?

[DevMike]

Yes, my server is Sending the token after successful login in an "Authorization" header: Authorization: Bearer mytoken123abc ...

[sagar patel]

But Bro. Authorization is typically used as a request header, not as response. Why don't you return the access token in the body of the response at login time?

[sagar patel]

yes, you should tell them to send token in simple json response in login success only (after login success no need to send token again in another API) and then get that token from response and store it in session or local storage what you want.

[DevMike]

not sure on laravel, ill have to find out .... so my only question now .... is it secure for them to send the JWT in the Json response? Or does it not really make a difference whether it is sent in a header or in the json payload?

[sagar patel]

Simple and safe conventional way is server respond with JWT token as a simple json response to angular side on login success time and after that angular sends authorization token in header to every API call to server side and server check that header like user is valid or not and token is expired or not

[Boppity Bop]

this could be simple but it is far from conventional. most of the scenarios involve separate identity servers, often even hosted separately..