How can I send a JWT token to an external URL?

Question

I have two REST end points.

1. accounts.mydomain.com/login - An identity provider, sends a JWT token as response once a user is authenticated with his username/password.
2. api.mydomain.com/users - Accepts the above JWT token as Authorization header, verifies it and sends user JSON as response if the token is valid.

I have created my UI using Angular2

1. A login page at myservice.mydomain.com, which captures username/password and POSTs the credentials to the rest endpoint accounts.mydomain.com/login and gets JWT token as response. Below page will be shown once the JWT token is received.
2. A home page of users at users.mydomain.com. This page should be shown only if the above JWT token is verified against the rest endpoint api.mydomain.com/users.

I though I would send the JWT token from the response of login page to users.mydomain.com?t=JWTtoken using window.location.href and get the token from query param to send it to api.mydomain.com/users as Authorization header.

I know that, if the JWT token size is increasing, sending the token in the query parameters is not good.

Can anyone suggest me a better way to achieve the above requirement? Is it possible to send the JWT token in the header instead of query parameter?

Answer 1

It's definitely possible to send JWT token as a header. In Angular2 you have a collection of headers on the request API that you can augment. You don't have an interception in Angular2 it seems, but you can always just write your own wrapper on top of the HTTP client to store the token and append it to every request in a header.

This is in fact the most common way of passing a JWT token or any other token to the API (you can send it in cookies as well, e.g. but I prefer header for various reason like maintainability and security).

This is how you set a header:

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
})

You can read more about wrapper in here.