One method to facilitate client-side downloads is by leveraging the download attribute, the fetch API, and URL.createObjectURL. By obtaining the file through a JWT, transforming the payload into a blob, creating an object URL for it, assigning this URL to an anchor tag, and triggering a click event in JavaScript, you can achieve the desired result.

let link = document.createElement("a");
document.body.appendChild(link);
let fileUrl = 'https://www.samplewebsite.com/some-file.pdf';

let headers = new Headers();
headers.append('Authorization', 'Bearer MY-TOKEN');

fetch(fileUrl, { headers })
    .then(response => response.blob())
    .then(blobData => {
        let objUrl = window.URL.createObjectURL(blobData);

        link.href = objUrl;
        link.download = 'some-file.pdf';
        link.click();

        window.URL.revokeObjectURL(objUrl);
    });

The value of the download attribute will dictate the eventual filename. If necessary, you can extract a preferred filename from the content disposition response header as suggested in various sources.

Methodology

Following guidance from Matias Woloski, a prominent JWT advocate at Auth0, I tackled the issue by crafting a signed request using the Hawk protocol.

In Woloski's own words:

The approach to resolving this matter involves generating a signed request akin to how AWS operates.

For an illustration of this method applied in practice, refer to this resource demonstrating its use for activation links.

Server-Side Implementation

I established an API endpoint for signing download URLs:

Request:

POST /api/sign
Content-Type: application/json
Authorization: Bearer...
{"url": "https://path.to/protected.file"}

Response:

{"url": "https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c"}

By utilizing a signed URL, access to the file is enabled.

Request:

GET https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c

Response:

Content-Type: multipart/mixed; charset="UTF-8"
Content-Disposition': attachment; filename=protected.file
{BLOB}

Client-Side Integration (by jojoyuji)

This streamlined process allows for seamless accomplishment with just a single user action:

function clickedOnDownloadButton() {

  postToSignWithAuthorizationHeader({
    url: 'https://path.to/protected.file'
  }).then(function(signed) {
    window.location = signed.url;
  });

}

A different method from the current "fetch/createObjectURL" and "download-token" approaches mentioned earlier is employing a conventional Form POST that opens in a new window. When the attachment header is read by the browser in the server response, it automatically closes the new tab and initiates the download process. This same technique works well for displaying resources like PDFs in a separate tab.

This option provides enhanced compatibility with older browsers and eliminates the need to handle a new type of token. Furthermore, it ensures better long-term support compared to basic authentication on the URL, as recent changes in browser behavior are phasing out support for username/password in URLs (source).

On the client-side, using target="_blank" prevents navigation even in case of failures, which holds particular significance for SPAs (single page applications).

An important consideration is that for server-side JWT validation, the token must be retrieved from POST data rather than the header. If your framework automatically controls access to route handlers through the Authentication header, you may have to designate your handler as unauthenticated/anonymous to manually verify the JWT for proper authorization.

The form can be dynamically generated and promptly removed to ensure proper cleanup (note: while this can be achieved in plain JS, JQuery is utilized here for clarity) -

function DownloadWithJwtViaFormPost(url, id, token) {
    var jwtInput = $('<input type="hidden" name="jwtToken">').val(token);
    var idInput = $('<input type="hidden" name="id">').val(id);
    $('<form method="post" target="_blank"></form>')
                .attr("action", url)
                .append(jwtInput)
                .append(idInput)
                .appendTo('body')
                .submit()
                .remove();
}

Simply include any additional data necessary as hidden inputs and ensure they are appended to the form.

A JavaScript-only adaptation of James' solution

function downloadFileFromUrl (fileUrl, authorizationToken) {
    let formElement = document.createElement('form')
    formElement.method = 'post'
    formElement.target = '_blank'
    formElement.action = fileUrl
    formElement.innerHTML = '<input type="hidden" name="authToken" value="' + authorizationToken + '">'

    console.log('form:', formElement)

    document.body.appendChild(formElement)
    formElement.submit()
    document.body.removeChild(formElement)
}

My approach would be to create tokens for downloading purposes.

Using Angular, I would send an authenticated request to acquire a temporary token that expires within an hour. This token would then be appended to the URL as a query parameter, allowing flexibility in how files are downloaded (e.g., using window.open).