Javascript download file from url with authentication

Here is my contribution:. Of course the request must be authenticated. In general I want to avoid use of the browser's ugly authentication dialog, so this means the authentication needs to occur in code.

If the user clicks a link this navigates away from my single-page application, thus I lose any authentication info and the user gets the authentication dialog. The same problem applies to techniques that involve window. In addition I want the user experience to be just like any other file download. Maybe it goes to the "Downloads" folder or even opens in the browser depending on the file type and browser support.

To get the blob you just need to authenticate via XHR. The built-in params username and password for XHR don't seem to work in fact they may not be intended to be used in this way.

Contents 1. What are automatic downloads with JavaScript? Making JavaScript download files without the server 3. Using FileSaver.

What is a Blob? JavaScript download: useful tips. Example Copy. Try it Live Learn on Udacity. Pros Simplistic design no unnecessary information High-quality courses even the free ones Variety of features. Web Development articles, tutorials, and news.

Sign in. Part 1: JWT to authenticate downloadable files at Client. Rachit Gulati Follow. Written by Rachit Gulati Follow. More From Medium. Marco Righele. Marco Righele Marco Righele 2, 3 3 gold badges 22 22 silver badges 21 21 bronze badges. By remote do you mean that the downloadable files are on a different domain than the Angular app? Do you control the remote have access to modify it's backend or not?

I mean that the file data is not on the client browser ; the file is hosted on the same domain and I have control of the backend. I will update the question to make it less ambiguous. The difficulty of option 2 is dependent on your backend.

If you can tell your backend to check the query string in addition the the authorization header for the JWT when it goes through the authentication layer, you're done. Which backend are you using? Add a comment. Active Oldest Votes. Improve this answer. Dave 5 5 silver badges 8 8 bronze badges. Technetium Technetium 5, 2 2 gold badges 39 39 silver badges 52 52 bronze badges. I keep wondering why no one considers this response. It's simple and since we're living in , the platform support is fairly good.

But iosSafari support for the download attribute looks pretty red : — Martin Cremer. This worked fine for me in chrome. For firefox it worked after I added the anchor to the document: document. This solution works but does this solution handle UX concerns with large files?

We needed to add authentication to the route. First, let me show you the code we were using until now. Below is a simplified version of the unauthenticated case. So your front-end component could retrieve the required file names, concatenate them somehow, and then simply display a link to the back-end URL, like so:. This is all good and well, but when you do this, you cannot forward JWT tokens, so you cannot authenticate your user: you need to download the files some other way.

So first, you need to add some kind of authentication and authorization. Though my project required complex authorization rules, let us say you only want to be sure the user is logged in before sending them the files.